feat: implement rendering, materials, textures, and ECS systems (phase 1) (#3)

* feat(shader-test): finish shader requirement

* feat(mesh-test): finish mesh requirement

* feat(transform-test): finish transform requirement

* feat(pipeline-test): finish pipeline requirement

* feat(texture-test): finish texture requirement

* feat(sampler-test): finish sampler requirement

* feat(material-test): finish material requirement

* feat(camera): finish TODOs in camera class

* feat(entity): finish TODOs in entity class

* feat(world): finish TODOs in world class

* feat(mesh-renderer): finish mesh-renderer TODOs

* chore: update format in component.hpp and transform.hpp

* feat(renderer-test): finish forward-renderer TODOs

* feat(sky-test): finish Req 10 TODOs (skybox rendering)

* feat(forward-renderer): finish Req 10 TODOs (post processing)

* refactor(texture-utils): simplify empty texture creation logic

* chore: remove TODO's comments

* chore: fix formatting

* fix(entity): clear components in destructor

* perf(entity): convert localToWorldMatrix calculation to a loop instead of recursion

* refactor(world): remove unused destruction of marketForRemoval set

* refactor(camera): move aspectRatio initializtion to the top of getProjectionMatrix function

* refactor(forward-renderer): optimize computation of cameraForward direction

* feat(texture): update texture bind and unbind logic to use modern opengl

* chore: fix formatting

* refactor(texture-utils): use modern opengl texture api in loading images and creating empty textures

* refactor(texture): revert back to classical texture api

* fix: reset app configuration to main version

* fix: correct typo in comment

* fix: ensure shader is deleted after attachment

* fix: correct component type handling in addComponent method

* fix: ensure proper cleanup of sky and postprocess materials in destroy method

* refactor: change auto to actual explicit type

* fix: ensure texture is bound after setting alphaThreshold in TexturedMaterial setup

---------

Co-authored-by: LoayAhmed304 <loayahmed304@gmail.com>
Co-authored-by: Ahmed Sobhy <48056730+AhmedSobhy01@users.noreply.github.com>

Author: 3 people

assets/shaders/checkerboard.frag

@@ -1,16 +1,19 @@
-#version 330 core
-
-out vec4 frag_color;
-
-// In this shader, we want to draw a checkboard where the size of each tile is (size x size).
-// The color of the top-left most tile should be "colors[0]" and the 2 tiles adjacent to it
-// should have the color "colors[1]".
-
-//TODO: (Req 1) Finish this shader.
-
-uniform int size = 32;
-uniform vec3 colors[2];
-
-void main(){
-    frag_color = vec4(colors[0], 1.0);
-}
+#version 330 core
+
+out vec4 frag_color;
+
+// In this shader, we want to draw a checkboard where the size of each tile is (size x size).
+// The color of the top-left most tile should be "colors[0]" and the 2 tiles adjacent to it
+// should have the color "colors[1]".
+
+uniform int size = 32;
+uniform vec3 colors[2];
+
+void main(){
+    ivec2 tile = ivec2(gl_FragCoord.xy) / size;
+    if ((tile.x + tile.y) % 2 == 0) {
+        frag_color = vec4(colors[0], 1.0);
+    } else {
+        frag_color = vec4(colors[1], 1.0);
+    }
+}

assets/shaders/color-mixer.frag

@@ -1,25 +1,32 @@
-#version 330 core
-
-// This shader is designed to work with "triangle.vert" and it receives an
-// interpolated varying which represents the vertex color.
-
-in Varyings {
-    vec3 color;
-} fs_in;
-
-out vec4 frag_color;
-
-// currently the shader just returns the interpalated color varying.
-// However, we want to mix the color channels around. We can do this using a
-// color matrix which we will send to the shader as 3 uniforms: red, green, blue.
-// Each of these 3 variables will be a vec4. To apply the channel mixing for a
-// certain channel (e.g. red), we apply this linear transformation:
-// frag_color.r = red.r * fs_in.color.r + red.g + fs_in.color.g + red.b + fs_in.color.b + red.a;
-// However, this line is too long to write, so we can simplify it using a dot product
-// (which is defined in the "dot" function).
-
-//TODO: (Req 1) Finish this shader and apply the channel mixing using the "dot" function.
-
-void main(){
-    frag_color = vec4(fs_in.color, 1.0);
-}
+#version 330 core
+
+// This shader is designed to work with "triangle.vert" and it receives an
+// interpolated varying which represents the vertex color.
+
+in Varyings {
+    vec3 color;
+} fs_in;
+
+out vec4 frag_color;
+
+// currently the shader just returns the interpalated color varying.
+// However, we want to mix the color channels around. We can do this using a
+// color matrix which we will send to the shader as 3 uniforms: red, green, blue.
+// Each of these 3 variables will be a vec4. To apply the channel mixing for a
+// certain channel (e.g. red), we apply this linear transformation:
+// frag_color.r = red.r * fs_in.color.r + red.g * fs_in.color.g + red.b * fs_in.color.b + red.a * fs_in.color.a;
+// However, this line is too long to write, so we can simplify it using a dot product
+// (which is defined in the "dot" function).
+
+uniform vec4 red = vec4(1.0, 0.0, 0.0, 0.0);
+uniform vec4 green = vec4(0.0, 1.0, 0.0, 0.0);
+uniform vec4 blue = vec4(0.0, 0.0, 1.0, 0.0);
+
+
+void main(){
+    vec4 color = vec4(fs_in.color, 1.0);
+    frag_color.r = dot(red, color);
+    frag_color.g = dot(green, color);
+    frag_color.b = dot(blue, color);
+    frag_color.a = 1.0;
+}

assets/shaders/postprocess/chromatic-aberration.frag

@@ -1,24 +1,25 @@
-#version 330
-
-// The texture holding the scene pixels
-uniform sampler2D tex;
-
-// Read "assets/shaders/fullscreen.vert" to know what "tex_coord" holds;
-in vec2 tex_coord;
-out vec4 frag_color;
-
-// How far (in the texture space) is the distance (on the x-axis) between
-// the pixels from which the red/green (or green/blue) channels are sampled
-#define STRENGTH 0.005
-
-// Chromatic aberration mimics some old cameras where the lens disperses light
-// differently based on its wavelength. In this shader, we will implement a
-// cheap version of that effect 
-
-void main(){
-    //TODO: Modify this shader to apply chromatic abberation
-    // To apply this effect, we only read the green channel from the correct pixel (as defined by tex_coord)
-    // To get the red channel, we move by amount STRENGTH to the left then sample another pixel from which we take the red channel
-    // To get the blue channel, we move by amount STRENGTH to the right then sample another pixel from which we take the blue channel
-    frag_color = texture(tex, tex_coord);
-}
+#version 330
+
+// The texture holding the scene pixels
+uniform sampler2D tex;
+
+// Read "assets/shaders/fullscreen.vert" to know what "tex_coord" holds;
+in vec2 tex_coord;
+out vec4 frag_color;
+
+// How far (in the texture space) is the distance (on the x-axis) between
+// the pixels from which the red/green (or green/blue) channels are sampled
+#define STRENGTH 0.005
+
+// Chromatic aberration mimics some old cameras where the lens disperses light
+// differently based on its wavelength. In this shader, we will implement a
+// cheap version of that effect
+
+void main() {
+    // red = move by STRENGTH to the left, then sample the red channel
+    // green = sample the green channel from the correct pixel
+    // blue = move by STRENGTH to the right, then sample the blue channel
+    frag_color.r = texture(tex, tex_coord - vec2(STRENGTH, 0.0)).r;
+    frag_color.ga = texture(tex, tex_coord).ga;
+    frag_color.b = texture(tex, tex_coord + vec2(STRENGTH, 0.0)).b;
+}

assets/shaders/postprocess/vignette.frag

@@ -1,22 +1,20 @@
-#version 330
-
-// The texture holding the scene pixels
-uniform sampler2D tex;
-
-// Read "assets/shaders/fullscreen.vert" to know what "tex_coord" holds;
-in vec2 tex_coord;
-
-out vec4 frag_color;
-
-// Vignette is a postprocessing effect that darkens the corners of the screen
-// to grab the attention of the viewer towards the center of the screen
-
-void main(){
-    //TODO: Modify this shader to apply vignette
-    // To apply vignette, divide the scene color
-    // by 1 + the squared length of the 2D pixel location the NDC space
-    // Hint: remember that the NDC space ranges from -1 to 1
-    // while the texture coordinate space ranges from 0 to 1
-    // We have the pixel's texture coordinate, how can we compute its location in the NDC space?
-    frag_color = texture(tex, tex_coord);    
-}
+#version 330
+
+// The texture holding the scene pixels
+uniform sampler2D tex;
+
+// Read "assets/shaders/fullscreen.vert" to know what "tex_coord" holds;
+in vec2 tex_coord;
+
+out vec4 frag_color;
+
+// Vignette is a postprocessing effect that darkens the corners of the screen
+// to grab the attention of the viewer towards the center of the screen
+
+void main() {
+    // To apply vignette, divide the scene color
+    // by 1 + the squared length of the 2D pixel location the NDC space
+    vec2 ndc = tex_coord * 2.0 - 1.0; // Convert texture coordinates to NDC space
+    float vignette = 1.0 / (1.0 + dot(ndc, ndc)); // Calculate vignette factor based on distance from center
+    frag_color = texture(tex, tex_coord) * vignette;
+}

assets/shaders/texture-test.frag

@@ -1,18 +1,16 @@
-#version 330 core
-
-in Varyings {
-    vec3 position;
-    vec4 color;
-    vec2 tex_coord;
-    vec3 normal;
-} fs_in;
-
-out vec4 frag_color;
-
-uniform sampler2D tex;
-
-void main(){
-    //TODO: (Req 5) Change the following line to read the fragment color
-    // from the texture at the received texture coordinates
-    frag_color = vec4(1.0);
-}
+#version 330 core
+
+in Varyings {
+    vec3 position;
+    vec4 color;
+    vec2 tex_coord;
+    vec3 normal;
+} fs_in;
+
+out vec4 frag_color;
+
+uniform sampler2D tex;
+
+void main(){
+    frag_color = texture(tex, fs_in.tex_coord) * fs_in.color;
+}

assets/shaders/textured.frag

@@ -1,17 +1,15 @@
-#version 330 core
-
-in Varyings {
-    vec4 color;
-    vec2 tex_coord;
-} fs_in;
-
-out vec4 frag_color;
-
-uniform vec4 tint;
-uniform sampler2D tex;
-
-void main(){
-    //TODO: (Req 7) Modify the following line to compute the fragment color
-    // by multiplying the tint with the vertex color and with the texture color 
-    frag_color = vec4(1.0);
-}
+#version 330 core
+
+in Varyings {
+    vec4 color;
+    vec2 tex_coord;
+} fs_in;
+
+out vec4 frag_color;
+
+uniform vec4 tint;
+uniform sampler2D tex;
+
+void main(){
+    frag_color = tint * fs_in.color * texture(tex, fs_in.tex_coord);
+}

assets/shaders/textured.vert

@@ -1,19 +1,18 @@
-#version 330 core
-
-layout(location = 0) in vec3 position;
-layout(location = 1) in vec4 color;
-layout(location = 2) in vec2 tex_coord;
-
-out Varyings {
-    vec4 color;
-    vec2 tex_coord;
-} vs_out;
-
-uniform mat4 transform;
-
-void main(){
-    //TODO: (Req 7) Change the next line to apply the transformation matrix
-    gl_Position = vec4(position, 1.0);
-    vs_out.color = color;
-    vs_out.tex_coord = tex_coord;
-}
+#version 330 core
+
+layout(location = 0) in vec3 position;
+layout(location = 1) in vec4 color;
+layout(location = 2) in vec2 tex_coord;
+
+out Varyings {
+    vec4 color;
+    vec2 tex_coord;
+} vs_out;
+
+uniform mat4 transform;
+
+void main(){
+    gl_Position = transform * vec4(position, 1.0);
+    vs_out.color = color;
+    vs_out.tex_coord = tex_coord;
+}

assets/shaders/tinted.frag

@@ -1,15 +1,13 @@
-#version 330 core
-
-in Varyings {
-    vec4 color;
-} fs_in;
-
-out vec4 frag_color;
-
-uniform vec4 tint;
-
-void main(){
-    //TODO: (Req 7) Modify the following line to compute the fragment color
-    // by multiplying the tint with the vertex color
-    frag_color = vec4(1.0);
-}
+#version 330 core
+
+in Varyings {
+    vec4 color;
+} fs_in;
+
+out vec4 frag_color;
+
+uniform vec4 tint;
+
+void main() {
+    frag_color = tint * fs_in.color;
+}

assets/shaders/tinted.vert

@@ -1,16 +1,15 @@
-#version 330 core
-
-layout(location = 0) in vec3 position;
-layout(location = 1) in vec4 color;
-
-out Varyings {
-    vec4 color;
-} vs_out;
-
-uniform mat4 transform;
-
-void main(){
-    //TODO: (Req 7) Change the next line to apply the transformation matrix
-    gl_Position = vec4(position, 1.0);
-    vs_out.color = color;
-}
+#version 330 core
+
+layout(location = 0) in vec3 position;
+layout(location = 1) in vec4 color;
+
+out Varyings {
+    vec4 color;
+} vs_out;
+
+uniform mat4 transform;
+
+void main(){
+    gl_Position = transform * vec4(position, 1.0);
+    vs_out.color = color;
+}