feat: added deimos and several tweaks of lighting stuff

Author: KingDarBoja

src/app/assets/glb/NASA_Deimos.glb

@@ -1,9 +1,8 @@
 /* Variables shared from a vertex shader to a fragment shader. */
-varying vec3 vertexNormal;
+in vec3 vertexNormal;
 
-/* Declare an output variable for the fragment color.
-   This replaces the deprecated 'gl_FragColor' in GLSL ES 3.0.
-*/
+/* Declare an output variable for the fragment color. This replaces the
+deprecated 'gl_FragColor' in GLSL ES 3.0. */
 out vec4 FragColor;
 
 void main() {

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

@@ -11,7 +11,7 @@ import { MarsScene } from '../mars-scene/mars-scene.component';
   selector: 'sms-landing-location',
   template: `
     <section class="flex flex-col gap-8">
-      <!-- <div id="canvas-container">
+      <div id="canvas-container">
         <ngt-canvas
           [camera]="canvasCamera"
           [lookAt]="canvasLookAt"
@@ -20,7 +20,7 @@ import { MarsScene } from '../mars-scene/mars-scene.component';
         >
           <sms-mars-scene *canvasContent />
         </ngt-canvas>
-      </div> -->
+      </div>
 
       <sms-landing-location-table />
     </section>
@@ -36,7 +36,7 @@ import { MarsScene } from '../mars-scene/mars-scene.component';
 })
 export class LandingLocationComponent {
   protected canvasCamera: NgtCameraParameters = {
-    position: [0, 0, 20],
+    position: [0, 0, 16],
   };
   protected canvasLookAt: NgtVector3 = [0, 0, 0];
 }

src/app/components/landing-location/landing-location.component.ts

@@ -45,7 +45,7 @@ export class MarsAtmosphereMeshComponent {
    * heightSegments].
    */
   protected geometryArgs: ConstructorParameters<typeof SphereGeometry> = [
-    8, 64, 64,
+    6.8, 64, 64,
   ];
 
   /** */
@@ -55,6 +55,7 @@ export class MarsAtmosphereMeshComponent {
     fragmentShader: atmosphereFragmentShader,
     side: BackSide,
     blending: AdditiveBlending,
+    transparent: true,
   };
 
   /** Obtain the mesh reference with `viewChild` signal. */
@@ -74,6 +75,6 @@ export class MarsAtmosphereMeshComponent {
    */
   private animate() {
     const atmosphereMeshEl = this.meshRef().nativeElement;
-    atmosphereMeshEl.scale.set(1.1, 1.1, 1.1);
+    atmosphereMeshEl.scale.set(1.25, 1.25, 1.25);
   }
 }

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

@@ -14,6 +14,7 @@ import {
 } from 'angular-three';
 import { textureResource } from 'angular-three-soba/loaders';
 import {
+  BackSide,
   DoubleSide,
   GLSL3,
   Mesh,
@@ -37,7 +38,7 @@ extend({ Mesh, SphereGeometry, MeshStandardMaterial, ShaderMaterial });
   standalone: true,
   template: `
     <!-- This mesh allows shadows from the directional light. -->
-    <ngt-mesh [position]="[0, 0, 0]" castShadow>
+    <ngt-mesh [position]="[0, 0, 0]" receiveShadow>
       <ngt-sphere-geometry *args="overlayGeoArgs" />
       <ngt-mesh-standard-material [parameters]="overlayMatParams" />
     </ngt-mesh>
@@ -51,9 +52,9 @@ extend({ Mesh, SphereGeometry, MeshStandardMaterial, ShaderMaterial });
       @let _textures = marsTextures.value();
       <!-- @let map = _textures?.map;
       @let normalMap = _textures?.normalMap;
-      @let bumpMap = _textures?.bumpMap; -->
+      @let bumpMap = _textures?.bumpMap;
 
-      <!-- <ngt-mesh-standard-material
+      <ngt-mesh-standard-material
         [map]="map"
         [normalMap]="normalMap"
         [bumpMap]="bumpMap"
@@ -84,7 +85,7 @@ export class MarsMeshComponent {
 
   /** Height and width segments. */
   private readonly sphereSegments = 64;
-  private readonly sphereRadius = 8;
+  private readonly sphereRadius = 6.8;
 
   /**
    * Geometry arguments, in this case: [radius, widthSegments,
@@ -101,7 +102,7 @@ export class MarsMeshComponent {
    * radius to overlay.
    */
   protected overlayGeoArgs: ConstructorParameters<typeof SphereGeometry> = [
-    this.sphereRadius + 0.05,
+    this.sphereRadius + 0.05, // Offset it so it doesn't overlap the below mesh.
     this.sphereSegments,
     this.sphereSegments,
   ];
@@ -132,11 +133,20 @@ export class MarsMeshComponent {
     normalMap: './textures/mars_4k_normal.jpg',
   }));
 
+  /** Used at the commented code to check the differences. */
+  protected meshMatParams: MeshStandardMaterialParameters = {
+    color: 0xbd5417,
+    wireframe: false,
+    opacity: 1,
+    transparent: false,
+  }
+
   /** */
   protected marsShaderParameters: ShaderMaterialParameters = {
     glslVersion: GLSL3,
     vertexShader: marsVertexShader,
     fragmentShader: marsFragmentShader,
+    shadowSide: BackSide,
     side: DoubleSide,
     uniforms: {
       /**
@@ -172,7 +182,9 @@ export class MarsMeshComponent {
    */
   private animate() {
     const sphereMeshEl = this.meshRef().nativeElement;
-    sphereMeshEl.rotateY(0.0002);
+    /** Uncomment to enable planet rotation on its axis. */
+    // sphereMeshEl.rotateY(0.0004);
+    sphereMeshEl.rotateY(0.00007) // True rate of rotation in radians per sec
   }
 
   /**