Use GPUBuffer in GPUBindingResource

package.json

@@ -42,7 +42,7 @@
     "@types/showdown": "^2.0.6",
     "@types/stats.js": "^0.17.3",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@webgpu/types": "^0.1.53",
+    "@webgpu/types": "^0.1.61",
     "chokidar": "^4.0.3",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^8.10.0",

sample/a-buffer/main.ts

@@ -448,21 +448,15 @@ const configure = () => {
     entries: [
       {
         binding: 0,
-        resource: {
-          buffer: uniformBuffer,
-        },
+        resource: uniformBuffer,
       },
       {
         binding: 1,
-        resource: {
-          buffer: headsBuffer,
-        },
+        resource: headsBuffer,
       },
       {
         binding: 2,
-        resource: {
-          buffer: linkedListBuffer,
-        },
+        resource: linkedListBuffer,
       },
       {
         binding: 3,
@@ -484,21 +478,15 @@ const configure = () => {
     entries: [
       {
         binding: 0,
-        resource: {
-          buffer: uniformBuffer,
-        },
+        resource: uniformBuffer,
       },
       {
         binding: 1,
-        resource: {
-          buffer: headsBuffer,
-        },
+        resource: headsBuffer,
       },
       {
         binding: 2,
-        resource: {
-          buffer: linkedListBuffer,
-        },
+        resource: linkedListBuffer,
       },
       {
         binding: 3,

sample/blending/main.ts

@@ -194,7 +194,7 @@ const srcBindGroupUnpremultipliedAlpha = device.createBindGroup({
   entries: [
     { binding: 0, resource: sampler },
     { binding: 1, resource: srcTextureUnpremultipliedAlpha.createView() },
-    { binding: 2, resource: { buffer: srcUniform.buffer } },
+    { binding: 2, resource: srcUniform.buffer },
   ],
 });
 
@@ -203,7 +203,7 @@ const dstBindGroupUnpremultipliedAlpha = device.createBindGroup({
   entries: [
     { binding: 0, resource: sampler },
     { binding: 1, resource: dstTextureUnpremultipliedAlpha.createView() },
-    { binding: 2, resource: { buffer: dstUniform.buffer } },
+    { binding: 2, resource: dstUniform.buffer },
   ],
 });
 
@@ -212,7 +212,7 @@ const srcBindGroupPremultipliedAlpha = device.createBindGroup({
   entries: [
     { binding: 0, resource: sampler },
     { binding: 1, resource: srcTexturePremultipliedAlpha.createView() },
-    { binding: 2, resource: { buffer: srcUniform.buffer } },
+    { binding: 2, resource: srcUniform.buffer },
   ],
 });
 
@@ -221,7 +221,7 @@ const dstBindGroupPremultipliedAlpha = device.createBindGroup({
   entries: [
     { binding: 0, resource: sampler },
     { binding: 1, resource: dstTexturePremultipliedAlpha.createView() },
-    { binding: 2, resource: { buffer: dstUniform.buffer } },
+    { binding: 2, resource: dstUniform.buffer },
   ],
 });
 

sample/cameras/main.ts

@@ -155,20 +155,9 @@ const sampler = device.createSampler({
 const uniformBindGroup = device.createBindGroup({
   layout: pipeline.getBindGroupLayout(0),
   entries: [
-    {
-      binding: 0,
-      resource: {
-        buffer: uniformBuffer,
-      },
-    },
-    {
-      binding: 1,
-      resource: sampler,
-    },
-    {
-      binding: 2,
-      resource: cubeTexture.createView(),
-    },
+    { binding: 0, resource: uniformBuffer },
+    { binding: 1, resource: sampler },
+    { binding: 2, resource: cubeTexture.createView() },
   ],
 });
 

sample/computeBoids/main.ts

@@ -228,28 +228,9 @@ for (let i = 0; i < 2; ++i) {
   particleBindGroups[i] = device.createBindGroup({
     layout: computePipeline.getBindGroupLayout(0),
     entries: [
-      {
-        binding: 0,
-        resource: {
-          buffer: simParamBuffer,
-        },
-      },
-      {
-        binding: 1,
-        resource: {
-          buffer: particleBuffers[i],
-          offset: 0,
-          size: initialParticleData.byteLength,
-        },
-      },
-      {
-        binding: 2,
-        resource: {
-          buffer: particleBuffers[(i + 1) % 2],
-          offset: 0,
-          size: initialParticleData.byteLength,
-        },
-      },
+      { binding: 0, resource: simParamBuffer },
+      { binding: 1, resource: particleBuffers[i] },
+      { binding: 2, resource: particleBuffers[(i + 1) % 2] },
     ],
   });
 }

sample/cornell/common.ts

@@ -55,20 +55,12 @@ export default class Common {
         {
           // common_uniforms
           binding: 0,
-          resource: {
-            buffer: this.uniformBuffer,
-            offset: 0,
-            size: this.uniformBuffer.size,
-          },
+          resource: this.uniformBuffer,
         },
         {
           // quads
           binding: 1,
-          resource: {
-            buffer: quads,
-            offset: 0,
-            size: quads.size,
-          },
+          resource: quads,
         },
       ],
     });

sample/cornell/radiosity.ts

@@ -111,10 +111,7 @@ export default class Radiosity {
         {
           // accumulation buffer
           binding: 0,
-          resource: {
-            buffer: this.accumulationBuffer,
-            size: this.accumulationBuffer.size,
-          },
+          resource: this.accumulationBuffer,
         },
         {
           // lightmap
@@ -124,10 +121,7 @@ export default class Radiosity {
         {
           // radiosity_uniforms
           binding: 2,
-          resource: {
-            buffer: this.uniformBuffer,
-            size: this.uniformBuffer.size,
-          },
+          resource: this.uniformBuffer,
         },
       ],
     });

sample/cubemap/main.ts

@@ -158,11 +158,7 @@ const uniformBindGroup = device.createBindGroup({
   entries: [
     {
       binding: 0,
-      resource: {
-        buffer: uniformBuffer,
-        offset: 0,
-        size: uniformBufferSize,
-      },
+      resource: uniformBuffer,
     },
     {
       binding: 1,

sample/deferredRendering/main.ts

@@ -334,36 +334,17 @@ const cameraUniformBuffer = device.createBuffer({
 const sceneUniformBindGroup = device.createBindGroup({
   layout: writeGBuffersPipeline.getBindGroupLayout(0),
   entries: [
-    {
-      binding: 0,
-      resource: {
-        buffer: modelUniformBuffer,
-      },
-    },
-    {
-      binding: 1,
-      resource: {
-        buffer: cameraUniformBuffer,
-      },
-    },
+    { binding: 0, resource: modelUniformBuffer },
+    { binding: 1, resource: cameraUniformBuffer },
   ],
 });
 
 const gBufferTexturesBindGroup = device.createBindGroup({
   layout: gBufferTexturesBindGroupLayout,
   entries: [
-    {
-      binding: 0,
-      resource: gBufferTextureViews[0],
-    },
-    {
-      binding: 1,
-      resource: gBufferTextureViews[1],
-    },
-    {
-      binding: 2,
-      resource: gBufferTextureViews[2],
-    },
+    { binding: 0, resource: gBufferTextureViews[0] },
+    { binding: 1, resource: gBufferTextureViews[1] },
+    { binding: 2, resource: gBufferTextureViews[2] },
   ],
 });
 
@@ -431,21 +412,15 @@ const lightsBufferBindGroup = device.createBindGroup({
   entries: [
     {
       binding: 0,
-      resource: {
-        buffer: lightsBuffer,
-      },
+      resource: lightsBuffer,
     },
     {
       binding: 1,
-      resource: {
-        buffer: configUniformBuffer,
-      },
+      resource: configUniformBuffer,
     },
     {
       binding: 2,
-      resource: {
-        buffer: cameraUniformBuffer,
-      },
+      resource: cameraUniformBuffer,
     },
   ],
 });
@@ -454,21 +429,15 @@ const lightsBufferComputeBindGroup = device.createBindGroup({
   entries: [
     {
       binding: 0,
-      resource: {
-        buffer: lightsBuffer,
-      },
+      resource: lightsBuffer,
     },
     {
       binding: 1,
-      resource: {
-        buffer: configUniformBuffer,
-      },
+      resource: configUniformBuffer,
     },
     {
       binding: 2,
-      resource: {
-        buffer: lightExtentBuffer,
-      },
+      resource: lightExtentBuffer,
     },
   ],
 });

sample/fractalCube/main.ts

@@ -127,20 +127,9 @@ const sampler = device.createSampler({
 const uniformBindGroup = device.createBindGroup({
   layout: pipeline.getBindGroupLayout(0),
   entries: [
-    {
-      binding: 0,
-      resource: {
-        buffer: uniformBuffer,
-      },
-    },
-    {
-      binding: 1,
-      resource: sampler,
-    },
-    {
-      binding: 2,
-      resource: cubeTexture.createView(),
-    },
+    { binding: 0, resource: uniformBuffer },
+    { binding: 1, resource: sampler },
+    { binding: 2, resource: cubeTexture.createView() },
   ],
 });
 

sample/gameOfLife/main.ts

@@ -169,18 +169,18 @@ function resetGameData() {
   const bindGroup0 = device.createBindGroup({
     layout: bindGroupLayoutCompute,
     entries: [
-      { binding: 0, resource: { buffer: sizeBuffer } },
-      { binding: 1, resource: { buffer: buffer0 } },
-      { binding: 2, resource: { buffer: buffer1 } },
+      { binding: 0, resource: sizeBuffer },
+      { binding: 1, resource: buffer0 },
+      { binding: 2, resource: buffer1 },
     ],
   });
 
   const bindGroup1 = device.createBindGroup({
     layout: bindGroupLayoutCompute,
     entries: [
-      { binding: 0, resource: { buffer: sizeBuffer } },
-      { binding: 1, resource: { buffer: buffer1 } },
-      { binding: 2, resource: { buffer: buffer0 } },
+      { binding: 0, resource: sizeBuffer },
+      { binding: 1, resource: buffer1 },
+      { binding: 2, resource: buffer0 },
     ],
   });
 
@@ -210,11 +210,7 @@ function resetGameData() {
     entries: [
       {
         binding: 0,
-        resource: {
-          buffer: sizeBuffer,
-          offset: 0,
-          size: 2 * Uint32Array.BYTES_PER_ELEMENT,
-        },
+        resource: sizeBuffer,
       },
     ],
   });

sample/generateMipmap/main.ts

@@ -189,7 +189,7 @@ const objects = textures.map(({ texture, viewDimension }) => {
   const bindGroup = device.createBindGroup({
     layout: pipeline.getBindGroupLayout(0),
     entries: [
-      { binding: 0, resource: { buffer: uniformBuffer } },
+      { binding: 0, resource: uniformBuffer },
       { binding: 1, resource: sampler },
       {
         binding: 2,