I finally found the courage to write and expose myself to the internet. I've always wanted to learn shaders so I thought it would be nice to document my learning and share it with others.
Nice work - this is really cool!
Interactive intro to shaders
61–70 of 72 posts
Re: Interactive intro to shaders
#62Re: Interactive intro to shaders
#63Re: Interactive intro to shaders
#64From an efficiency point of view, would this be better or worse than the css animation? Just curious.
Re: Interactive intro to shaders
#65wow this is delightful! Is there anything you can share about how you made the page? Are the graphics in webgl? What did you use to embed the code?
Re: Interactive intro to shaders
#66wow this is delightful! Is there anything you can share about how you made the page? Are the graphics in webgl? What did you use to embed the code?
ah I see it is webgl and codemirror. But if you have anything else to share about the making of the site would love to hear!
Re: Interactive intro to shaders
#67I finally found the courage to write and expose myself to the internet. I've always wanted to learn shaders so I thought it would be nice to document my learning and share it with others.
This post got me to log in to thank you for taking the time to write this, and to congratulate you on how enlightening it is.
Re: Interactive intro to shaders
#68I have never dealt with shaders, so pardon me if it's a very basic question. In a single frame from a game, are shaders essentially all that are being used to draw it? Or do we have basic shapes like triangles, squares, circles, etc and the shaders go on top of it, drawing shadows, smoothing edges, etc? From the example, it seems like you can create a shader to draw any object in a scene, and then I imagine you compo…
You can draw any object with fragment (aka pixel) shaders. Because some specific math techniques can be used to draw shapes, regardless of the technology (SDF, trigonometry, ect).
So some talented artists are pushing the bounds and wrestling with performance trade-offs in the fragment shader.
Fragment shaders are more commonly used for making full screen filter effects (color correction, ect).
Shaders are also used to make textures and materials on basic objects. Material artists often generate textures with shader math.
Many visual effects are made by using shaders in creative ways.
Shaders are run on the GPU in a parallel, wave-like fashion. Many, many, many threads run across the same data in one wave.
In some cases shaders are much faster than CPU branching code. Shaders also have easier access to some rendering data.
So they are a good space for creative special effects.
Any object in a game with a high level of surface detail is a common target, to shift that detail onto a shader.
Ocean surfaces, tesselating meshes, ect.
There's many other uses, because GPUs are powerful and flexible.
Re: Interactive intro to shaders
#69This is supercool! I'll work through it later when I have some free time.
I've always wanted to setup an interactive blog like this or Bartosz Ciechanowski's. Are you willing to describe your stack? I put something together with django & bootstrap once, but even that was more overhead than I liked.
Re: Interactive intro to shaders
#70I have never dealt with shaders, so pardon me if it's a very basic question. In a single frame from a game, are shaders essentially all that are being used to draw it? Or do we have basic shapes like triangles, squares, circles, etc and the shaders go on top of it, drawing shadows, smoothing edges, etc? From the example, it seems like you can create a shader to draw any object in a scene, and then I imagine you compo…
> Or do we have basic shapes like triangles Generally this - the SDF mechanism is very clever, but that's not what game engines tend to do, their geometry comes from triangle-based tools used by artists.
SDF is clever, but not as much as triangles. :) SDF is unfortunately slow because of the ray-marching loop.