Deploy

app/page.tsx

@@ -304,6 +304,7 @@ export default function HomePage() {
         displacementMap: heightMap,
         map: heightMap,
         displacementScale: 2048,
+        depthWrite: true,
         // displacementBias: -128,
       });
 
@@ -535,7 +536,7 @@ uniform float tiling5;
             const geometry = new THREE.BoxGeometry(1, 1, 1);
             const material = new THREE.MeshStandardMaterial({
               map: setupColor(textureLoader.load(textureToUrl(surfaceTexture))),
-              transparent: true,
+              // transparent: true,
               opacity: 0.8,
             });
             const water = new THREE.Mesh(geometry, material);
@@ -569,9 +570,11 @@ uniform float tiling5;
     if (fogEnabled) {
       scene.fog = scene._fog ?? null;
       scene._fog = null;
+      scene.needsUpdate = true;
     } else {
       scene._fog = scene.fog;
       scene.fog = null;
+      scene.needsUpdate = true;
     }
   }, [fogEnabled]);
 

app/style.css

@@ -4,6 +4,12 @@ body {
   padding: 0;
 }
 
+html {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 100%;
+}
+
 #canvas {
   display: block;
   width: 100vw;
@@ -15,12 +21,13 @@ body {
   align-items: center;
   gap: 10px;
   position: fixed;
-  top: 20px;
-  left: 20px;
+  top: 0;
+  left: 0;
   background: rgba(0, 0, 0, 0.5);
   color: #fff;
-  padding: 4px 6px;
-  border-radius: 3px;
+  padding: 10px 12px 10px 8px;
+  border-radius: 0 0 4px 0;
+  font-size: 13px;
 }
 
 .CheckboxField {