✨ Add day and night mode

src/Experience/Baked.js

@@ -32,9 +32,13 @@ export default class CoffeeSteam
 
         this.model.mesh = this.resources.items.roomModel.scene.children[0]
 
-        this.model.bakedTexture = this.resources.items.bakedTexture
-        this.model.bakedTexture.encoding = THREE.sRGBEncoding
-        this.model.bakedTexture.flipY = false
+        this.model.bakedDayTexture = this.resources.items.bakedDayTexture
+        this.model.bakedDayTexture.encoding = THREE.sRGBEncoding
+        this.model.bakedDayTexture.flipY = false
+
+        this.model.bakedNightTexture = this.resources.items.bakedNightTexture
+        this.model.bakedNightTexture.encoding = THREE.sRGBEncoding
+        this.model.bakedNightTexture.flipY = false
 
         this.model.lightMapTexture = this.resources.items.lightMapTexture
         this.model.lightMapTexture.flipY = false
@@ -47,9 +51,12 @@ export default class CoffeeSteam
         this.model.material = new THREE.ShaderMaterial({
             uniforms:
             {
-                uBakedTexture: { value: this.model.bakedTexture },
+                uBakedDayTexture: { value: this.model.bakedDayTexture },
+                uBakedNightTexture: { value: this.model.bakedNightTexture },
                 uLightMapTexture: { value: this.model.lightMapTexture },
 
+                uMix: { value: 1 },
+
                 uLightTvColor: { value: new THREE.Color(this.colors.tv) },
                 uLightTvStrength: { value: 1.47 },
 
@@ -76,6 +83,13 @@ export default class CoffeeSteam
         // Debug
         if(this.debug)
         {
+            this.debugFolder
+                .addInput(
+                    this.model.material.uniforms.uMix,
+                    'value',
+                    { label: 'uMix', min: 0, max: 1 }
+                )
+
             this.debugFolder
                 .addInput(
                     this.colors,

src/Experience/assets.js

@@ -21,7 +21,8 @@ export default [
 
             { name: 'macScreenModel', source: '/assets/macScreenModel.glb', type: 'model' },
 
-            { name: 'bakedTexture', source: '/assets/baked.jpg', type: 'texture' },
+            { name: 'bakedDayTexture', source: '/assets/bakedDay.jpg', type: 'texture' },
+            { name: 'bakedNightTexture', source: '/assets/bakedNight.jpg', type: 'texture' },
             { name: 'lightMapTexture', source: '/assets/lightMap.jpg', type: 'texture' },
             { name: 'roomModel', source: '/assets/roomModel.glb' },
         ]

src/Experience/shaders/baked/fragment.glsl

@@ -1,6 +1,9 @@
-uniform sampler2D uBakedTexture;
+uniform sampler2D uBakedDayTexture;
+uniform sampler2D uBakedNightTexture;
 uniform sampler2D uLightMapTexture;
 
+uniform float uMix;
+
 uniform vec3 uLightTvColor;
 uniform float uLightTvStrength;
 
@@ -19,7 +22,9 @@ varying vec2 vUv;
 
 void main()
 {
-    vec3 bakedColor = texture2D(uBakedTexture, vUv).rgb;
+    vec3 bakedDayColor = texture2D(uBakedDayTexture, vUv).rgb;
+    vec3 bakedNightColor = texture2D(uBakedNightTexture, vUv).rgb;
+    vec3 bakedColor = mix(bakedDayColor, bakedNightColor, uMix);
     vec3 lightMapColor = texture2D(uLightMapTexture, vUv).rgb;
 
     float lightTvStrength = lightMapColor.r * uLightTvStrength;