[example] cel-shading and outline using inverted hull (#5615)

* added cel-shading and outline using inverted hull example

* new screenshot

* added glsl100+120 compat

* updated view

* unnecessary spacing

Author: ggrizzly

examples/shaders/resources/shaders/glsl100/cel.fs

@@ -0,0 +1,58 @@
+#version 100
+
+precision mediump float;
+
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+varying vec3 fragNormal;
+
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+uniform vec3 viewPos;
+uniform float numBands;
+
+struct Light {
+    int enabled;
+    int type;
+    vec3 position;
+    vec3 target;
+    vec4 color;
+};
+uniform Light lights[4];
+
+void main()
+{
+    vec4 texColor = texture2D(texture0, fragTexCoord);
+    vec3 baseColor = texColor.rgb * fragColor.rgb * colDiffuse.rgb;
+    vec3 norm = normalize(fragNormal);
+
+    float lightAccum = 0.08; // ambient floor
+
+    for (int i = 0; i < 4; i++)
+    {
+        if (lights[i].enabled == 1)  // no continue in GLSL ES 1.0
+        {
+            vec3 lightDir;
+            if (lights[i].type == 0)
+            {
+                // Directional: direction is from position toward target.
+                lightDir = normalize(lights[i].position - lights[i].target);
+            }
+            else
+            {
+                // Point: direction from surface to light.
+                lightDir = normalize(lights[i].position - fragPosition);
+            }
+
+            float NdotL = max(dot(norm, lightDir), 0.0);
+
+            // Quantize NdotL into numBands discrete steps.
+            float quantized = min(floor(NdotL * numBands), numBands - 1.0) / (numBands - 1.0);
+            lightAccum += quantized * lights[i].color.r;
+        }
+    }
+
+    lightAccum = clamp(lightAccum, 0.0, 1.0);
+    gl_FragColor = vec4(baseColor * lightAccum, texColor.a * colDiffuse.a);
+}

examples/shaders/resources/shaders/glsl100/cel.vs

@@ -0,0 +1,47 @@
+#version 100
+
+attribute vec3 vertexPosition;
+attribute vec2 vertexTexCoord;
+attribute vec3 vertexNormal;
+attribute vec4 vertexColor;
+
+uniform mat4 mvp;
+uniform mat4 matModel;
+
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+varying vec3 fragNormal;
+
+mat3 inverse(mat3 m)
+{
+    float a00 = m[0][0], a01 = m[0][1], a02 = m[0][2];
+    float a10 = m[1][0], a11 = m[1][1], a12 = m[1][2];
+    float a20 = m[2][0], a21 = m[2][1], a22 = m[2][2];
+    float b01 =  a22*a11 - a12*a21;
+    float b11 = -a22*a10 + a12*a20;
+    float b21 =  a21*a10 - a11*a20;
+    float det = a00*b01 + a01*b11 + a02*b21;
+    return mat3(b01, (-a22*a01 + a02*a21), ( a12*a01 - a02*a11),
+                b11, ( a22*a00 - a02*a20), (-a12*a00 + a02*a10),
+                b21, (-a21*a00 + a01*a20), ( a11*a00 - a01*a10)) / det;
+}
+
+mat3 transpose(mat3 m)
+{
+    return mat3(m[0][0], m[1][0], m[2][0],
+                m[0][1], m[1][1], m[2][1],
+                m[0][2], m[1][2], m[2][2]);
+}
+
+void main()
+{
+    fragPosition = vec3(matModel * vec4(vertexPosition, 1.0));
+    fragTexCoord = vertexTexCoord;
+    fragColor = vertexColor;
+
+    mat3 normalMatrix = transpose(inverse(mat3(matModel)));
+    fragNormal = normalize(normalMatrix * vertexNormal);
+
+    gl_Position = mvp * vec4(vertexPosition, 1.0);
+}

examples/shaders/resources/shaders/glsl100/outline_hull.fs

@@ -0,0 +1,8 @@
+#version 100
+
+precision mediump float;
+
+void main()
+{
+    gl_FragColor = vec4(0.05, 0.05, 0.05, 1.0);
+}

examples/shaders/resources/shaders/glsl100/outline_hull.vs

@@ -0,0 +1,15 @@
+#version 100
+
+attribute vec3 vertexPosition;
+attribute vec3 vertexNormal;
+attribute vec2 vertexTexCoord;
+attribute vec4 vertexColor;
+
+uniform mat4 mvp;
+uniform float outlineThickness;
+
+void main()
+{
+    vec3 extruded = vertexPosition + vertexNormal * outlineThickness;
+    gl_Position = mvp * vec4(extruded, 1.0);
+}

examples/shaders/resources/shaders/glsl120/cel.fs

@@ -0,0 +1,56 @@
+#version 120
+
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+varying vec3 fragNormal;
+
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+uniform vec3 viewPos;
+uniform float numBands;
+
+struct Light {
+    int enabled;
+    int type;
+    vec3 position;
+    vec3 target;
+    vec4 color;
+};
+uniform Light lights[4];
+
+void main()
+{
+    vec4 texColor = texture2D(texture0, fragTexCoord);
+    vec3 baseColor = texColor.rgb * fragColor.rgb * colDiffuse.rgb;
+    vec3 norm = normalize(fragNormal);
+
+    float lightAccum = 0.08; // ambient floor
+
+    for (int i = 0; i < 4; i++)
+    {
+        if (lights[i].enabled == 1)
+        {
+            vec3 lightDir;
+            if (lights[i].type == 0)
+            {
+                // Directional: direction is from position toward target.
+                lightDir = normalize(lights[i].position - lights[i].target);
+            }
+            else
+            {
+                // Point: direction from surface to light.
+                lightDir = normalize(lights[i].position - fragPosition);
+            }
+
+            float NdotL = max(dot(norm, lightDir), 0.0);
+
+            // Quantize NdotL into numBands discrete steps.
+            float quantized = min(floor(NdotL * numBands), numBands - 1.0) / (numBands - 1.0);
+            lightAccum += quantized * lights[i].color.r;
+        }
+    }
+
+    lightAccum = clamp(lightAccum, 0.0, 1.0);
+    gl_FragColor = vec4(baseColor * lightAccum, texColor.a * colDiffuse.a);
+}

examples/shaders/resources/shaders/glsl120/cel.vs

@@ -0,0 +1,48 @@
+#version 120
+
+attribute vec3 vertexPosition;
+attribute vec2 vertexTexCoord;
+attribute vec3 vertexNormal;
+attribute vec4 vertexColor;
+
+uniform mat4 mvp;
+uniform mat4 matModel;
+
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+varying vec3 fragNormal;
+
+// inverse() and transpose() are not built-in until GLSL 1.40
+mat3 inverse(mat3 m)
+{
+    float a00 = m[0][0], a01 = m[0][1], a02 = m[0][2];
+    float a10 = m[1][0], a11 = m[1][1], a12 = m[1][2];
+    float a20 = m[2][0], a21 = m[2][1], a22 = m[2][2];
+    float b01 = a22*a11 - a12*a21;
+    float b11 = -a22*a10 + a12*a20;
+    float b21 = a21*a10 - a11*a20;
+    float det = a00*b01 + a01*b11 + a02*b21;
+    return mat3(b01, (-a22*a01 + a02*a21), ( a12*a01 - a02*a11),
+                b11, ( a22*a00 - a02*a20), (-a12*a00 + a02*a10),
+                b21, (-a21*a00 + a01*a20), ( a11*a00 - a01*a10)) / det;
+}
+
+mat3 transpose(mat3 m)
+{
+    return mat3(m[0][0], m[1][0], m[2][0],
+                m[0][1], m[1][1], m[2][1],
+                m[0][2], m[1][2], m[2][2]);
+}
+
+void main()
+{
+    fragPosition = vec3(matModel * vec4(vertexPosition, 1.0));
+    fragTexCoord = vertexTexCoord;
+    fragColor = vertexColor;
+
+    mat3 normalMatrix = transpose(inverse(mat3(matModel)));
+    fragNormal = normalize(normalMatrix * vertexNormal);
+
+    gl_Position = mvp * vec4(vertexPosition, 1.0);
+}

examples/shaders/resources/shaders/glsl120/outline_hull.fs

@@ -0,0 +1,6 @@
+#version 120
+
+void main()
+{
+    gl_FragColor = vec4(0.05, 0.05, 0.05, 1.0);
+}

examples/shaders/resources/shaders/glsl120/outline_hull.vs

@@ -0,0 +1,15 @@
+#version 120
+
+attribute vec3 vertexPosition;
+attribute vec3 vertexNormal;
+attribute vec2 vertexTexCoord;
+attribute vec4 vertexColor;
+
+uniform mat4 mvp;
+uniform float outlineThickness;
+
+void main()
+{
+    vec3 extruded = vertexPosition + vertexNormal * outlineThickness;
+    gl_Position = mvp * vec4(extruded, 1.0);
+}

examples/shaders/resources/shaders/glsl330/cel.fs

@@ -0,0 +1,60 @@
+#version 330
+
+in vec3 fragPosition;
+in vec2 fragTexCoord;
+in vec4 fragColor;
+in vec3 fragNormal;
+
+// Raylib standard uniforms
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// View position for future specular / fresnel use.
+uniform vec3 viewPos;
+
+// Number of discrete toon bands (2 = hard binary, 10 = default, 20 = near-smooth).
+uniform float numBands;
+
+// rlights.h compatible light block.
+struct Light {
+    int  enabled;
+    int  type; // 0 = directional, 1 = point
+    vec3 position;
+    vec3 target;
+    vec4 color;
+    float attenuation;
+};
+uniform Light lights[4];
+
+out vec4 finalColor;
+
+void main() {
+    vec4 texColor = texture(texture0, fragTexCoord);
+    vec3 baseColor = texColor.rgb * fragColor.rgb * colDiffuse.rgb;
+    vec3 norm = normalize(fragNormal);
+
+    float lightAccum = 0.08; // ambient floor
+
+    for (int i = 0; i < 4; i++) {
+        if (lights[i].enabled == 0) continue;
+
+        vec3 lightDir;
+        if (lights[i].type == 0) {
+            // Directional: direction is from position toward target.
+            lightDir = normalize(lights[i].position - lights[i].target);
+        } else {
+            // Point: direction from surface to light.
+            lightDir = normalize(lights[i].position - fragPosition);
+        }
+
+        float NdotL = max(dot(norm, lightDir), 0.0);
+
+        // Quantize NdotL into numBands discrete steps.
+        // min() guards against NdotL == 1.0 producing an out-of-range index.
+        float quantized = min(floor(NdotL * numBands), numBands - 1.0) / (numBands - 1.0);
+        lightAccum += quantized * lights[i].color.r;
+    }
+
+    lightAccum = clamp(lightAccum, 0.0, 1.0);
+    finalColor = vec4(baseColor * lightAccum, texColor.a * colDiffuse.a);
+}

examples/shaders/resources/shaders/glsl330/cel.vs

@@ -0,0 +1,25 @@
+#version 330
+
+// Raylib standard attributes
+in vec3 vertexPosition;
+in vec2 vertexTexCoord;
+in vec3 vertexNormal;
+in vec4 vertexColor;
+
+// Raylib standard uniforms
+uniform mat4 mvp;
+uniform mat4 matModel;
+uniform mat4 matNormal;
+
+out vec3 fragPosition;
+out vec2 fragTexCoord;
+out vec4 fragColor;
+out vec3 fragNormal;
+
+void main() {
+    fragPosition = vec3(matModel * vec4(vertexPosition, 1.0));
+    fragTexCoord = vertexTexCoord;
+    fragColor = vertexColor;
+    fragNormal = normalize(vec3(matNormal * vec4(vertexNormal, 0.0)));
+    gl_Position = mvp * vec4(vertexPosition, 1.0);
+}