Simplify vec3 usage. #554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

greggman merged 1 commit into webgpu:main from greggman:simplify-vec3

Jan 27, 2026

Merged

Simplify vec3 usage. #554

meshes/mesh.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -74,7 +74,7 @@ export const getMeshPosAtIndex = (mesh: Mesh, index: number) => {
  
        index * mesh.vertexStride + 0,

        3

      );

      return vec3.fromValues(arr[0], arr[1], arr[2]);

      return [arr[0], arr[1], arr[2]];

    };

    export const getMeshNormalAtIndex = (mesh: Mesh, index: number) => {

    @@ -83,7 +83,7 @@ export const getMeshNormalAtIndex = (mesh: Mesh, index: number) => {
  
        index * mesh.vertexStride + 3 * Float32Array.BYTES_PER_ELEMENT,

        3

      );

      return vec3.fromValues(arr[0], arr[1], arr[2]);

      return [arr[0], arr[1], arr[2]];

    };

    export const getMeshUVAtIndex = (mesh: Mesh, index: number) => {

sample/a-buffer/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -514,9 +514,9 @@ const configure = () => {
  
          2000.0

        );

        const upVector = vec3.fromValues(0, 1, 0);

        const origin = vec3.fromValues(0, 0, 0);

        const eyePosition = vec3.fromValues(0, 5, -100);

        const upVector = [0, 1, 0];

        const origin = [0, 0, 0];

        const eyePosition = [0, 5, -100];

        const rad = Math.PI * (Date.now() / 5000);

        const rotation = mat4.rotateY(mat4.translation(origin), rad);

sample/cornell/common.ts

-Original file line number
+Diff line change
@@ -1,4 +1,4 @@
-    import { mat4, vec3 } from 'wgpu-matrix';
+    import { mat4 } from 'wgpu-matrix';
     import commonWGSL from './common.wgsl';
     /**
@@ Expand Down Expand Up / @@ -80,13 +80,9 @@ export default class Common { @@
         const viewRotation = params.rotateCamera ? this.frame / 1000 : 0;
         const viewMatrix = mat4.lookAt(
-          vec3.fromValues(
-            Math.sin(viewRotation) * 15,
-,
-            Math.cos(viewRotation) * 15
-          ),
-          vec3.fromValues(0, 5, 0),
-          vec3.fromValues(0, 1, 0)
+          [Math.sin(viewRotation) * 15, 5, Math.cos(viewRotation) * 15],
+          [0, 5, 0],
+          [0, 1, 0]
         );
         const mvp = mat4.multiply(projectionMatrix, viewMatrix);
         const invMVP = mat4.invert(mvp);
@@ Expand Down @@

sample/cubemap/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,4 +1,4 @@
  
    import { mat4, vec3 } from 'wgpu-matrix';

    import { mat4 } from 'wgpu-matrix';

    import {

      cubeVertexArray,

    @@ -193,7 +193,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = {
  
    const aspect = canvas.width / canvas.height;

    const projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 3000);

    const modelMatrix = mat4.scaling(vec3.fromValues(1000, 1000, 1000));

    const modelMatrix = mat4.scaling([1000, 1000, 1000]);

    const modelViewProjectionMatrix = mat4.create();

    const viewMatrix = mat4.identity();

    @@ -204,13 +204,8 @@ const tmpMat4 = mat4.create();
  
    function updateTransformationMatrix() {

      const now = Date.now() / 800;

      mat4.rotate(

        viewMatrix,

        vec3.fromValues(1, 0, 0),

        (Math.PI / 10) * Math.sin(now),

        tmpMat4

      );

      mat4.rotate(tmpMat4, vec3.fromValues(0, 1, 0), now * 0.2, tmpMat4);

      mat4.rotate(viewMatrix, [1, 0, 0], (Math.PI / 10) * Math.sin(now), tmpMat4);

      mat4.rotate(tmpMat4, [0, 1, 0], now * 0.2, tmpMat4);

      mat4.multiply(tmpMat4, modelMatrix, modelViewProjectionMatrix);

      mat4.multiply(

sample/deferredRendering/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -14,8 +14,8 @@ import {
  
    } from '../util';

    const kMaxNumLights = 1024;

    const lightExtentMin = vec3.fromValues(-50, -30, -50);

    const lightExtentMax = vec3.fromValues(50, 50, 50);

    const lightExtentMin = [-50, -30, -50];

    const lightExtentMax = [50, 50, 50];

    const canvas = document.querySelector('canvas') as HTMLCanvasElement;

    const adapter = await navigator.gpu?.requestAdapter({

    @@ -458,9 +458,9 @@ const lightsBufferComputeBindGroup = device.createBindGroup({
  
    //--------------------

    // Scene matrices

    const eyePosition = vec3.fromValues(0, 50, -100);

    const upVector = vec3.fromValues(0, 1, 0);

    const origin = vec3.fromValues(0, 0, 0);

    const eyePosition = [0, 50, -100];

    const upVector = [0, 1, 0];

    const origin = [0, 0, 0];

    const projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 2000.0);

sample/fractalCube/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,4 +1,4 @@
  
    import { mat4, vec3 } from 'wgpu-matrix';

    import { mat4 } from 'wgpu-matrix';

    import {

      cubeVertexArray,

    @@ -158,14 +158,9 @@ const modelViewProjectionMatrix = mat4.create();
  
    function getTransformationMatrix() {

      const viewMatrix = mat4.identity();

      mat4.translate(viewMatrix, vec3.fromValues(0, 0, -4), viewMatrix);

      mat4.translate(viewMatrix, [0, 0, -4], viewMatrix);

      const now = Date.now() / 1000;

      mat4.rotate(

        viewMatrix,

        vec3.fromValues(Math.sin(now), Math.cos(now), 0),

        1,

        viewMatrix

      );

      mat4.rotate(viewMatrix, [Math.sin(now), Math.cos(now), 0], 1, viewMatrix);

      mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix);

sample/instancedCube/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,4 +1,4 @@
  
    import { mat4, Mat4, vec3 } from 'wgpu-matrix';

    import { mat4, Mat4 } from 'wgpu-matrix';

    import {

      cubeVertexArray,

    @@ -131,18 +131,16 @@ const step = 4.0;
  
    let m = 0;

    for (let x = 0; x < xCount; x++) {

      for (let y = 0; y < yCount; y++) {

        modelMatrices[m] = mat4.translation(

          vec3.fromValues(

            step * (x - xCount / 2 + 0.5),

            step * (y - yCount / 2 + 0.5),

            0

          )

        );

        modelMatrices[m] = mat4.translation([

          step * (x - xCount / 2 + 0.5),

          step * (y - yCount / 2 + 0.5),

          0,

        ]);

        m++;

      }

    }

    const viewMatrix = mat4.translation(vec3.fromValues(0, 0, -12));

    const viewMatrix = mat4.translation([0, 0, -12]);

    const tmpMat4 = mat4.create();

    @@ -156,11 +154,7 @@ function updateTransformationMatrix() {
  
        for (let y = 0; y < yCount; y++) {

          mat4.rotate(

            modelMatrices[i],

            vec3.fromValues(

              Math.sin((x + 0.5) * now),

              Math.cos((y + 0.5) * now),

              0

            ),

            [Math.sin((x + 0.5) * now), Math.cos((y + 0.5) * now), 0],

            1,

            tmpMat4

          );

sample/normalMap/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -329,11 +329,11 @@ function frame() {
  
      ]);

      // Update mapInfoBuffer

      const lightPosWS = vec3.create(

      const lightPosWS = [

        settings.lightPosX,

        settings.lightPosY,

        settings.lightPosZ

      );

        settings.lightPosZ,

      ];

      const lightPosVS = vec3.transformMat4(lightPosWS, viewMatrix);

      const mode = getMode();

      device.queue.writeBuffer(

sample/particles/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,4 +1,4 @@
  
    import { mat4, vec3 } from 'wgpu-matrix';

    import { mat4 } from 'wgpu-matrix';

    import { GUI } from 'dat.gui';

    import particleWGSL from './particle.wgsl';

    @@ -388,7 +388,7 @@ function frame() {
  
      device.queue.writeBuffer(simulationUBOBuffer, 0, uboDataF32);

      mat4.identity(view);

      mat4.translate(view, vec3.fromValues(0, 0, -3), view);

      mat4.translate(view, [0, 0, -3], view);

      mat4.rotateX(view, Math.PI * -0.2, view);

      mat4.multiply(projection, view, mvp);

sample/primitivePicking/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -295,9 +295,9 @@ const pickBindGroup = device.createBindGroup({
  
    //--------------------

    // Scene matrices

    const eyePosition = vec3.fromValues(0, 12, -25);

    const upVector = vec3.fromValues(0, 1, 0);

    const origin = vec3.fromValues(0, 0, 0);

    const eyePosition = [0, 12, -25];

    const upVector = [0, 1, 0];

    const origin = [0, 0, 0];

    const projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 2000.0);

sample/renderBundles/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,4 +1,4 @@
  
    import { mat4, vec3 } from 'wgpu-matrix';

    import { mat4 } from 'wgpu-matrix';

    import { GUI } from 'dat.gui';

    import { createSphereMesh, SphereLayout } from '../../meshes/sphere';

    import Stats from 'stats.js';

    @@ -293,7 +293,7 @@ const frameBindGroup = device.createBindGroup({
  
    function getTransformationMatrix() {

      const viewMatrix = mat4.identity();

      mat4.translate(viewMatrix, vec3.fromValues(0, 0, -4), viewMatrix);

      mat4.translate(viewMatrix, [0, 0, -4], viewMatrix);

      const now = Date.now() / 1000;

      // Tilt the view matrix so the planet looks like it's off-axis.

      mat4.rotateZ(viewMatrix, Math.PI * 0.1, viewMatrix);

sample/reversedZ/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,4 +1,4 @@
  
    import { mat4, Mat4, vec3 } from 'wgpu-matrix';

    import { mat4, Mat4 } from 'wgpu-matrix';

    import { GUI } from 'dat.gui';

    import vertexWGSL from './vertex.wgsl';

    @@ -472,20 +472,18 @@ for (let x = 0; x < xCount; x++) {
  
        const z = -800 * m;

        const s = 1 + 50 * m;

        modelMatrices[m] = mat4.translation(

          vec3.fromValues(

            x - xCount / 2 + 0.5,

            (4.0 - 0.2 * z) * (y - yCount / 2 + 1.0),

            z

          )

        );

        mat4.scale(modelMatrices[m], vec3.fromValues(s, s, s), modelMatrices[m]);

        modelMatrices[m] = mat4.translation([

          x - xCount / 2 + 0.5,

          (4.0 - 0.2 * z) * (y - yCount / 2 + 1.0),

          z,

        ]);

        mat4.scale(modelMatrices[m], [s, s, s], modelMatrices[m]);

        m++;

      }

    }

    const viewMatrix = mat4.translation(vec3.fromValues(0, 0, -12));

    const viewMatrix = mat4.translation([0, 0, -12]);

    const aspect = (0.5 * canvas.width) / canvas.height;

    // wgpu-matrix perspective doesn't handle zFar === Infinity now.

    @@ -513,7 +511,7 @@ function updateTransformationMatrix() {
  
      for (let i = 0, m = 0; i < numInstances; i++, m += matrixFloatCount) {

        mat4.rotate(

          modelMatrices[i],

          vec3.fromValues(Math.sin(now), Math.cos(now), 0),

          [Math.sin(now), Math.cos(now), 0],

          (Math.PI / 180) * 30,

          tmpMat4

        );

sample/rotatingCube/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,4 +1,4 @@
  
    import { mat4, vec3 } from 'wgpu-matrix';

    import { mat4 } from 'wgpu-matrix';

    import {

      cubeVertexArray,

    @@ -136,14 +136,9 @@ const modelViewProjectionMatrix = mat4.create();
  
    function getTransformationMatrix() {

      const viewMatrix = mat4.identity();

      mat4.translate(viewMatrix, vec3.fromValues(0, 0, -4), viewMatrix);

      mat4.translate(viewMatrix, [0, 0, -4], viewMatrix);

      const now = Date.now() / 1000;

      mat4.rotate(

        viewMatrix,

        vec3.fromValues(Math.sin(now), Math.cos(now), 0),

        1,

        viewMatrix

      );

      mat4.rotate(viewMatrix, [Math.sin(now), Math.cos(now), 0], 1, viewMatrix);

      mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix);

sample/shadowMapping/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -258,9 +258,9 @@ const modelBindGroup = device.createBindGroup({
  
      entries: [{ binding: 0, resource: modelUniformBuffer }],

    });

    const eyePosition = vec3.fromValues(0, 50, -100);

    const upVector = vec3.fromValues(0, 1, 0);

    const origin = vec3.fromValues(0, 0, 0);

    const eyePosition = [0, 50, -100];

    const upVector = [0, 1, 0];

    const origin = [0, 0, 0];

    const projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 2000.0);

    @@ -299,7 +299,7 @@ const modelMatrix = mat4.translation([0, -45, 0]);
  
    // Rotates the camera around the origin based on time.

    function getCameraViewProjMatrix() {

      const eyePosition = vec3.fromValues(0, 50, -100);

      const eyePosition = [0, 50, -100];

      const rad = Math.PI * (Date.now() / 2000);

      const rotation = mat4.rotateY(mat4.translation(origin), rad);

sample/skinnedMesh/main.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -2,7 +2,7 @@ import { GUI } from 'dat.gui';
  
    import { convertGLBToJSONAndBinary, GLTFSkin } from './glbUtils';

    import gltfWGSL from './gltf.wgsl';

    import gridWGSL from './grid.wgsl';

    import { Mat4, mat4, quat, vec3 } from 'wgpu-matrix';

    import { Mat4, mat4, quat } from 'wgpu-matrix';

    import { createBindGroupCluster } from '../bitonicSort/utils';

    import {

      createSkinnedGridBuffers,

    @@ -323,17 +323,17 @@ function getViewMatrix() {
  
      if (settings.object === 'Skinned Grid') {

        mat4.translate(

          viewMatrix,

          vec3.fromValues(

          [

            settings.cameraX * settings.objectScale,

            settings.cameraY * settings.objectScale,

            settings.cameraZ

          ),

            settings.cameraZ,

          ],

          viewMatrix

        );

      } else {

        mat4.translate(

          viewMatrix,

          vec3.fromValues(settings.cameraX, settings.cameraY, settings.cameraZ),

          [settings.cameraX, settings.cameraY, settings.cameraZ],

          viewMatrix

        );

      }

    @@ -342,11 +342,11 @@ function getViewMatrix() {
  
    function getModelMatrix() {

      const modelMatrix = mat4.identity();

      const scaleVector = vec3.fromValues(

      const scaleVector = [

        settings.objectScale,

        settings.objectScale,

        settings.objectScale

      );

        settings.objectScale,

      ];

      mat4.scale(modelMatrix, scaleVector, modelMatrix);

      if (settings.object === 'Whale') {

        mat4.rotateY(modelMatrix, (Date.now() / 1000) * 0.5, modelMatrix);

    @@ -389,9 +389,9 @@ const skinnedGridRenderPassDescriptor: GPURenderPassDescriptor = {
  
    const animSkinnedGrid = (boneTransforms: Mat4[], angle: number) => {

      const m = mat4.identity();

      mat4.rotateZ(m, angle, boneTransforms[0]);

      mat4.translate(boneTransforms[0], vec3.create(4, 0, 0), m);

      mat4.translate(boneTransforms[0], [4, 0, 0], m);

      mat4.rotateZ(m, angle, boneTransforms[1]);

      mat4.translate(boneTransforms[1], vec3.create(4, 0, 0), m);

      mat4.translate(boneTransforms[1], [4, 0, 0], m);

      mat4.rotateZ(m, angle, boneTransforms[2]);

    };

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simplify vec3 usage. #554

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!