
3D Game Shaders for Beginners - lettier
https://github.com/lettier/3d-game-shaders-for-beginners
======
60654
That's a very cool intro to a variety of shader techniques, especially post-
processing effects.

What's even more wild, is that modern engines include all of this stuff out of
the box, you just have to tick a few check boxes to enable them in your game.
:) For example, check out these postprocessing filters built into Unity and
Unreal - a ton of person-hours went into these:

[https://docs.unity3d.com/Manual/PostProcessingOverview.html](https://docs.unity3d.com/Manual/PostProcessingOverview.html)

[https://docs.unrealengine.com/en-
us/Engine/Rendering/PostPro...](https://docs.unrealengine.com/en-
us/Engine/Rendering/PostProcessEffects)

~~~
JacobiX
I agree with you, however in almost all commercial games that I worked on, we
do write our own shaders. For simple shaders, artists use directly a graphical
tool included in unity for shaders authoring without writing any code, for
complex ones we write our own code.

~~~
aurelwu
do you write them completely from scratch or do you write custom nodes for
whatever node-based shader editor you use? I am a novice when it comes to
shaders but I wonder about the performance difference between hand written
shaders vs generated from a node-based editor.

~~~
JacobiX
Nowadays it's more valuable to create custom nodes to enrich the node-based
editor library. Sometimes we write shaders from scratch if we need to
implement some original lighting, materials, etc

------
barbwire
Am I just out of touch with what the kids today are doing, or is this
formatting really as bonkers as it seems?

    
    
      int main
        ( int argc
        , char *argv[]
        ) {
      
        // ...
      
        LColor backgroundColor =
          LColor
            ( generateLightColorPart(207, 1)
            , generateLightColorPart(154, 1)
            , generateLightColorPart(108, 1)
            , 1
            );
      
        // ...
      
      }
    

I can (sort of) see that this makes it easy to comment out parameters - except
for the first one...

~~~
p1necone
I've noticed this formatting in sql scripts before too - the biggest benefit I
see is making source control diffs only show one line changed rather than two
when adding/removing lines.

~~~
edflsafoiewq
Is that a benefit?

~~~
PudgePacket
Yes. When you git blame a line you won't get a commit just adding/removing a
comma changing on that line.

~~~
newaccoutnas
Some languages/DSL's allow for a comma at the end of the list too, thereby
getting the same result but without the slightly strange comma at the start of
the line. Adding additional lines is simple then and doesn't cause the line
above to be pulled in to any git action

------
Scene_Cast2
A great way to play around with shaders (without booting up your editor,
compiling, etc) is [https://www.shadertoy.com](https://www.shadertoy.com) and
Shadron
([http://www.arteryengine.com/shadron/](http://www.arteryengine.com/shadron/))

------
goldenkey
This is really nice! The same techniques can be used in WebGL 2.0 which is at
ES 3.1 on canary versions of WebKit. I had a hell of a time using the
experimental compute shader API to implement a cellular automata framework [1]

The big issue with using WebGL at the current moment, to do large scale sims,
is that fragment shaders dont have an entire workload barrier capability - so
you cant do interdependent work.

Compute shaders have full workload execution and memory barriers.

Just something to be aware of if you are trying to jerry rig fragment shaders
to do more advanced things like HDR via min/max over all colors..there is no
way to these kind of aggregates without calling the shader twice,
unfortunately.

[1]
[https://github.com/churchofthought/Grautamaton](https://github.com/churchofthought/Grautamaton)

~~~
planteen
I have been wondering why WebGL isn't getting updated to ES 3.1 (and 3.2).
Good to see at least 3.1 parity is coming:
[https://www.khronos.org/registry/webgl/specs/latest/2.0-comp...](https://www.khronos.org/registry/webgl/specs/latest/2.0-compute/)

(I didn't know it was on the horizon until I saw your link). I wonder if
getting to ES 3.2 is on the horizon as well? That would bring geometry and
tessellation shader support.

~~~
Jasper_
I refer to the Mali Performance Guide for wisdom into Geometry Shaders:
[https://static.docs.arm.com/100019/0100/arm_mali_application...](https://static.docs.arm.com/100019/0100/arm_mali_application_developer_best_practices_developer_guide_100019_0100_00_en2.pdf#page=19)

> Using geometry shading will generally lead to worse performance, high memory
> bandwidth, and increased system power consumption. Assert if geometry
> shaders are used

Geometry shaders are not what you want. They should not have been included in
GL ES, and I will fight their inclusion into WebGL 2.1.

Tessellation shaders are better, but still kinda ultimately useless.

~~~
planteen
Yes, I agree the performance is an issue in most use cases, but wouldn't you
agree there is value in there being parity between WebGL and OpenGL ES? It's
valuable for those of us who work with Emscripten to cross-compile apps for
the web.

And there are things like line drawing algorithms that have uses for geometry
shaders: [https://github.com/paulhoux/Cinder-
Samples/tree/master/Geome...](https://github.com/paulhoux/Cinder-
Samples/tree/master/GeometryShader)

It's not like geometry shaders are specific to OpenGL ES. Desktop OpenGL has
them, as does DirectX and Vulkan.

------
csdreamer7
Cool! Is there a tutorial for cell shading? (The Borderlands 2 or Paper Mario
look.)

~~~
Jasper_
Those are two drastically different artstyles. Neither of them really are
engine shader stuff, just someone drawing good textures in Photoshop.

Paper Mario is all hand-authored baked vertex colors and very simple textures.
Artists spent a lot of time in Maya hand-tweaking each vertex individually,
e.g. see my viewer here
[https://noclip.website/#ttyd/jin_00](https://noclip.website/#ttyd/jin_00)

Borderlands has some basic engine technology with outlines -- running a basic
Sobel on the depth buffer to find depth discontinuities and drawing lines
there, but most interior lines are on the texture itself. Lighting is also
modified with a ramp -- the "raw" incoming radiance from lighting is thrown
into an artist-authored lookup table and tweaked before being thrown to the
shader. Normal maps are seldom used.

~~~
jayd16
>find depth discontinuities and drawing lines there, but most interior lines
are on the texture itself

I honestly thought a lot more was going on here but now that I look back at it
you seem to be correct. Impressive how simple it is.

------
soup10
Cool, looks like it briefly covers a lot of topics

