cast

2023-06-15 23:17:13 +08:00
parent f8608bd8a5
commit 675008dcc5
4 changed files with 116 additions and 110 deletions
--- a/ismism.ts/ui/cast/bind.ts
+++ b/ismism.ts/ui/cast/bind.ts
@ -1,6 +1,7 @@
 // deno-lint-ignore-file no-window-prefix
 import type { Pas } from "../../src/pra/pos.ts"
 import { pos } from "../bind/fetch.ts"
+import { mesh, sw } from "./mesh.ts"
 import { init, render } from "./septem.ts"

 const pas = await pos<Pas | null>("pas", {})
@ -35,83 +36,7 @@ document.ondrop = e => {
 file.oninput = () => file_r(file.files)
 img.onload = () => tex = img

-const sw = 0.5
-const sh = 1.0
-const data = {
-	vert: new Float32Array([
-		-sw, -sh, -0.01,
-		sw, -sh, -0.01,
-		sw, sh, -0.01,
-		-sw, sh, -0.01,
-
-		-sw, -sh, 0.01,
-		sw, -sh, 0.01,
-		sw, sh, 0.01,
-		-sw, sh, 0.01,
-
-		-sw, -sh, -0.01,
-		sw, -sh, -0.01,
-		sw, sh, -0.01,
-		-sw, sh, -0.01,
-
-		-sw, -sh, 0.01,
-		sw, -sh, 0.01,
-		sw, sh, 0.01,
-		-sw, sh, 0.01,
-	]),
-	tex: new Float32Array([
-		1.0, 0.0,
-		0.0, 0.0,
-		0.0, 1.0,
-		1.0, 1.0,
-
-		0.0, 0.0,
-		1.0, 0.0,
-		1.0, 1.0,
-		0.0, 1.0,
-
-		0.0, 0.0,
-		0.0, 0.0,
-		0.0, 0.0,
-		0.0, 0.0,
-
-		0.0, 0.0,
-		0.0, 0.0,
-		0.0, 0.0,
-		0.0, 0.0,
-	]),
-	norm: new Float32Array([
-		0, 0, -1,
-		0, 0, -1,
-		0, 0, -1,
-		0, 0, -1,
-
-		0, 0, 1,
-		0, 0, 1,
-		0, 0, 1,
-		0, 0, 1,
-
-		-1, 0, 0,
-		1, 0, 0,
-		1, 0, 0,
-		-1, 0, 0,
-
-		-1, 0, 0,
-		1, 0, 0,
-		1, 0, 0,
-		-1, 0, 0,
-	]),
-	idx: new Uint8Array([
-		0, 3, 1, 1, 3, 2,
-		4, 5, 7, 7, 5, 6,
-		...[0, 1, 4, 4, 1, 5,
-			5, 1, 6, 6, 1, 2,
-			2, 3, 6, 6, 3, 7,
-			7, 3, 4, 4, 3, 0].map(n => n + 8)
-	])
-}
-
-init(trg, data)
+init(trg, mesh)

 let tex: TexImageSource = blk
 let tframe = 0
@ -122,9 +47,10 @@ let dp = 0
 let dz = 0
 let z = 0
 let orient: [number, number, number] | null = null
+let hint = ""
 const dts = new Array<number>(30).fill(0)
-
 let pscale = 1.0
+
 function resize(
 ) {
 	pscale = Math.max(Math.floor(window.devicePixelRatio), 1)
@ -134,34 +60,38 @@ function resize(
 resize()
 window.addEventListener("resize", resize)

-document.body.addEventListener("keypress", e => {
-	if (e.key == " ") {
-		pause = !pause
-		dp = dz = z = 0
-		e.preventDefault()
+if (dbg) {
+	document.body.addEventListener("keypress", e => {
+		if (e.key == " ") {
+			pause = !pause
+			dp = dz = z = 0
+			e.preventDefault()
+		}
+	})
+	document.body.addEventListener("keydown", e => {
+		if (e.key == "a") dp = -1
+		else if (e.key == "d") dp = 1
+		else if (e.key == "w") dz = 1
+		else if (e.key == "s") dz = -1
+	})
+	document.body.addEventListener("keyup", e => {
+		if (e.key == "a" || e.key == "d") dp = 0
+		else if (e.key == "w" || e.key == "s") dz = 0
+	})
+}
+
+document.addEventListener("click", async () => { // deno-lint-ignore no-explicit-any
+	const doe = DeviceOrientationEvent as any
+	if (orient == null && doe.requestPermission) {
+		const stat = await (doe.requestPermission() as Promise<"granted" | "denied">)
+		if (stat !== "granted") orient = null
 	}
 })
-document.body.addEventListener("keydown", e => {
-	if (e.key == "a") dp = -1
-	else if (e.key == "d") dp = 1
-	else if (e.key == "w") dz = 1
-	else if (e.key == "s") dz = -1
-})
-document.body.addEventListener("keyup", e => {
-	if (e.key == "a" || e.key == "d") dp = 0
-	else if (e.key == "w" || e.key == "s") dz = 0
-})
-resize()
-
-// deno-lint-ignore no-explicit-any
-const doe = DeviceOrientationEvent as any
-document.addEventListener("click", () => {
-	if (orient == null && doe.requestPermission) doe.requestPermission()
-	pause = !pause
-})
 window.addEventListener("deviceorientation", e => {
-	if (e.alpha != null && e.beta != null && e.gamma != null)
+	if (e.alpha != null && e.beta != null && e.gamma != null) {
 		orient = [e.alpha, e.beta, e.gamma]
+		hint = ""
+	} else hint = "\n\n点击屏幕以查看卡片"
 })

 function frame(
@ -181,11 +111,12 @@ function frame(
 			+ `t: ${(t / 1000).toFixed(1)}\n`
 			+ `orient: ${orient?.map(v => v.toFixed(0))}\n`) : "")
 		+ (pas?.nam ?? "")
+		+ hint
 	let x = 0.5 * sw * Math.sin(t / 1500)
 	let zoom = 5 * Math.sin(t / 7000)
 	let ry = t / 4000
 	if (orient) {
-		x = 1.5 * sw * Math.sin(orient[0] / 180 * Math.PI)
+		x = sw * Math.sin(orient[0] / 180 * Math.PI)
 		zoom = 5 * Math.sin((45 - orient[1]) / 180 * Math.PI)
 		ry = -orient[2] / 180 * Math.PI
 	}
--- a/ismism.ts/ui/cast/cast.html
+++ b/ismism.ts/ui/cast/cast.html
@ -67,7 +67,7 @@

 <body>
 	<input type="file" id="file" class="none">
-	<img id="img" class="none" src="//s1.ax1x.com/2023/06/15/pCu25xf.png">
+	<img id="img" class="none">
 	<code id="txt"></code>
 	<canvas id="trg" height="1080" style="width: 100%"></canvas>
 </body>
--- a/ismism.ts/ui/cast/mesh.ts
+++ b/ismism.ts/ui/cast/mesh.ts
@ -0,0 +1,75 @@
+export const sw = 0.5
+export const sh = 1.0
+export const mesh = {
+	vert: new Float32Array([
+		-sw, -sh, -0.01,
+		sw, -sh, -0.01,
+		sw, sh, -0.01,
+		-sw, sh, -0.01,
+
+		-sw, -sh, 0.01,
+		sw, -sh, 0.01,
+		sw, sh, 0.01,
+		-sw, sh, 0.01,
+
+		-sw, -sh, -0.01,
+		sw, -sh, -0.01,
+		sw, sh, -0.01,
+		-sw, sh, -0.01,
+
+		-sw, -sh, 0.01,
+		sw, -sh, 0.01,
+		sw, sh, 0.01,
+		-sw, sh, 0.01,
+	]),
+	tex: new Float32Array([
+		1.0, 0.0,
+		0.0, 0.0,
+		0.0, 1.0,
+		1.0, 1.0,
+
+		0.0, 0.0,
+		1.0, 0.0,
+		1.0, 1.0,
+		0.0, 1.0,
+
+		0.0, 0.0,
+		0.0, 0.0,
+		0.0, 0.0,
+		0.0, 0.0,
+
+		0.0, 0.0,
+		0.0, 0.0,
+		0.0, 0.0,
+		0.0, 0.0,
+	]),
+	norm: new Float32Array([
+		0, 0, -1,
+		0, 0, -1,
+		0, 0, -1,
+		0, 0, -1,
+
+		0, 0, 1,
+		0, 0, 1,
+		0, 0, 1,
+		0, 0, 1,
+
+		-1, 0, 0,
+		1, 0, 0,
+		1, 0, 0,
+		-1, 0, 0,
+
+		-1, 0, 0,
+		1, 0, 0,
+		1, 0, 0,
+		-1, 0, 0,
+	]),
+	idx: new Uint8Array([
+		0, 3, 1, 1, 3, 2,
+		4, 5, 7, 7, 5, 6,
+		...[0, 1, 4, 4, 1, 5,
+			5, 1, 6, 6, 1, 2,
+			2, 3, 6, 6, 3, 7,
+			7, 3, 4, 4, 3, 0].map(n => n + 8)
+	])
+}
--- a/ismism.ts/ui/cast/septem.ts
+++ b/ismism.ts/ui/cast/septem.ts
@ -263,17 +263,17 @@ function proj_to(

 export function init(
 	canvas: HTMLCanvasElement,
-	data: { vert: Float32Array, tex: Float32Array, norm: Float32Array, idx: Uint8Array }
+	mesh: { vert: Float32Array, tex: Float32Array, norm: Float32Array, idx: Uint8Array }
 ) {
 	const gl = canvas.getContext("webgl", { preserveDrawingBuffer: true })!
 	gl.getExtension("OES_standard_derivatives")
 	const p = program(gl, vert, frag)
 	texture(gl)
 	gl.uniform1i(gl.getUniformLocation(p, tag.tex), 0)
-	buffer(gl, data.vert, { loc: gl.getAttribLocation(p, tag.vert_a), size: 3 })
-	buffer(gl, data.tex, { loc: gl.getAttribLocation(p, tag.tex_a), size: 2 })
-	buffer(gl, data.norm, { loc: gl.getAttribLocation(p, tag.norm_a), size: 3 })
-	buffer(gl, data.idx)
+	buffer(gl, mesh.vert, { loc: gl.getAttribLocation(p, tag.vert_a), size: 3 })
+	buffer(gl, mesh.tex, { loc: gl.getAttribLocation(p, tag.tex_a), size: 2 })
+	buffer(gl, mesh.norm, { loc: gl.getAttribLocation(p, tag.norm_a), size: 3 })
+	buffer(gl, mesh.idx)
 	prog = {
 		canvas, gl,
 		pos: gl.getUniformLocation(p, tag.pos)!,
@ -283,7 +283,7 @@ export function init(
 		aether: gl.getUniformLocation(p, tag.aether)!,
 		dtex: gl.getUniformLocation(p, tag.dtex)!,
 		src: gl.getUniformLocation(p, tag.src)!,
-		len: data.idx.length
+		len: mesh.idx.length
 	}
 }