Looking for 3d Scene Rendering Demos with wgpu-matrix and webgpu-utils

[ouzhou]

After reading through the 3D mathematics chapter, I plan to try implementing 3d scene rendering using wgpu-matrix and webgpu-utils. I'm looking for a demo that implements drag-and-drop and zooming features, similar to Three.js's OrbitControls, or real use cases of wgpu-matrix. The documentation only contains tests and function parameter descriptions, so having actual use cases would be really helpful.

I found many useful examples in Gist, but unfortunately, Gist doesn't have a search function and lacks categories, making it hard to find specific examples. https://gist.github.com/greggman

---

find this
https://greggman.github.io/webgpu-utils/examples/cube-map.html

[greggman]

I don't know who is using webgpu-utils as no one speaks up. It's most useful feature is making it easy to set uniform/storage buffer data. It's second most useful feature might be making mipmaps. It's 3rd, for me, is generating some simple shapes for making a demo.

As for wgpu-matrix, many of the webgpu-samples use it.

drag-and-drop

drag-and-drop really has nothing to with either of those libraries. drag-and-drop is an HTML/JavaScript thing, not a WebGPU thing.

zoom

Zooming depends on your preference. It could mean:

• changing the field of view

  Just change the value you pass to mat4.perspective(fov, ...)

  you can see a demo of that here

• moving the camera along the z-axis

  const zAxis = vec3.getAxis(cameraMatrix, 2);
  

  Now add or subtract zAxis from your camera matrix scaled by some speed.

• changing the scale of the camera

  This is just adding a scale to the camera matrix or projection matrix

camera controls

There are some here

[ouzhou]

Thank you very much.This is what I want.
By the way, wgpu-matrix and webgpu-utils are very easy to use, reducing a lot of template code and complex memory alignment strategies