::

src/index.ts

@@ -1,4 +1,4 @@
-import { mat4 } from "gl-matrix";
+import { mat4, vec3 } from "gl-matrix";
 
 const consolelog = (...args: any[]) => {
   console.log(...args);
@@ -19,6 +19,9 @@ canvas.style.width = "100%";
 canvas.style.height = "100%";
 const gl = canvas.getContext("webgl2", { xrCompatible: true })!;
 
+// points to display as 3 faces
+const points: mat4[] = [];
+
 const render = (() => {
   const vertexShaderCode = `
 #version 300 es
@@ -75,37 +78,47 @@ void main() {
   const vao = gl.createVertexArray();
   gl.bindVertexArray(vao);
 
+  const positionBuffer = gl.createBuffer();
   {
-    const lll = 1;
-
-    const positions = [
-      [0.0, lll, 0.0],
-      [0.0, 0.0, lll],
-      [0.0, 0.0, 0.0],
-
-      [0.0, lll, 0.0],
-      [lll, 0.0, 0.0],
-      [0.0, 0.0, 0.0],
-
-      [0.0, 0.0, lll],
-      [lll, 0.0, 0.0],
-      [0.0, 0.0, 0.0],
-    ];
-
-    const positionBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-    gl.bufferData(
-      gl.ARRAY_BUFFER,
-      new Float32Array(positions.flat()),
-      gl.STATIC_DRAW
-    );
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([]), gl.DYNAMIC_DRAW);
     const a_position = gl.getAttribLocation(program, "a_position");
     gl.enableVertexAttribArray(a_position);
     gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, 0, 0);
   }
 
+  const colorBuffer = gl.createBuffer();
   {
-    const colors = [
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([]), gl.DYNAMIC_DRAW);
+    const a_color = gl.getAttribLocation(program, "a_color");
+    gl.enableVertexAttribArray(a_color);
+    gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, 0, 0);
+  }
+
+  let n = 0;
+
+  gl.bindVertexArray(null);
+
+  /**
+   * update position and color buffers according to the global point array
+   */
+  const update = () => {
+    const faceVertices = [
+      [0.0, 1, 0.0],
+      [0.0, 0.0, 1],
+      [0.0, 0.0, 0.0],
+
+      [0.0, 1, 0.0],
+      [1, 0.0, 0.0],
+      [0.0, 0.0, 0.0],
+
+      [0.0, 0.0, 1],
+      [1, 0.0, 0.0],
+      [0.0, 0.0, 0.0],
+    ] as const;
+
+    const faceColors = [
       [0.0, 0.3, 0.5],
       [0.0, 0.3, 0.5],
       [0.0, 0.3, 0.5],
@@ -117,21 +130,32 @@ void main() {
       [0.3, 0, 0.5],
       [0.3, 0, 0.5],
       [0.3, 0, 0.5],
-    ];
+    ] as const;
 
-    const colorBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+    const positions = [];
+    const colors = [];
+
+    const a = vec3.create();
+    for (const m of points) {
+      for (let i = 0; i < faceVertices.length; i++) {
+        vec3.transformMat4(a, faceVertices[i], m);
+        positions.push(...a);
+        colors.push(...faceColors[i]);
+      }
+    }
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
     gl.bufferData(
       gl.ARRAY_BUFFER,
-      new Float32Array(colors.flat()),
-      gl.STATIC_DRAW
+      new Float32Array(positions),
+      gl.DYNAMIC_DRAW
     );
-    const a_color = gl.getAttribLocation(program, "a_color");
-    gl.enableVertexAttribArray(a_color);
-    gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, 0, 0);
-  }
 
-  gl.bindVertexArray(null);
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.DYNAMIC_DRAW);
+
+    n = positions.length;
+  };
 
   const render = (
     viewMatrix: ArrayLike<number> | Float32Array = [
@@ -145,6 +169,10 @@ void main() {
     ],
     viewport = { x: 0, y: 0, width: canvas.width, height: canvas.height }
   ) => {
+    update();
+
+    //
+
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
     gl.enable(gl.DEPTH_TEST);
@@ -157,7 +185,7 @@ void main() {
     gl.bindVertexArray(vao);
     gl.uniformMatrix4fv(u_viewMatrix, false, new Float32Array(viewMatrix));
     gl.disable(gl.CULL_FACE);
-    gl.drawArrays(gl.TRIANGLES, 0, 9);
+    gl.drawArrays(gl.TRIANGLES, 0, n);
     gl.bindVertexArray(null);
   };
 
@@ -181,6 +209,16 @@ onResize();
 document.body.appendChild(canvas);
 
 (async () => {
+  for (let k = 8; k--; ) {
+    const m = mat4.create();
+    mat4.fromTranslation(m, [
+      Math.sin((k / 8) * Math.PI * 2) * 0.2,
+      Math.cos((k / 8) * Math.PI * 2) * 0.2,
+      -0.5,
+    ]);
+    points.push(m);
+  }
+
   render();
 
   const navigatorXR = navigator.xr;
@@ -243,6 +281,34 @@ document.body.appendChild(canvas);
           if (!poseFoundOnce) {
             consolelog("found a suitable pose");
             poseFoundOnce = true;
+            points.length = 0;
+
+            // found origin on ground
+            {
+              const origin = vec3.create();
+
+              const view = pose.views[0];
+              const ray = { origin: vec3.create(), direction: vec3.create() };
+              debugger;
+              getViewRay(
+                ray,
+                view.projectionMatrix,
+                view.transform.matrix,
+                0,
+                0
+              );
+
+              ray.direction[1] = 0;
+              vec3.normalize(ray.direction, ray.direction);
+
+              vec3.set(origin, ray.direction[0], 0, ray.direction[2]);
+
+              {
+                const m = mat4.create();
+                mat4.fromTranslation(m, origin);
+                points.push(m);
+              }
+            }
           }
 
           // Loop through each of the views reported by the frame and draw them
@@ -268,14 +334,48 @@ document.body.appendChild(canvas);
   );
 })();
 
-[
-  1.6211656332015991, 0, 0, 0,
+const getViewRay = (
+  out: {
+    origin: vec3;
+    direction: vec3;
+  },
+  projectionMatrix: mat4,
+  viewMatrix: mat4,
+  viewportX: number,
+  viewportY: number
+) => {
+  const m = mat4.create();
+  mat4.multiply(m, projectionMatrix, viewMatrix);
+  mat4.invert(m, m);
+  vec3.transformMat4(out.direction, [viewportX, viewportY, 0.5], m);
+  vec3.normalize(out.direction, out.direction);
+
+  vec3.transformMat4(out.origin, [0, 0, 0], m);
+};
+
+const raycastToGround = (
+  out: vec3,
+  projectionMatrix: mat4,
+  viewMatrix: mat4,
+  viewportX: number,
+  viewportY: number
+) => {
+  debugger;
+
+  const v = vec3.create();
+  const o = vec3.create();
 
-  //
-  0, 1, 0, 0,
+  // get the ray
+  const m = mat4.create();
+  mat4.multiply(m, projectionMatrix, viewMatrix);
+  // mat4.invert(m, m);
+  vec3.transformMat4(v, [viewportX, viewportY, 0.5], m);
+  vec3.normalize(v, v);
 
-  //
-  0, 0, -1.0002000331878662, -1,
-  //
-  0, 0, -0.20002000033855438, 0,
-];
+  vec3.transformMat4(o, [0, 0, 0], m);
+
+  const yGround = 0;
+  const t = (yGround - o[1]) / v[1];
+
+  vec3.scaleAndAdd(out, o, v, t);
+};