feat: standalone and simplier device orientation example

src/examples/interaction/deviceOrientation/example.json

@@ -0,0 +1,8 @@
+{
+  "slug": "interaction_device_orientation",
+  "en": {
+    "name": "Device Orientation",
+    "description": "Click once on the screen to active.  The cube moves based on your devices orientation.",
+    "keywords": ["interaction", "deviceorientation", "orientation"]
+  }
+}

src/examples/interaction/deviceOrientation/fragment.glsl

@@ -0,0 +1,18 @@
+precision highp float;
+
+varying vec3 v_viewPosition;
+varying vec3 v_viewNormal;
+varying vec2 v_uv;
+
+uniform sampler2D map;
+uniform vec3 viewLightPosition;
+
+void main() {
+
+  vec3 albedo = texture2D(map, v_uv).xyz;
+  vec3 directionToLight = normalize( viewLightPosition - v_viewPosition );
+  float lambertianIntensity = dot( directionToLight, v_viewNormal );
+
+  gl_FragColor = vec4( albedo * lambertianIntensity, 1. );
+
+}

src/examples/interaction/deviceOrientation/index.ts

@@ -0,0 +1,69 @@
+import { DeviceOrientation } from "../../../lib/controllers/DeviceOrientation";
+import { boxGeometry } from "../../../lib/geometry/primitives/boxGeometry";
+import { ShaderMaterial } from "../../../lib/materials/ShaderMaterial";
+import { Matrix4 } from "../../../lib/math/Matrix4";
+import {
+  makeMatrix4Inverse,
+  makeMatrix4Perspective,
+  makeMatrix4RotationFromQuaternion,
+  makeMatrix4Translation,
+} from "../../../lib/math/Matrix4.Functions";
+import { Vector3 } from "../../../lib/math/Vector3";
+import { makeBufferGeometryFromGeometry } from "../../../lib/renderers/webgl/buffers/BufferGeometry";
+import { DepthTestFunc, DepthTestState } from "../../../lib/renderers/webgl/DepthTestState";
+import { makeProgramFromShaderMaterial } from "../../../lib/renderers/webgl/programs/Program";
+import { RenderingContext } from "../../../lib/renderers/webgl/RenderingContext";
+import { makeTexImage2DFromTexture } from "../../../lib/renderers/webgl/textures/TexImage2D";
+import { fetchImage } from "../../../lib/textures/loaders/Image";
+import { Texture } from "../../../lib/textures/Texture";
+import fragmentSource from "./fragment.glsl";
+import vertexSource from "./vertex.glsl";
+
+async function init(): Promise<null> {
+  const geometry = boxGeometry(0.75, 0.75, 0.75);
+  const material = new ShaderMaterial(vertexSource, fragmentSource);
+  const texture = new Texture(await fetchImage("/assets/textures/uv_grid_opengl.jpg"));
+
+  const context = new RenderingContext(document.getElementById("framebuffer") as HTMLCanvasElement);
+  const canvasFramebuffer = context.canvasFramebuffer;
+  window.addEventListener("resize", () => canvasFramebuffer.resize());
+
+  const program = makeProgramFromShaderMaterial(context, material);
+  const uniforms = {
+    localToWorld: new Matrix4(),
+    worldToView: makeMatrix4Translation(new Vector3(0, 0, -1)),
+    viewToScreen: makeMatrix4Perspective(-0.25, 0.25, 0.25, -0.25, 0.1, 4.0),
+    viewLightPosition: new Vector3(0, 0, 0),
+    map: makeTexImage2DFromTexture(context, texture),
+  };
+  const bufferGeometry = makeBufferGeometryFromGeometry(context, geometry);
+  const depthTestState = new DepthTestState(true, DepthTestFunc.Less);
+
+  let deviceOrientation: DeviceOrientation | undefined = undefined;
+
+  const body = document.getElementsByTagName("body")[0];
+  body.addEventListener(
+    "click",
+    () => {
+      if (deviceOrientation === undefined) {
+        deviceOrientation = new DeviceOrientation();
+      }
+    },
+    false,
+  );
+
+  function animate(): void {
+    requestAnimationFrame(animate);
+
+    if (deviceOrientation !== undefined) {
+      uniforms.localToWorld = makeMatrix4Inverse(makeMatrix4RotationFromQuaternion(deviceOrientation.orientation));
+    }
+    canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
+  }
+
+  animate();
+
+  return null;
+}
+
+init();

src/examples/interaction/deviceOrientation/vertex.glsl

@@ -0,0 +1,20 @@
+attribute vec3 position;
+attribute vec3 normal;
+attribute vec2 uv;
+
+uniform mat4 localToWorld;
+uniform mat4 worldToView;
+uniform mat4 viewToScreen;
+
+varying vec3 v_viewPosition;
+varying vec3 v_viewNormal;
+varying vec2 v_uv;
+
+void main() {
+
+  v_viewNormal = normalize( ( worldToView * localToWorld * vec4( normal, 0. ) ).xyz );
+  v_viewPosition = ( worldToView * localToWorld * vec4( position, 1. ) ).xyz;
+  v_uv = uv;
+  gl_Position = viewToScreen * vec4( v_viewPosition, 1. );
+
+}

src/examples/passes/equirectangular/index.ts

@@ -1,13 +1,12 @@
-import { DeviceOrientationController } from "../../../lib/controllers/DeviceOrientation";
 import { passGeometry } from "../../../lib/geometry/primitives/passGeometry";
 import { ShaderMaterial } from "../../../lib/materials/ShaderMaterial";
+import { Euler } from "../../../lib/math/Euler";
 import { Matrix4 } from "../../../lib/math/Matrix4";
 import {
   makeMatrix4Inverse,
   makeMatrix4PerspectiveFov,
-  makeMatrix4RotationFromQuaternion,
+  makeMatrix4RotationFromEuler,
 } from "../../../lib/math/Matrix4.Functions";
-import { Quaternion } from "../../../lib/math/Quaternion";
 import { makeBufferGeometryFromGeometry } from "../../../lib/renderers/webgl/buffers/BufferGeometry";
 import { DepthTestFunc, DepthTestState } from "../../../lib/renderers/webgl/DepthTestState";
 import { makeProgramFromShaderMaterial } from "../../../lib/renderers/webgl/programs/Program";
@@ -47,32 +46,14 @@ async function init(): Promise<null> {
   };
   const bufferGeometry = makeBufferGeometryFromGeometry(context, geometry);
   const depthTestState = new DepthTestState(true, DepthTestFunc.Less);
-
-  const deviceOrientation = new Quaternion();
-
-  let deviceOrientationController: DeviceOrientationController | undefined = undefined;
-
-  const body = document.getElementsByTagName("body")[0];
-  body.addEventListener(
-    "click",
-    () => {
-      if (deviceOrientationController === undefined) {
-        deviceOrientationController = new DeviceOrientationController((orientation) => {
-          deviceOrientation.copy(orientation);
-        });
-      }
-    },
-    false,
-  );
-
   function animate(): void {
     requestAnimationFrame(animate);
 
-    if (deviceOrientationController !== undefined) {
-      deviceOrientationController.update();
-    }
     const now = Date.now();
-    passUniforms.viewToWorld = makeMatrix4RotationFromQuaternion(deviceOrientation);
+
+    passUniforms.viewToWorld = makeMatrix4Inverse(
+      makeMatrix4RotationFromEuler(new Euler(Math.sin(now * 0.0003), now * 0.0004, 0)),
+    );
     passUniforms.equirectangularMap = Math.floor(now / 5000) % 2 === 0 ? garageMap : debugMap;
 
     canvasFramebuffer.renderBufferGeometry(passProgram, passUniforms, bufferGeometry, depthTestState);