enable mouse control

TadaTeruki · Aug 25, 2024 · 616ab9e · 616ab9e
1 parent 7875344
commit 616ab9e
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 5 deletions.
diff --git a/graphics/src/camera/perspective.rs b/graphics/src/camera/perspective.rs
@@ -88,6 +88,16 @@ impl CameraPerspective {
             });
     }
 
+    pub fn scroll_to_left(&mut self) {
+        self.geom_goal.move_left(self.speed);
+        self.geom_goal.rotate_right(self.speed);
+    }
+
+    pub fn scroll_to_right(&mut self) {
+        self.geom_goal.move_right(self.speed);
+        self.geom_goal.rotate_left(self.speed);
+    }
+
     pub fn tween(&mut self, prop: f32) {
         self.geom_current.tween(&self.geom_goal, prop);
     }

diff --git a/graphics/src/state.rs b/graphics/src/state.rs
@@ -381,6 +381,16 @@ impl State {
         self.key_states.purge();
     }
 
+
+    #[wasm_bindgen]
+    pub fn scroll_to_right(&mut self) {
+        self.camera.perspective.scroll_to_right();
+    }
+
+    pub fn scroll_to_left(&mut self) {
+        self.camera.perspective.scroll_to_left();
+    }
+
     #[wasm_bindgen]
     pub async fn update(&mut self, _time: f32) {
         self.camera.perspective.process_events(&self.key_states);

diff --git a/view/index.html b/view/index.html
@@ -7,17 +7,134 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/peruicon/favicon-16x16.png">
     <link rel="manifest" href="/peruicon/site.webmanifest">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Try wgpu!</title>
+    <title>WebGPU Simple Earth Visualizer</title>
     <style>
+      @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+
       body {
         margin: 0;
         padding: 0;
         overflow: hidden;
+        font-family: "Poppins", sans-serif;
+        background-color: #aaa;
+      }
+
+      #headbox {
+        position: absolute;
+        top: 0;
+        width: 100vw;
+        z-index: 1;
+      }
+
+      .head {
+        display: flex;
+        justify-content: space-between;
+        color: white;
+        white-space: nowrap;
+        padding: 0.2em 2.0em;
+      }
+
+      #head-a {
+        background-color: #333;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+        font-size: 0.9em;
+      }
+
+      #head-b {
+        font-size: 0.7em;
+      }
+
+      #control {
+        width: fit-content;
+        margin: auto;
+        color: #ddd;
+      }
+
+      #credit {
+        color: #aaa;
+        width: 40%;
+        text-align: left;
+      }
+
+      #source {
+        color: #aaa;
+        width: 40%;
+        text-align: right;
+      }
+
+      a {
+        color: inherit;
+        text-decoration: underline #fff7;
+      }
+
+      .allow-box {
+        position: absolute;
+        color: white;
+        z-index: 1;
+        width: 2.5em;
+        height: 2.5em;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        border-radius: 50%;
+        border: 1px solid #bbb;
+        background-color: transparent;
+        transition: background-color 0.3s;
+      }
+
+      .allow-box:hover {
+        background-color: #555;
+      }
+
+      #allow-right {
+        top: 50%;
+        right: 1em;
+      }
+
+      #allow-left {
+        top: 50%;
+        left: 1em;
+      }
+
+      .allow-text {
+        margin: auto;
+      }
+
+      #loading {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        font-size: 1em;
+        z-index: 1;
       }
     </style>
   </head>
   <body>
     <canvas id="main-canvas"></canvas>
+    <div id="headbox">
+      <div class="head" id="head-a">
+        <div id="credit">
+          3D Earth model by <a href="https://science.nasa.gov/" target="_blank">NASA Science</a>
+        </div>
+        <div id="title">
+          WebGPU Simple Earth Visualizer
+        </div>
+        <div id="source">
+          <a href="https://github.com/TadaTeruki/webgpu-simple-earth" target="_blank">View Source</a>
+        </div>
+      </div>
+      <div class="head" id="head-b">
+        <div id="control">
+          [w,a,s,d] to move, [q,e] to zoom, [i,j,k,l] to rotate
+        </div>
+      </div>
+    </div>
+    <button class="allow-box" id="allow-right"> <div class="allow-text"> &gt; </div> </button>
+    <button class="allow-box" id="allow-left"> <div class="allow-text"> &lt; </div> </button>
+    <div id="loading"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/view/src/main.ts b/view/src/main.ts
@@ -18,13 +18,21 @@ async function main() {
 	await init();
 
 	// if the navigator does not have field 'gpu' then use WebGL
-	const useGlInstead = !navigator as any["gpu"];
-	if (useGlInstead) {
-		console.error("WebGPU not supported, falling back to WebGL");
+	const gpuNotSupported = !navigator.gpu;
+	if (gpuNotSupported) {
+		console.error("WebGPU not supported");
+		let loading = document.getElementById("loading");
+		if (loading) {
+			loading.innerHTML = `Sorry, your browser does not support WebGPU.<br>
+			See <a href='https://caniuse.com/webgpu' target="_blank">caniuse.com</a>
+			to check the current status of WebGPU support.
+			`;
+		}
+		return;
 	}
 
 	// create state
-	const state = await create_state(canvas, useGlInstead);
+	const state = await create_state(canvas, false);
 	if (!state) {
 		return;
 	}
@@ -56,13 +64,45 @@ async function main() {
 		state.leave();
 	});
 
+	const allowLeft = document.getElementById("allow-left");
+	const allowRight = document.getElementById("allow-right");
+
+	let isAllowLeft = false;
+	allowLeft?.addEventListener("mousedown", () => {
+		isAllowLeft = true;
+	});
+
+	allowLeft?.addEventListener("mouseup", () => {
+		isAllowLeft = false;
+	});
+	allowLeft?.addEventListener("mouseleave", () => {
+		isAllowLeft = false;
+	});
+
+	let isAllowRight = false;
+	allowRight?.addEventListener("mousedown", () => {
+		isAllowRight = true;
+	});
+	allowRight?.addEventListener("mouseup", () => {
+		isAllowRight = false;
+	});
+	allowRight?.addEventListener("mouseleave", () => {
+		isAllowRight = false;
+	});
+
 	// `update` is called 60 times per second
 	const updateInterval = 1000 / 60;
 	const initialTime = Date.now();
 
 	const updateloop = () => {
 		const currentTime = Date.now();
 		state.update((currentTime - initialTime) / updateInterval);
+		if (isAllowLeft) {
+			state.scroll_to_left();
+		}
+		if (isAllowRight) {
+			state.scroll_to_right();
+		}
 		const nextTime = Date.now();
 
 		const passedTime = nextTime - currentTime;