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 {

docs/_next/static/css/0c2a96677afca393.css

@@ -0,0 +1 @@
+body,html{margin:0;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;height:100vh}#controls{gap:10px;position:fixed;top:0;left:0;background:rgba(0,0,0,.5);color:#fff;padding:10px 12px 10px 8px;border-radius:0 0 4px 0;font-size:13px}#controls,.CheckboxField{display:flex;align-items:center}.CheckboxField{gap:6px}

docs/_next/static/css/757f9ce9d6e38534.css

@@ -1 +0,0 @@
-body,html{margin:0;padding:0}#canvas{display:block;width:100vw;height:100vh}#controls{gap:10px;position:fixed;top:20px;left:20px;background:rgba(0,0,0,.5);color:#fff;padding:4px 6px;border-radius:3px}#controls,.CheckboxField{display:flex;align-items:center}.CheckboxField{gap:6px}

docs/index.txt

@@ -2,15 +2,15 @@
 2:I[9766,[],""]
 3:I[8924,[],""]
 4:I[1959,[],"ClientPageRoot"]
-5:I[9547,["367","static/chunks/b536a0f1-1b5759e0c5317a23.js","831","static/chunks/bd904a5c-1f18d680c676f920.js","443","static/chunks/443-a374e0236a0806b0.js","974","static/chunks/app/page-efca826de6cacfcd.js"],"default"]
+5:I[9547,["367","static/chunks/b536a0f1-1b5759e0c5317a23.js","831","static/chunks/bd904a5c-1f18d680c676f920.js","443","static/chunks/443-a374e0236a0806b0.js","974","static/chunks/app/page-651e5957e6455538.js"],"default"]
 8:I[4431,[],"OutletBoundary"]
 a:I[5278,[],"AsyncMetadataOutlet"]
 c:I[4431,[],"ViewportBoundary"]
 e:I[4431,[],"MetadataBoundary"]
 f:"$Sreact.suspense"
 11:I[7150,[],""]
-:HL["/t2-mapper/_next/static/css/757f9ce9d6e38534.css","style"]
-0:{"P":null,"b":"EfkwRqWpNznnbfDYI13oB","p":"/t2-mapper","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/t2-mapper/_next/static/css/757f9ce9d6e38534.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"children":["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","$L4",null,{"Component":"$5","searchParams":{},"params":{},"promises":["$@6","$@7"]}],null,["$","$L8",null,{"children":["$L9",["$","$La",null,{"promise":"$@b"}]]}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,[["$","$Lc",null,{"children":"$Ld"}],null],["$","$Le",null,{"children":["$","div",null,{"hidden":true,"children":["$","$f",null,{"fallback":null,"children":"$L10"}]}]}]]}],false]],"m":"$undefined","G":["$11",[]],"s":false,"S":true}
+:HL["/t2-mapper/_next/static/css/0c2a96677afca393.css","style"]
+0:{"P":null,"b":"aG-J6V_gegR5Dznh_kBLT","p":"/t2-mapper","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/t2-mapper/_next/static/css/0c2a96677afca393.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"children":["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","$L4",null,{"Component":"$5","searchParams":{},"params":{},"promises":["$@6","$@7"]}],null,["$","$L8",null,{"children":["$L9",["$","$La",null,{"promise":"$@b"}]]}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,[["$","$Lc",null,{"children":"$Ld"}],null],["$","$Le",null,{"children":["$","div",null,{"hidden":true,"children":["$","$f",null,{"fallback":null,"children":"$L10"}]}]}]]}],false]],"m":"$undefined","G":["$11",[]],"s":false,"S":true}
 6:{}
 7:"$0:f:0:1:2:children:1:props:children:0:props:params"
 d:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]