Merge remote-tracking branch 'upstream/webgpu' into webgpu

src/webgl/p5.Shader.js

@@ -984,6 +984,10 @@ class Shader {
       return;
     }
 
+    const data = this._renderer._mapUniformData
+      ? this._renderer._mapUniformData(uniform, rawData)
+      : rawData;
+
     if (uniform.isArray) {
       if (
         uniform._cachedData &&

src/webgpu/p5.RendererWebGPU.js

@@ -3,6 +3,7 @@ import { Shader } from '../webgl/p5.Shader';
 import * as constants from '../core/constants';
 import { colorVertexShader, colorFragmentShader } from './shaders/color';
 import { lineVertexShader, lineFragmentShader} from './shaders/line';
+import { materialVertexShader, materialFragmentShader } from './shaders/material';
 
 class RendererWebGPU extends Renderer3D {
   constructor(pInst, w, h, isMainCanvas, elt) {
@@ -245,10 +246,14 @@ class RendererWebGPU extends Renderer3D {
   }
 
   _finalizeShader(shader) {
-    const uniformSize = Object.values(shader.uniforms)
-      .filter(u => !u.isSampler)
-      .reduce((sum, u) => sum + u.alignedBytes, 0);
-    shader._uniformData = new Float32Array(uniformSize / 4);
+    const rawSize = Math.max(
+      0,
+      ...Object.values(shader.uniforms).map(u => u.offsetEnd)
+    );
+    const alignedSize = Math.ceil(rawSize / 16) * 16;
+    shader._uniformData = new Float32Array(alignedSize / 4);
+    shader._uniformDataView = new DataView(shader._uniformData.buffer);
+
     shader._uniformBuffer = this.device.createBuffer({
       size: alignedSize,
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
@@ -648,8 +653,6 @@ class RendererWebGPU extends Renderer3D {
   //////////////////////////////////////////////
 
   _packUniforms(shader) {
-    let offset = 0;
-    let i = 0;
     for (const name in shader.uniforms) {
       const uniform = shader.uniforms[name];
       if (uniform.isSampler) continue;