feat: sky

Author: shaoruu

client/App.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
   import QS from 'query-string';
 
-  import { WORLD_LIST } from '../shared';
-
   import Button from './components/button.svelte';
   import { Engine } from './core';
   import { Helper } from './utils';
@@ -34,6 +32,7 @@
       return await response.json();
     })();
   }
+
 </script>
 
 <main>
@@ -42,7 +41,7 @@
       <img src="https://i.imgur.com/ro6oLCL.png" id="crosshair" alt="+" />
       {#if !locked}
         <div id="pause-menu">
-          <div on:click={() => engine.lock()} />
+          <div />
           <h2>Game menu</h2>
           <Button on:click={() => engine.lock()}>Back to Game</Button>
           <Button on:click={() => (window.location.href = window.location.href.split('?')[0])}>Quit to Title</Button>
@@ -195,4 +194,5 @@
   .selected {
     border-color: rgba(173, 173, 173, 0.74) !important;
   }
+
 </style>

client/core/debug.ts

@@ -7,11 +7,19 @@ import { Helper } from '../utils';
 
 import { Engine } from '.';
 
+type FormatterType = (input: any) => string;
+
 class Debug {
   public gui: dat.GUI;
   public stats: Stats;
   public dataWrapper: HTMLDivElement;
-  public dataEntires: { ele: HTMLParagraphElement; obj: any; attribute: string; name: string }[] = [];
+  public dataEntries: {
+    ele: HTMLParagraphElement;
+    obj: any;
+    attribute: string;
+    name: string;
+    formatter: FormatterType;
+  }[] = [];
   public chunkHighlight: Mesh;
   public atlasTest: Mesh;
 
@@ -131,23 +139,14 @@ class Debug {
       })
       .name('Render radius');
     worldFolder.add(world.options, 'requestRadius', 1, 20, 1).name('Request radius');
-    worldFolder.add(world.uSunlightIntensity, 'value', 0, 1, 0.01).name('Sunlight intensity');
-
-    worldFolder
-      .add(world.sky.options, 'domeOffset', 200, 2000, 10)
-      .onChange((value) => (world.sky.shadingMaterial.uniforms.offset.value = value))
-      .name('Done offset');
-    worldFolder.add(world.sky.boxMesh.rotation, 'x', 0, Math.PI * 2, 0.01).name('Sky box rotation');
-    worldFolder
-      .addColor(world.sky.options, 'topColor')
-      .onChange((value) => world.sky.setTopColor(value))
-      .name('Top color');
     worldFolder
-      .addColor(world.sky.options, 'bottomColor')
-      .onChange((value) => world.sky.setBottomColor(value))
-      .name('Bottom color');
+      .add(world.sky.tracker, 'time', 0, 2400, 10)
+      .onChange((value) => world.sky.setTime(value))
+      .name('Time value');
+    worldFolder.add(world.sky.tracker, 'speed', 0, 20, 0.01).name('Time speed');
 
     this.registerDisplay('chunk', world, 'camChunkPosStr');
+    this.registerDisplay('time', world.sky.tracker, 'time', (num) => num.toFixed(0));
 
     // PLAYER
     const playerFolder = this.gui.addFolder('Player');
@@ -192,9 +191,9 @@ class Debug {
   };
 
   tick = () => {
-    for (const { ele, name, attribute, obj } of this.dataEntires) {
+    for (const { ele, name, attribute, obj, formatter } of this.dataEntries) {
       const newValue = obj[attribute];
-      ele.innerHTML = `${name}: ${newValue}`;
+      ele.innerHTML = `${name}: ${formatter(newValue)}`;
     }
 
     const { camChunkPosStr } = this.engine.world;
@@ -207,15 +206,16 @@ class Debug {
     );
   };
 
-  registerDisplay(name: string, object: any, attribute: string) {
+  registerDisplay(name: string, object: any, attribute: string, formatter: FormatterType = (str) => str) {
     const wrapper = this.makeDataEntry();
     const newEntry = {
       ele: wrapper,
       obj: object,
       name,
+      formatter,
       attribute,
     };
-    this.dataEntires.push(newEntry);
+    this.dataEntries.push(newEntry);
     this.dataWrapper.appendChild(wrapper);
   }
 }

client/core/rendering.ts

@@ -32,6 +32,8 @@ class Rendering extends EventEmitter {
   public composer: EffectComposer;
   public fxaa: ShaderPass;
   public noColorMateria;
+  public fogNearColor: Color;
+  public fogFarColor: Color;
   public fogUniforms: { [key: string]: { value: number | Color } };
 
   constructor(public engine: Engine, public options: RenderingOptionsType) {
@@ -71,9 +73,11 @@ class Rendering extends EventEmitter {
 
     // fog
     const { renderRadius, chunkSize, dimension } = this.engine.config.world;
+    this.fogNearColor = new Color(fogNearColor);
+    this.fogFarColor = new Color(fogColor);
     this.fogUniforms = {
-      uFogColor: { value: new Color(fogColor) },
-      uFogNearColor: { value: new Color(fogNearColor) },
+      uFogColor: { value: this.fogNearColor },
+      uFogNearColor: { value: this.fogFarColor },
       uFogNear: { value: renderRadius * 0.5 * chunkSize * dimension },
       uFogFar: { value: renderRadius * chunkSize * dimension },
     };

client/core/world.ts

@@ -41,6 +41,10 @@ class World extends EventEmitter {
 
     this.sky = new Sky(engine.rendering);
     this.clouds = new Clouds(engine.rendering);
+
+    engine.on('ready', () => {
+      this.setRenderRadius(Math.max(window.navigator.hardwareConcurrency, 6));
+    });
   }
 
   tick() {
@@ -323,7 +327,7 @@ class World extends EventEmitter {
 
   private animateSky() {
     const { delta } = this.engine.clock;
-    this.sky.tick(delta);
+    this.sky.tick();
     this.clouds.tick(delta);
   }
 }

client/libs/clouds.ts

@@ -50,7 +50,7 @@ const defaultCloudsOptions: CloudsOptionsType = {
   lerpFactor: 0.6,
   fogFarFactor: 3,
   color: '#eee',
-  alpha: 0.6,
+  alpha: 0.8,
 };
 
 class Clouds {
@@ -110,12 +110,13 @@ class Clouds {
   tick = (delta: number) => {
     if (!this.initialized) return;
 
-    const { speed, lerpFactor, width, count, dimensions } = this.options;
+    const { speed } = this.rendering.engine.world.sky.tracker;
+    const { lerpFactor, width, count, dimensions } = this.options;
 
     this.meshes.forEach((mesh) => {
       const newPosition = mesh.position.clone();
 
-      newPosition.z -= speed * delta;
+      newPosition.z -= speed * delta * 400;
       mesh.position.lerp(newPosition, lerpFactor);
 
       if (mesh.position.z <= -(width * count * dimensions[2]) / 2) {

client/libs/shaders/clouds/fragment.glsl

@@ -27,5 +27,4 @@ void main() {
   float depth = gl_FragCoord.z / gl_FragCoord.w;
   float fogFactor = smoothstep(uFogNear, uFogFar, depth);
   gl_FragColor.rgb = mix(gl_FragColor.rgb, mix(uFogNearColor, uFogColor, fogFactor), fogFactor);
-
 }