feat: orthographic example, fix perspective camera sign bug, improve …

…uniformity of maker-functions.
bhouston · Jun 23, 2020 · fc62362 · fc62362
1 parent 1d3d795
commit fc62362
Show file tree

Hide file tree

Showing 19 changed files with 311 additions and 160 deletions.
diff --git a/examples/gettingstarted/8_orthographic/index.html b/examples/gettingstarted/8_orthographic/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Threeify - Getting Started - 8 Orrthographic</title>
+    <script type="module" src="/dist/examples/gettingstarted/8_orthographic/index.js"></script>
+  </head>
+  <body></body>
+</html>
diff --git a/src/examples/gettingstarted/4_lambertCube/index.ts b/src/examples/gettingstarted/4_lambertCube/index.ts
@@ -31,8 +31,8 @@ async function init(): Promise<null> {
   const program = makeProgramFromShaderMaterial(context, material);
   const uniforms = {
     localToWorld: new Matrix4(),
-    worldToView: makeMatrix4Translation(new Matrix4(), new Vector3(0, 0, -1)),
-    viewToScreen: makeMatrix4Perspective(new Matrix4(), -0.25, 0.25, 0.25, -0.25, 0.1, 4.0),
+    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),
   };
@@ -44,8 +44,8 @@ async function init(): Promise<null> {
 
     const now = Date.now();
     uniforms.localToWorld = makeMatrix4RotationFromEuler(
-      uniforms.localToWorld,
       new Euler(now * 0.001, now * 0.0033, now * 0.00077),
+      uniforms.localToWorld,
     );
     canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
   }

diff --git a/src/examples/gettingstarted/5_reflectivePolyhedral/index.ts b/src/examples/gettingstarted/5_reflectivePolyhedral/index.ts
@@ -4,7 +4,7 @@ import { ShaderMaterial } from "../../../lib/materials/ShaderMaterial";
 import { Euler } from "../../../lib/math/Euler";
 import { Matrix4 } from "../../../lib/math/Matrix4";
 import {
-  makeMatrix4Perspective,
+  makeMatrix4PerspectiveFov,
   makeMatrix4RotationFromEuler,
   makeMatrix4Translation,
 } from "../../../lib/math/Matrix4.Functions";
@@ -38,8 +38,9 @@ async function init(): Promise<null> {
   const program = makeProgramFromShaderMaterial(context, material);
   const uniforms = {
     localToWorld: new Matrix4(),
-    worldToView: makeMatrix4Translation(new Matrix4(), new Vector3(0, 0, -1)),
-    viewToScreen: makeMatrix4Perspective(new Matrix4(), -0.25, 0.25, 0.25, -0.25, 0.1, 4.0),
+    worldToView: makeMatrix4Translation(new Vector3(0, 0, -1)),
+    // viewToScreen: makeMatrix4Perspective(-0.25, 0.25, 0.25, -0.25, 0.1, 4.0),
+    viewToScreen: makeMatrix4PerspectiveFov(45, 0.1, 4.0, 1.0, canvasFramebuffer.aspectRatio),
     cubeMap: makeTexImage2DFromCubeTexture(context, cubeTexture),
   };
   const bufferGeometry = makeBufferGeometryFromGeometry(context, geometry);
@@ -50,8 +51,8 @@ async function init(): Promise<null> {
 
     const now = Date.now();
     uniforms.localToWorld = makeMatrix4RotationFromEuler(
-      uniforms.localToWorld,
       new Euler(now * 0.0001, now * 0.00033, now * 0.000077),
+      uniforms.localToWorld,
     );
     canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
   }

diff --git a/src/examples/gettingstarted/7_metallicRoughness/index.ts b/src/examples/gettingstarted/7_metallicRoughness/index.ts
@@ -39,8 +39,8 @@ async function init(): Promise<null> {
   const program = makeProgramFromShaderMaterial(context, material);
   const uniforms = {
     localToWorld: new Matrix4(),
-    worldToView: makeMatrix4Translation(new Matrix4(), new Vector3(0, 0, -1)),
-    viewToScreen: makeMatrix4Perspective(new Matrix4(), -0.25, 0.25, 0.25, -0.25, 0.1, 4.0),
+    worldToView: makeMatrix4Translation(new Vector3(0, 0, -1)),
+    viewToScreen: makeMatrix4Perspective(-0.25, 0.25, 0.25, -0.25, 0.1, 4.0),
     roughnessFactor: 0,
     cubeMap: makeTexImage2DFromCubeTexture(context, cubeTexture),
   };
@@ -52,8 +52,8 @@ async function init(): Promise<null> {
 
     const now = Date.now();
     uniforms.localToWorld = makeMatrix4RotationFromEuler(
-      uniforms.localToWorld,
       new Euler(now * 0.0001, now * 0.00033, now * 0.000077),
+      uniforms.localToWorld,
     );
     uniforms.roughnessFactor = Math.sin(now * 0.0001) * 0.5 + 0.5;
     canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);

diff --git a/src/examples/gettingstarted/8_orthographic/fragment.glsl b/src/examples/gettingstarted/8_orthographic/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.0 );
+
+}
diff --git a/src/examples/gettingstarted/8_orthographic/index.ts b/src/examples/gettingstarted/8_orthographic/index.ts
@@ -0,0 +1,59 @@
+import { box } from "../../../lib/geometry/primitives/Box";
+import { fetchImage } from "../../../lib/io/loaders/Image";
+import { ShaderMaterial } from "../../../lib/materials/ShaderMaterial";
+import { Euler } from "../../../lib/math/Euler";
+import { Matrix4 } from "../../../lib/math/Matrix4";
+import {
+  makeMatrix4OrthographicSimple,
+  makeMatrix4RotationFromEuler,
+  makeMatrix4Translation,
+} from "../../../lib/math/Matrix4.Functions";
+import { Vector2 } from "../../../lib/math/Vector2";
+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 { Texture } from "../../../lib/textures/Texture";
+import fragmentSourceCode from "./fragment.glsl";
+import vertexSourceCode from "./vertex.glsl";
+
+async function init(): Promise<null> {
+  const geometry = box(0.75, 0.75, 0.75);
+  const material = new ShaderMaterial(vertexSourceCode, fragmentSourceCode);
+  const texture = new Texture(await fetchImage("/assets/textures/uv_grid_opengl.jpg"));
+
+  const context = new RenderingContext();
+  const canvasFramebuffer = context.canvasFramebuffer;
+  if (canvasFramebuffer.canvas instanceof HTMLCanvasElement) {
+    document.body.appendChild(canvasFramebuffer.canvas);
+  }
+  const program = makeProgramFromShaderMaterial(context, material);
+  const uniforms = {
+    localToWorld: new Matrix4(),
+    worldToView: makeMatrix4Translation(new Vector3(0, 0, -1)),
+    viewToScreen: makeMatrix4OrthographicSimple(1.5, new Vector2(), 0.1, 4.0, 1.0, canvasFramebuffer.aspectRatio),
+    viewLightPosition: new Vector3(0, 0, 0),
+    map: makeTexImage2DFromTexture(context, texture),
+  };
+  const bufferGeometry = makeBufferGeometryFromGeometry(context, geometry);
+  const depthTestState = new DepthTestState(true, DepthTestFunc.Less);
+
+  function animate(): void {
+    requestAnimationFrame(animate);
+
+    const now = Date.now();
+    uniforms.localToWorld = makeMatrix4RotationFromEuler(
+      new Euler(now * 0.001, now * 0.0033, now * 0.00077),
+      uniforms.localToWorld,
+    );
+    canvasFramebuffer.renderBufferGeometry(program, uniforms, bufferGeometry, depthTestState);
+  }
+
+  animate();
+
+  return null;
+}
+
+init();
diff --git a/src/examples/gettingstarted/8_orthographic/vertex.glsl b/src/examples/gettingstarted/8_orthographic/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.0 ) ).xyz );
+  v_viewPosition = ( worldToView * localToWorld * vec4( position, 1.0 ) ).xyz;
+  v_uv = uv;
+  gl_Position = viewToScreen * vec4( v_viewPosition, 1.0 );
+
+}
diff --git a/src/lib/math/Euler.Functions.ts b/src/lib/math/Euler.Functions.ts
@@ -4,7 +4,11 @@ import { Matrix4 } from "./Matrix4";
 import { makeMatrix4RotationFromQuaternion } from "./Matrix4.Functions";
 import { Quaternion } from "./Quaternion";
 
-export function makeEulerFromRotationMatrix4(e: Euler, m: Matrix4, order: EulerOrder = EulerOrder.Default): Euler {
+export function makeEulerFromRotationMatrix4(
+  m: Matrix4,
+  order: EulerOrder = EulerOrder.Default,
+  result = new Euler(),
+): Euler {
   // assumes the upper 3x3 of m is a pure rotation matrix (i.e, unscaled)
 
   const te = m.elements;
@@ -102,11 +106,10 @@ export function makeEulerFromRotationMatrix4(e: Euler, m: Matrix4, order: EulerO
       break;
   }
 
-  return e.set(x, y, z, order);
+  return result.set(x, y, z, order);
 }
 
-export function makeEulerFromQuaternion(e: Euler, q: Quaternion, order: EulerOrder): Euler {
-  const m = makeMatrix4RotationFromQuaternion(new Matrix4(), q);
-
-  return makeEulerFromRotationMatrix4(e, m, order);
+export function makeEulerFromQuaternion(q: Quaternion, order: EulerOrder, result = new Euler()): Euler {
+  const m = makeMatrix4RotationFromQuaternion(q);
+  return makeEulerFromRotationMatrix4(m, order, result);
 }
diff --git a/src/lib/math/Matrix3.ts b/src/lib/math/Matrix3.ts
@@ -75,10 +75,6 @@ export class Matrix3 implements IPrimitive<Matrix3> {
     return this;
   }
 
-  numComponents(): 9 {
-    return 9;
-  }
-
   multiplyByScalar(s: number): this {
     const te = this.elements;