Possible Errors in WebGPU


Memory Leaks


Problems


You can found memory leaks everywhere you use memory.
When you try to acces a bigger element than elements have your array. In the WebGPU API use if you have anyone, is always from vertex or index.
Also you can try to draw more vertex than you have telling the gpu to draw more.


Solutions



To solve it, you must make sure that no index is greater than vertices.lenght.
          
  const vertices = new Float32Array([
    // Vertex 0
    -0.5, -0.5, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0,
    // Vertex 1
    0.5, -0.5, 0.0, 1.0, 1.0, 1.0, 0.0, 1.0,
    // Vertex 2
    0.5, 0.5, 0.0, 1.0, 0.0, 1.0, 1.0, 1.0,
    // Vertex 3
    -0.5, 0.5, 0.0, 1.0, 1.0, 1.0, 1.0, 1.0
  ]);

  let indices = new Uint16Array([
    0, 1, 2,
    0, 2, 3
  ]);
          
        

And doesn't try to draw more than you have. Use the prev vertex & index to example.

In case of triangle-list.

          
  // Draw
  // Configure the pass encoder
  passEncoder.setPipeline(pipeline);
  passEncoder.setBindGroup(0, bindGroup);
      
  // Draw the triangle
  passEncoder.setVertexBuffer(0, vertexBuffer);
  passEncoder.setIndexBuffer(indexBuffer, "uint16");
  passEncoder.drawIndexed(indices.length);
          
        

In case of triangle-strip.

          
  // Draw
  // Configure the pass encoder
  passEncoder.setPipeline(pipeline);
  passEncoder.setBindGroup(0, bindGroup);
      
  // Draw the triangle
  passEncoder.draw(indices.lenght);