Math lib tweaks

demo-01-ts-webgl/index.ts

@@ -6,20 +6,20 @@ import { Camera } from './lib/camera'
 import { initBasicRenderProgram, drawScene, createShadowMap, initShadowRenderProgram } from './lib/BasicRenderProgram'
 import { loadObj } from './lib/loaders/ObjLoader'
 import { InputState } from './lib/input'
-import { m4fromPositionAndEuler, m4lookAt, m4vectorMultiply, m4yRotation } from './lib/mat4'
+import { m4fromPositionAndEuler, m4lookAt } from './lib/mat4'
 import { initGlState } from './lib/gl'
 import { getWorldRayFromClipSpaceAndCamera, rayIntersectsScene, sortBySceneDepth } from './lib/raycast'
 import { getPointerClickInClipSpace } from './lib/events'
-import { Vec3, Vec4, calculateOrbitPosition } from './lib/vec'
+import { Color, POS_ORIGIN, ROT_NONE, Vec3, calculateOrbitPosition } from './lib/vec'
 
 
 type NodeName = "yellow tree" | "orange tree" | "green tree" | "floor";
 
-const meshColorMap: Record<NodeName, Vec3> = {
-  "yellow tree": [0.7, 0.7, 0.01 ],
-  "orange tree": [0.6, 0.3, 0.001],
-  "green tree": [0.1, 0.6, 0.1],
-  "floor": [0.2, 0.2, 0.4]
+const meshColorMap: Record<NodeName, Color> = {
+  "yellow tree":    { r: 0.7, g: 0.7, b: 0.01 },
+  "orange tree":    { r: 0.6, g: 0.3, b: 0.001 },
+  "green tree":     { r: 0.1, g: 0.6, b: 0.1 },
+  "floor":          { r: 0.2, g: 0.2, b: 0.4}
 };
 
 type Orbit = {
@@ -33,7 +33,7 @@ const orbit: Orbit = {
     azimuth: Math.PI * -0.2,  // horizontal angle, in radians
     elevation: 3 * Math.PI / 4,  // vertical angle, in radians
     radius: 15,
-    target: [-3, 2, -2],
+    target: {x: -3, y: 2, z: -2},
     sensitivity: 0.01,
 } 
 
@@ -78,35 +78,35 @@ if (!basicRenderProgram) {
 
 const vertices = await loadObj('/rainbowtree.obj');
 
-const yellowTree = initSceneNode(m4fromPositionAndEuler( [0,0,0], [0, Math.PI /2, 0]),
+const yellowTree = initSceneNode(m4fromPositionAndEuler( POS_ORIGIN, { x: 0, y: Math.PI /2, z: 0}),
         {
         vertices,
         material: {
             color:  meshColorMap["yellow tree"],
-            specularColor: [0.2,0.2,0.2],
+            specularColor: { r: 0.2, g: 0.2, b:0.2 },
             shininess: 0.9
         }},
     "yellow tree")
 
 
 const orangeTree = initSceneNode(
-    m4fromPositionAndEuler( [5,0,0], [0, Math.PI /2, 0]),
+    m4fromPositionAndEuler( { x: 5, y: 0, z: 0 }, { x: 0, y: Math.PI /2, z: 0 }),
     { 
         vertices, 
         material: {
             color:  meshColorMap["orange tree"],
-            specularColor: [0.2,0.2,0.2],
+            specularColor: { r: 0.2, g: 0.2, b: 0.2},
             shininess: 0.9
         }},
     "orange tree")
 
 const greenTree  = initSceneNode(
-        m4fromPositionAndEuler( [5,0,0], [0, Math.PI /2, 0]),
+        m4fromPositionAndEuler( { x: 5, y: 0, z: 0}, { x: 0, y: Math.PI /2, z: 0 }),
         {
         vertices,
         material: {
             color:  meshColorMap["green tree"],
-            specularColor: [0.2,0.2,0.2],
+            specularColor: { r: 0.2, g: 0.2, b: 0.2},
             shininess: 0.5
         }},
     "green tree")
@@ -145,12 +145,12 @@ const floorVertices: Vertices = {
 } 
 
 
-const floorNode = initSceneNode(m4fromPositionAndEuler( [0,0.1,0], [0, 0, 0]),
+const floorNode = initSceneNode(m4fromPositionAndEuler( { x: 0, y: 0.1, z: 0}, ROT_NONE),
         {
         vertices: floorVertices,
         material: {
             color:  meshColorMap["floor"],
-            specularColor: [0.2,0.2,0.2],
+            specularColor: { r: 0.2, g: 0.2, b: 0.2},
             shininess: 0.9
         }},
     "floor")
@@ -161,17 +161,17 @@ const scene = [yellowTree, floorNode]
 
 // create lights
 const ambientLight: AmbientLight = {
-        color: [0.2, 0.2, 0.2]
+        color: { r: 0.2, g: 0.2, b: 0.2 }
     };
 
 const directionalLight: DirectionalLight = {
-        rotation : [ 0.0,  -0.8 , -0.5],
-        color : [0.6,  0.6,  0.6],
+        rotation : { x: 0,  y: -0.8 , z: -0.5},
+        color : { r: 0.6,  g: 0.6,  b: 0.6 },
     };
 
 const pointLight: PointLight = {
-        position: [ 0, 5.0, 5],
-        color: [ 0.7, 0.7, 0.7],
+        position: { x:  0, y: 5.0, z: 5 },
+        color: {r: 0.7, g: 0.7, b: 0.7 },
         constant: 1.0,
         linear: 0.009,
         quadratic: 0.032
@@ -184,7 +184,7 @@ const cameraPosition = calculateOrbitPosition(
         orbit.radius
     );
 
-const up: Vec3 = [0, 1, 0]
+const up: Vec3 = {x: 0, y: 1, z: 0 }
 const camera: Camera = {
     fieldOfViewRadians:  degToRad(60), 
     aspect: canvas.clientWidth / canvas.clientHeight,
@@ -197,7 +197,7 @@ const camera: Camera = {
 
 
 const input: InputState = {
-    pointerPosition: [0,0]
+    pointerPosition: {x: 0, y: 0 }
 }
 
 
@@ -250,12 +250,12 @@ canvas.addEventListener('pointerdown', () => {
 
 ///////////////////////////
 
-let lastTime = 0;
+// let lastTime = 0;
 function animate(time: DOMHighResTimeStamp) {
     time *= 0.001 // convert from millis to seconds
-    const dt = time - lastTime;
-    lastTime = time;
-    updateLight(pointLight, dt)
+    // const dt = time - lastTime;
+    // lastTime = time;
+    // updateLight(pointLight, dt)  // this both break under the shadow mapping
     // updateDirectionalLight(directionalLight, time)
     resizeCanvasToDisplaySize(canvas);
     camera.aspect = canvas.clientWidth / canvas.clientHeight;
@@ -302,24 +302,24 @@ function resizeCanvasToDisplaySize(canvas: HTMLCanvasElement): void {
     }
 
 }
+
+
 // function updateDirectionalLight(light: DirectionalLight, time: number) {
 
 //     const oldRotation = light.rotation
 
 
-//     light.rotation = [oldRotation[0], Math.sin(time), oldRotation[2]]
+//     light.rotation = { x: oldRotation.x, y: Math.sin(time), z: oldRotation.z }
 
 // }
 
-function updateLight(pointLight: PointLight, dt: number) {
-      const rotator = m4yRotation(Math.PI / (dt * 10000));
-      const oldTransform: Vec4 = [
-        pointLight.position[0],
-        pointLight.position[1],
-        pointLight.position[2],
-         0.0
-      ];
+// function updateLight(pointLight: PointLight, dt: number) {
+//       const rotator = m4yRotation(Math.PI / (dt * 10000));
+//       const oldTransform: Vec4 = {
+//         ...pointLight.position,
+//         w: 0.0
+//       };
 
-    const newTransform = m4vectorMultiply(oldTransform, rotator);
-    pointLight.position = [newTransform[0],newTransform[1],newTransform[2]]
-}
+//     const newTransform = m4PositionMultiply(oldTransform, rotator);
+//     pointLight.position = { x: newTransform.x, y: newTransform.y, z: newTransform.z }
+// }

demo-01-ts-webgl/lib/BasicRenderProgram.ts

@@ -1,6 +1,6 @@
 import { AttributeBinding, createProgramFromRaw } from "./shaderUtils"
 import { AmbientLight, DirectionalLight, PointLight } from "./light";
-import {  m4fromPositionAndEuler, m4inverse, m4multiply, m4orthographic, m4perspective, m4PositionMultiply, m4xRotation, Mat4 } from "./mat4";
+import {  m4fromPositionAndEuler, m4inverse, m4multiply, m4orthographic, m4perspective, m4PositionMultiply, m4ToArray, m4xRotation, Mat4 } from "./mat4";
 import { Camera } from "./camera";
 import { InputState } from "./input";
 
@@ -14,7 +14,7 @@ import shadowFragmentSource from "./shaders/depth-only.frag?raw"
 import { GlState } from "./gl";
 import { Mesh } from "./mesh";
 import { SceneNode } from "./scene";
-import { Vec3 } from "./vec";
+import { colorToArray, eulerToArray, Vec3, vec3ToArray } from "./vec";
 
 function guaranteeUniformLocation(
     gl: WebGL2RenderingContext, 
@@ -103,31 +103,31 @@ export function updateUniforms(
             camera.aspect, 
             camera.near, 
             camera.far)
-        gl.uniformMatrix4fv(renderProgram.worldMatrixUniformLocation, false, shapeWorld);  
-        gl.uniformMatrix4fv(renderProgram.viewUniformLocation, false, viewMatrix); 
-        gl.uniformMatrix4fv(renderProgram.projectionUniformLocation, false, projectionMatrix);
+        gl.uniformMatrix4fv(renderProgram.worldMatrixUniformLocation, false, m4ToArray(shapeWorld));  
+        gl.uniformMatrix4fv(renderProgram.viewUniformLocation, false, m4ToArray(viewMatrix)); 
+        gl.uniformMatrix4fv(renderProgram.projectionUniformLocation, false, m4ToArray(projectionMatrix));
 
         // update material uniforms
-        gl.uniform3fv(renderProgram.materialUniform.colorLocation, mesh.material.color);
-        gl.uniform3fv(renderProgram.materialUniform.specularColorLocation, mesh.material.specularColor);
+        gl.uniform3fv(renderProgram.materialUniform.colorLocation, colorToArray(mesh.material.color));
+        gl.uniform3fv(renderProgram.materialUniform.specularColorLocation, colorToArray(mesh.material.specularColor));
         gl.uniform1f(renderProgram.materialUniform.shininessLocation, mesh.material.shininess);
 
 
         // update light uniforms
         // set ambient light
-        gl.uniform3fv(renderProgram.ambientLightUniform.colorLocation,ambientLight.color);
+        gl.uniform3fv(renderProgram.ambientLightUniform.colorLocation, colorToArray(ambientLight.color));
         // set directional light
-        gl.uniform3fv(renderProgram.directionalLightUniform.colorLocation,directionalLight.color);
-        gl.uniform3fv(renderProgram.directionalLightUniform.rotationLocation,directionalLight.rotation);
+        gl.uniform3fv(renderProgram.directionalLightUniform.colorLocation,colorToArray(directionalLight.color));
+        gl.uniform3fv(renderProgram.directionalLightUniform.rotationLocation, eulerToArray(directionalLight.rotation));
 
         // shadows
         // shadow map must be bound
-        gl.uniformMatrix4fv(renderProgram.shadowUniform.lightViewLocation, false, lightViewProjectionMatrix);
+        gl.uniformMatrix4fv(renderProgram.shadowUniform.lightViewLocation, false, m4ToArray(lightViewProjectionMatrix));
 
 
         // set point light
-        gl.uniform3fv(renderProgram.pointLightUniform.colorLocation,pointLight.color);
-        gl.uniform3fv(renderProgram.pointLightUniform.positionLocation,pointLight.position);
+        gl.uniform3fv(renderProgram.pointLightUniform.colorLocation, colorToArray(pointLight.color));
+        gl.uniform3fv(renderProgram.pointLightUniform.positionLocation, vec3ToArray(pointLight.position));
         gl.uniform1f(renderProgram.pointLightUniform.constantLocation,pointLight.constant);
         gl.uniform1f(renderProgram.pointLightUniform.linearLocation,pointLight.linear);
         gl.uniform1f(renderProgram.pointLightUniform.quadraticLocation,pointLight.quadratic); 
@@ -439,13 +439,15 @@ export function drawScene(
 
 
     // Compute light's view-projection matrix (for directional light)
-    const [x,y,z] = directionalLight.rotation
+    const x = directionalLight.rotation.x
+    const y = directionalLight.rotation.y
+    const z = directionalLight.rotation.z
 
     const xMatrix = m4xRotation(x)
     const yMatrix = m4xRotation(y)
     const zMatrix = m4xRotation(z)
 
-    const imaginaryCameraPosition: Vec3 = [10,10,10]
+    const imaginaryCameraPosition: Vec3 = { x: 10,y: 10, z: 10}
     let effectiveCameraPosition = m4PositionMultiply(imaginaryCameraPosition,xMatrix)
     effectiveCameraPosition = m4PositionMultiply(effectiveCameraPosition,yMatrix)
     effectiveCameraPosition = m4PositionMultiply(effectiveCameraPosition,zMatrix)
@@ -583,8 +585,8 @@ export function drawShadowScene(
             const drawInitializedMesh = (mesh: Mesh) => {
                 const vao = glState.vaos.get(mesh._id!)!;
                 gl.bindVertexArray(vao);
-                gl.uniformMatrix4fv(shadowProgram.u_model, false, node._worldTransform);
-                gl.uniformMatrix4fv(shadowProgram.u_lightViewProj, false, lightViewProj);
+                gl.uniformMatrix4fv(shadowProgram.u_model, false, m4ToArray(node._worldTransform));
+                gl.uniformMatrix4fv(shadowProgram.u_lightViewProj, false, m4ToArray(lightViewProj));
                 if (mesh.vertices.indices) {
                     gl.drawElements(gl.TRIANGLES, mesh.vertices.indices.length, gl.UNSIGNED_SHORT, 0);
                 } else {
@@ -608,4 +610,5 @@ export function drawShadowScene(
             node.children.forEach(child => drawShadowScene(glState, [child], renderProgram, shadowProgram, lightViewProj));
         }
     });
-}
+}
+

demo-01-ts-webgl/lib/events.ts

@@ -17,5 +17,5 @@ export function getPointerClickInClipSpace(
         x = x / canvas.width * 2 -1;
         y = y  / canvas.height * -2 + 1;
 
-        return [x,y]
+        return {x,y}
 }

demo-01-ts-webgl/lib/light.ts

@@ -1,18 +1,18 @@
-import { Vec3 } from "./vec";
+import { Color, Vec3, Euler } from "./vec";
 
 export type PointLight = {
-  color: Vec3;
+  color: Color;
   position: Vec3;
   constant: number;
   linear: number;
   quadratic: number;
 } 
 
 export type DirectionalLight = {
-  color: Vec3;
-  rotation: Vec3;
+  color: Color;
+  rotation: Euler;
 };
 
 export type AmbientLight = {
-  color: Vec3;
+  color: Color;
 }