refactor: use GLSL 3.0 for shaders

Author: KingDarBoja

src/app/assets/shaders/atmosphere/atmosphereFragment.glsl

@@ -1,12 +1,17 @@
 /* Variables shared from a vertex shader to a fragment shader. */
 varying vec3 vertexNormal;
 
+/* Declare an output variable for the fragment color.
+   This replaces the deprecated 'gl_FragColor' in GLSL ES 3.0.
+*/
+out vec4 FragColor;
+
 void main() {
   float intensity = pow(0.6 - dot(vertexNormal, vec3(0.0, 0.0, 1.0)), 2.2);
 
   /* Create a custom variable to configure our atmosphere color. Remember to
   divide by 255 as the rgb values must be normalized. */
   vec3 colorInnerGlow = vec3(255.0, 157.0, 111.0) / 255.0;  // Atomic Tangerine
 
-  gl_FragColor = vec4(colorInnerGlow, 1.0) * intensity;
+  FragColor = vec4(colorInnerGlow, 1.0) * intensity;
 }

src/app/assets/shaders/atmosphere/atmosphereVertex.glsl

@@ -1,5 +1,5 @@
 // Variables to pass to the fragment shader.
-varying vec3 vertexNormal;
+out vec3 vertexNormal;
 
 void main() {
   vertexNormal = normalize(normalMatrix * normal);

src/app/assets/shaders/mars/marsFragment.glsl

@@ -1,41 +1,40 @@
-//FRAGMENT SHADER
+// FRAGMENT SHADER
 uniform sampler2D diffuseTexture;
 uniform sampler2D normalTexture; // New uniform for the normal map
-uniform sampler2D bumpTexture;   // New uniform for the bump map
+uniform sampler2D bumpTexture; // New uniform for the bump map
 
 /* Variables shared from a vertex shader to a fragment shader. */
-varying vec2 vertexUV;
-varying vec3 vertexNormal;
+in vec2 vertexUV;
+in vec3 vertexNormal;
 
-/* The `gl_FragColor` has been deprecated in 450. So now we switch to an output
-variable called `diffuseColor`. However this approach does not work with ThreeJS
-by default. */
-
-// layout(location = 0) out vec4 diffuseColor;
+/* The `gl_FragColor` has been deprecated in GLSL 300 ES.
+   We now use an output variable, typically named `FragColor` or similar.
+   Three.js will automatically link this `out` variable to the framebuffer.
+*/
+out vec4 FragColor; // Declare an output variable for the fragment color
 
-/* 
-  - gl_FragColor: Reserved global built-in fragment variable that controls the color. It requires a vec4 type.
+/*
   - vec4: Reserved type that means a vector of four simple precision float numbers.
-  - texture2D: Retrieves texels from a texture.
+  - texture: Retrieves texels from a texture (replaces texture2D in GLSL3).
 */
 void main() {
   /* Sample the normal map. Normal maps typically store normals in tangent space. */
-  vec3 normalMapColor = texture2D(normalTexture, vertexUV).rgb;
+  vec3 normalMapColor = texture(normalTexture, vertexUV).rgb;
   // Convert normal from [0, 1] range to [-1, 1] range.
   vec3 normalFromMap = normalize(normalMapColor * 2.0 - 1.0);
 
   /* Sample the bump map (grayscale image, typically). */
-  float bumpValue = texture2D(bumpTexture, vertexUV).r; // Assuming grayscale, take red channel.
+  float bumpValue = texture(bumpTexture, vertexUV).r; // Assuming grayscale, take red channel.
 
   /* Apply bump mapping (simple perturbation of normal, or displacement).
-     For a true bump effect, you'd usually perturb the vertexNormal based on the
-     bump value and its derivatives (which is more complex). A simpler approach
-     for visual effect might be to just scale the normal based on bump. However,
-     for proper bump mapping, you typically need to compute derivatives or use a
-     more sophisticated approach. For this example, let's focus on combining the
-     normal map with the base normal.
+       For a true bump effect, you'd usually perturb the vertexNormal based on the
+       bump value and its derivatives (which is more complex). A simpler approach
+       for visual effect might be to just scale the normal based on bump. However,
+       for proper bump mapping, you typically need to compute derivatives or use a
+       more sophisticated approach. For this example, let's focus on combining the
+       normal map with the base normal.
   */
-  
+
   // For proper bump mapping, you'd typically calculate a modified normal based on bump.
   // This often involves calculating tangents and bitangents, and then perturbing the normal.
   // For a visual bump effect without true displacement, you can adjust the normal directly.
@@ -47,7 +46,7 @@ void main() {
   // A higher bumpValue (lighter areas in the bump map) will make the normalMap influence stronger,
   // and a lower bumpValue (darker areas) will make it weaker.
   // You can also add a small offset directly to the normal.
-  
+
   // Method 1: Scale normal map influence (subtle)
   // vec3 finalNormal = normalize(vertexNormal + normalFromMap * (0.8 + bumpValue * 0.2)); // Adjust factors as needed
 
@@ -57,7 +56,7 @@ void main() {
   // If it's negative (or darker areas), we pull it inwards.
   // For a simple grayscale bump map where 0.5 is flat, values above 0.5 are raised, below 0.5 are lowered.
   float bumpFactor = (bumpValue - 0.5) * 0.5; // Remap [0,1] to [-0.25, 0.25] for perturbation strength
-  
+
   // Combine vertexNormal and normalFromMap, then add bump influence
   vec3 intermediateNormal = normalize(vertexNormal + normalFromMap * 0.8); // Combine base and normal map
   vec3 finalNormal = normalize(intermediateNormal + intermediateNormal * bumpFactor);
@@ -71,12 +70,12 @@ void main() {
   // vec3 colorInnerGlow = vec3(226.0 / 255.0, 123.0 / 255.0, 88.0 / 255.0) * pow(intensity, 0.9); // Terra Cotta
 
   /* Base texture map as vec4. */
-  vec4 textureUV = texture2D(diffuseTexture, vertexUV);
+  vec4 textureUV = texture(diffuseTexture, vertexUV); // Use 'texture'
   vec4 onlyTextureUV = vec4(textureUV.xyz, 1.0);
   vec4 combinedUV = vec4(colorInnerGlow + textureUV.xyz, 1.0);
 
   /* Combine the base texture with the inner glow effect. */
-  // gl_FragColor = vec4(colorInnerGlow, 1.0);
-  // gl_FragColor = onlyTextureUV;
-  gl_FragColor = combinedUV;
+  // FragColor = vec4(colorInnerGlow, 1.0);
+  // FragColor = onlyTextureUV;
+  FragColor = combinedUV; // Assign to the output variable
 }

src/app/assets/shaders/mars/marsVertex.glsl

@@ -1,18 +1,18 @@
 // Variables to pass to the fragment shader.
-varying vec2 vertexUV;
-varying vec3 vertexNormal;
+out vec2 vertexUV;
+out vec3 vertexNormal;
 
-/* 
+/*
   - position, uv and normal are default vertex attributes provided by
-  BufferGeometry from threejs.
-
+  BufferGeometry from threejs. In GLSL3, 'attribute' is replaced by 'in'.
   - projectionMatrix, normalMatrix and modelViewMatrix are built-in uniforms
   provided by threejs.
 */
+
 void main() {
   vertexUV = uv;
   vertexNormal = normalize(normalMatrix * normal);
   /* Respect the coordinates given by converting from "world space" to "screen
   space". */
-  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 }

src/app/components/mars-scene/mars-atmosphere-mesh.component.ts

@@ -12,6 +12,7 @@ import atmosphereVertexShader from '../../assets/shaders/atmosphere/atmosphereVe
 import {
   AdditiveBlending,
   BackSide,
+  GLSL3,
   Mesh,
   ShaderMaterial,
   ShaderMaterialParameters,
@@ -49,6 +50,7 @@ export class MarsAtmosphereMeshComponent {
 
   /** */
   protected atmosphereShaderParameters: ShaderMaterialParameters = {
+    glslVersion: GLSL3,
     vertexShader: atmosphereVertexShader,
     fragmentShader: atmosphereFragmentShader,
     side: BackSide,

src/app/components/mars-scene/mars-mesh.component.ts

@@ -15,6 +15,7 @@ import {
 import { textureResource } from 'angular-three-soba/loaders';
 import {
   DoubleSide,
+  GLSL3,
   Mesh,
   MeshStandardMaterial,
   MeshStandardMaterialParameters,
@@ -133,6 +134,7 @@ export class MarsMeshComponent {
 
   /** */
   protected marsShaderParameters: ShaderMaterialParameters = {
+    glslVersion: GLSL3,
     vertexShader: marsVertexShader,
     fragmentShader: marsFragmentShader,
     side: DoubleSide,