examples/shaders: Add an example for deferred shading (#3496)

* add example for deferred rendering/shading

* adapt convention

---------

Co-authored-by: 27justin <me@justin.cx>

Author: 27justin

examples/Makefile

@@ -562,7 +562,8 @@ SHADERS = \
     shaders/shaders_mesh_instancing \
     shaders/shaders_multi_sample2d \
     shaders/shaders_write_depth \
-    shaders/shaders_hybrid_render
+    shaders/shaders_hybrid_render \
+    shaders/shaders_deferred_render
 
 AUDIO = \
     audio/audio_module_playing \

examples/Makefile.Web

@@ -468,7 +468,8 @@ SHADERS = \
     shaders/shaders_mesh_instancing \
     shaders/shaders_multi_sample2d \
     shaders/shaders_write_depth \
-    shaders/shaders_hybrid_render
+    shaders/shaders_hybrid_render \
+    shaders/shaders_deferred_render
 
 AUDIO = \
     audio/audio_module_playing \

examples/README.md

@@ -176,17 +176,18 @@ Examples using raylib shaders functionality, including shaders loading, paramete
 | 114 | [shaders_mesh_instancing](shaders/shaders_mesh_instancing.c) | <img src="shaders/shaders_mesh_instancing.png" alt="shaders_mesh_instancing" width="80"> | ⭐️⭐️⭐️⭐️ | 3.7 | **4.2** | [seanpringle](https://github.com/seanpringle) |
 | 115 | [shaders_multi_sample2d](shaders/shaders_multi_sample2d.c) | <img src="shaders/shaders_multi_sample2d.png" alt="shaders_multi_sample2d" width="80"> | ⭐️⭐️☆☆ | 3.5 | 3.5 | [Ray](https://github.com/raysan5) |
 | 116 | [shaders_spotlight](shaders/shaders_spotlight.c) | <img src="shaders/shaders_spotlight.png" alt="shaders_spotlight" width="80"> | ⭐️⭐️☆☆ | 2.5 | 3.7 | [Chris Camacho](https://github.com/codifies) |
+| 117 | [shaders_deferred_render](shaders/shaders_deferred_render.c) | <img src="shaders/shaders_deferred_render.png" alt="shaders_deferred_render" width="80"> | ⭐️⭐️⭐️⭐️ | 4.5 | 4.5 | [Justin Andreas Lacoste](https://github.com/27justin) |
 
 ### category: audio
 
 Examples using raylib audio functionality, including sound/music loading and playing. This functionality is provided by raylib [raudio](../src/raudio.c) module. Note this module can be used standalone independently of raylib, check [raudio_standalone](others/raudio_standalone.c) example.
 
 | ## | example  | image  | difficulty<br>level | version<br>created | last version<br>updated | original<br>developer |
 |----|----------|--------|:-------------------:|:------------------:|:------------------:|:----------|
-| 117 | [audio_module_playing](audio/audio_module_playing.c) | <img src="audio/audio_module_playing.png" alt="audio_module_playing" width="80"> | ⭐️☆☆☆ | 1.5 | 3.5 | [Ray](https://github.com/raysan5) |
-| 118 | [audio_music_stream](audio/audio_music_stream.c) | <img src="audio/audio_music_stream.png" alt="audio_music_stream" width="80"> | ⭐️☆☆☆ | 1.3 | **4.2** | [Ray](https://github.com/raysan5) |
-| 119 | [audio_raw_stream](audio/audio_raw_stream.c) | <img src="audio/audio_raw_stream.png" alt="audio_raw_stream" width="80"> | ⭐️⭐️⭐️☆ | 1.6 | **4.2** | [Ray](https://github.com/raysan5) |
-| 120 | [audio_sound_loading](audio/audio_sound_loading.c) | <img src="audio/audio_sound_loading.png" alt="audio_sound_loading" width="80"> | ⭐️☆☆☆ | 1.1 | 3.5 | [Ray](https://github.com/raysan5) |
+| 118 | [audio_module_playing](audio/audio_module_playing.c) | <img src="audio/audio_module_playing.png" alt="audio_module_playing" width="80"> | ⭐️☆☆☆ | 1.5 | 3.5 | [Ray](https://github.com/raysan5) |
+| 119 | [audio_music_stream](audio/audio_music_stream.c) | <img src="audio/audio_music_stream.png" alt="audio_music_stream" width="80"> | ⭐️☆☆☆ | 1.3 | **4.2** | [Ray](https://github.com/raysan5) |
+| 120 | [audio_raw_stream](audio/audio_raw_stream.c) | <img src="audio/audio_raw_stream.png" alt="audio_raw_stream" width="80"> | ⭐️⭐️⭐️☆ | 1.6 | **4.2** | [Ray](https://github.com/raysan5) |
+| 121 | [audio_sound_loading](audio/audio_sound_loading.c) | <img src="audio/audio_sound_loading.png" alt="audio_sound_loading" width="80"> | ⭐️☆☆☆ | 1.1 | 3.5 | [Ray](https://github.com/raysan5) |
 
 ### category: others
 

examples/shaders/resources/shaders/glsl330/deferred_shading.fs

@@ -0,0 +1,55 @@
+#version 330 core
+out vec4 finalColor;
+
+in vec2 texCoord;
+in vec2 texCoord2;
+
+uniform sampler2D gPosition;
+uniform sampler2D gNormal;
+uniform sampler2D gAlbedoSpec;
+
+struct Light {
+    int enabled;
+    int type; // Unused in this demo.
+    vec3 position;
+    vec3 target; // Unused in this demo.
+    vec4 color;
+};
+
+const int NR_LIGHTS = 4;
+uniform Light lights[NR_LIGHTS];
+uniform vec3 viewPosition;
+
+const float QUADRATIC = 0.032;
+const float LINEAR = 0.09;
+
+void main() {
+    vec3 fragPosition = texture(gPosition, texCoord).rgb;
+    vec3 normal = texture(gNormal, texCoord).rgb;
+    vec3 albedo = texture(gAlbedoSpec, texCoord).rgb;
+    float specular = texture(gAlbedoSpec, texCoord).a;
+
+    vec3 ambient = albedo * vec3(0.1f);
+    vec3 viewDirection = normalize(viewPosition - fragPosition);
+
+    for(int i = 0; i < NR_LIGHTS; ++i)
+    {
+        if(lights[i].enabled == 0) continue;
+        vec3 lightDirection = lights[i].position - fragPosition;
+        vec3 diffuse = max(dot(normal, lightDirection), 0.0) * albedo * lights[i].color.xyz;
+
+        vec3 halfwayDirection = normalize(lightDirection + viewDirection);
+        float spec = pow(max(dot(normal, halfwayDirection), 0.0), 32.0);
+        vec3 specular = specular * spec * lights[i].color.xyz;
+
+        // Attenuation
+        float distance = length(lights[i].position - fragPosition);
+        float attenuation = 1.0 / (1.0 + LINEAR * distance + QUADRATIC * distance * distance);
+        diffuse *= attenuation;
+        specular *= attenuation;
+        ambient += diffuse + specular;
+    }
+
+    finalColor = vec4(ambient, 1.0);
+}
+

examples/shaders/resources/shaders/glsl330/deferred_shading.vs

@@ -0,0 +1,11 @@
+#version 330 core
+
+layout (location = 0) in vec3 vertexPosition;
+layout (location = 1) in vec2 vertexTexCoord;
+
+out vec2 texCoord;
+
+void main() {
+    gl_Position = vec4(vertexPosition, 1.0);
+    texCoord = vertexTexCoord;
+}

examples/shaders/resources/shaders/glsl330/gbuffer.fs

@@ -0,0 +1,22 @@
+#version 330 core
+layout (location = 0) out vec3 gPosition;
+layout (location = 1) out vec3 gNormal;
+layout (location = 2) out vec4 gAlbedoSpec;
+
+in vec3 fragPosition;
+in vec2 fragTexCoord;
+in vec3 fragNormal;
+
+uniform sampler2D diffuseTexture;
+uniform sampler2D specularTexture;
+
+void main() {
+    // store the fragment position vector in the first gbuffer texture
+    gPosition = fragPosition;
+    // also store the per-fragment normals into the gbuffer
+    gNormal = normalize(fragNormal);
+    // and the diffuse per-fragment color
+    gAlbedoSpec.rgb = texture(diffuseTexture, fragTexCoord).rgb;
+    // store specular intensity in gAlbedoSpec's alpha component
+    gAlbedoSpec.a = texture(specularTexture, fragTexCoord).r;
+}

examples/shaders/resources/shaders/glsl330/gbuffer.vs

@@ -0,0 +1,24 @@
+#version 330 core
+layout (location = 0) in vec3 vertexPosition;
+layout (location = 1) in vec2 vertexTexCoord;
+layout (location = 2) in vec3 vertexNormal;
+
+out vec3 fragPosition;
+out vec2 fragTexCoord;
+out vec3 fragNormal;
+
+uniform mat4 matModel;
+uniform mat4 matView;
+uniform mat4 matProjection;
+
+void main()
+{
+    vec4 worldPos = matModel * vec4(vertexPosition, 1.0);
+    fragPosition = worldPos.xyz; 
+    fragTexCoord = vertexTexCoord;
+
+    mat3 normalMatrix = transpose(inverse(mat3(matModel)));
+    fragNormal = normalMatrix * vertexNormal;
+
+    gl_Position = matProjection * matView * worldPos;
+}