Question about wireframes and multiple index buffers

[qq1792569310]

I'm working on a model preview program and two problems are bothering me right now, so forgive me for asking here because I can't find a direct solution on other sites.

One of the problems is: my model uses custom indexing to combine vertices into triangles, all vertices are divided into polygon groups, and each polygon group has its own array of vertex coordinates and index array.
But I found that webgpu's GPURenderPassEncoder.setIndexBuffer function can only set one vertex index buffer, my current thinking is to build multiple GPUCommandEncoders and render each polygon group separately, but I haven't tried it yet, and I'm wondering if there is a simpler solution, and if not, whether my solution is feasible.

Another problem is: I can't seem to choose to render out only the wireframe of the model with the topology: 'triangle-list' mode selected, I tried the topology: 'line-list' mode, which displays the wireframe of the model, but this mode is described as: front and back vertices are connected, and this description It seems to imply that the vertices of my model will not form triangles in the correct order, I'm wondering if there is an easy way to make my model show only wireframes in topology: 'triangle-list' mode, and if I can only implement my idea in topology: 'line-list' mode, do I need to change the vertex index array?

English is not my native language and I might have missed the answer location, if you can answer me or tell me where I can find the answer to my question, both can help.

Looking forward to your replies!

[qq1792569310]

I just asked ai about the first multi-indexed array problem and it seems to be solved by passing the coding command

renderPass.setVertexBuffer(0, polygonGroup1VertexBuffer);
renderPass.setIndexBuffer(polygonGroup1IndexBuffer, 'uint16');
renderPass.drawIndexed(polygonGroup1IndexCount, 1, 0, 0, 0);

renderPass.setVertexBuffer(1, polygonGroup2VertexBuffer);
renderPass.setIndexBuffer(polygonGroup2IndexBuffer, 'uint16');
renderPass.drawIndexed(polygonGroup2IndexCount, 1, 0, 0, 0);
``.`

[greggman]

If you want to do your own indexing you'd probably need to put your vertex data into storage buffers instead of vertex buffers. Then you can index them however you want to.

For wire-frame there are multiple issues

(1) You probably need different shaders instead of just changing the topology.

(2) WebGPU only supports 1 pixel wide textures. If you want thicker lines you'll need some other technique. There are suggestions in this article.

[qq1792569310]

I don't know much about shaders.
To implement wireframes I may need to disable color interpolation? I looked it up in the tutorial corresponding to this project and set the return value of the color to @interpolate(flat), but it didn't work, here is my code ......

@fragment
fn main() -> @location(0) @interpolate(flat) vec4<f32> 
{
    return vec4<f32>(1.0,1.0,0.0,1.0);
}

The linked tutorial is a webgl implementation, in fact, I have a version of the webgl implementation for my project, but I've looked at the source code and it seems to be implemented by modifying the vertex indexes as well, so it looks like I'm going to have to think about displaying the model wireframe in webgpu this way as well!

createWireframeBuffer(index: number): void {
    const faces = this.model.Geosets[index].Faces; //index Array
    const lines = new Uint16Array(faces.length * 2); // change index Array for Wireframe index Array

    for (let i = 0; i < faces.length; i += 3) {
      lines[i * 2] = faces[i];
      lines[i * 2 + 1] = faces[i + 1];
      lines[i * 2 + 2] = faces[i + 1];
      lines[i * 2 + 3] = faces[i + 2];
      lines[i * 2 + 4] = faces[i + 2];
      lines[i * 2 + 5] = faces[i];
    }

    this.wireframeIndexBuffer[index] = this.gl.createBuffer();
    this.gl.bindBuffer(
      this.gl.ELEMENT_ARRAY_BUFFER,
      this.wireframeIndexBuffer[index]
    );
    this.gl.bufferData(
      this.gl.ELEMENT_ARRAY_BUFFER,
      lines,
      this.gl.STATIC_DRAW
    );
  }

[greggman]

It is common to have to re-make vertices for drawing wireframes. But, like I said, if you put your vertex data in a storage buffer, then you can index it however you want. I put up an example here

https://jsgist.org/?src=4e741a29abc629586b99ef07f09693eb

The buffer the vertices are in is marked as both GPUBufferUsage.VERTEX and GPUBufferUsage.STORAGE

The important part is the vertex shader for wireframes.

    struct Uniforms {
      world: mat4x4f,
      color: vec4f,
    };

    struct SharedUniforms {
      viewProjection: mat4x4f,
      lightDirection: vec3f,
    };

    @group(0) @binding(0) var<uniform> uni: Uniforms;
    @group(0) @binding(1) var<uniform> sharedUni: SharedUniforms;

    @group(0) @binding(2) var<storage, read> positions: array<f32>;
    @group(0) @binding(3) var<storage, read> indices: array<u32>;
    @group(0) @binding(4) var<uniform> stride: u32;

    struct MyVSOutput {
      @builtin(position) pos: vec4f,
    };

    @vertex
    fn myVSMain(@builtin(vertex_index) vNdx: u32) -> MyVSOutput {
      var vsOut: MyVSOutput;
      // indices make a triangle so for every 3 indices we need to output
      // 6 values
      let triNdx = vNdx / 6;
      // 0 1 0 1 0 1  0 1 0 1 0 1  vNdx % 2
      // 0 0 1 1 2 2  3 3 4 4 5 5  vNdx / 2
      // 0 1 1 2 2 3  3 4 4 5 5 6  vNdx % 2 + vNdx / 2
      // 0 1 1 2 2 0  0 1 1 2 2 0  (vNdx % 2 + vNdx / 2) % 3
      let vertNdx = (vNdx % 2 + vNdx / 2) % 3;
      let index = indices[triNdx * 3 + vertNdx];
      let pNdx = index * stride;
      let position = vec4f(positions[pNdx], positions[pNdx + 1], positions[pNdx + 2], 1);
      vsOut.pos = sharedUni.viewProjection * uni.world * position;
      return vsOut;
    }

    @fragment
    fn myFSMain(v: MyVSOutput) -> @location(0) vec4f {
      return uni.color;
    }

You can see it takes in position as array<f32>, that way it can index the positions 3 f32s each (because vec3f are padded to 4 f32 per entry). It also takes in indices as array<u32>

It then emits 6 vertices for each triangle

      // indices make a triangle so for every 3 indices we need to output
      // 6 values
      let triNdx = vNdx / 6;
      // 0 1 0 1 0 1  0 1 0 1 0 1  vNdx % 2
      // 0 0 1 1 2 2  3 3 4 4 5 5  vNdx / 2
      // 0 1 1 2 2 3  3 4 4 5 5 6  vNdx % 2 + vNdx / 2
      // 0 1 1 2 2 0  0 1 1 2 2 0  (vNdx % 2 + vNdx / 2) % 3
      let vertNdx = (vNdx % 2 + vNdx / 2) % 3;
      let index = indices[triNdx * 3 + vertNdx];
      let pNdx = index * stride;
      let position = vec4f(positions[pNdx], positions[pNdx + 1], positions[pNdx + 2], 1);
      vsOut.pos = sharedUni.viewProjection * uni.world * position;
      return vsOut;

If the vertices don't have any indices then you can change

  let index = indices[triNdx * 3 + vertNdx];

to

  let index = triNdx * 3 + vertNdx;

The sample assumes 32bit indices. For 16bit indices you'd have to read the indices and u32 and separate them in the shader

From

  let index = indices[triNdx * 3 + vertNdx];

to

  let indexNdx = triNdx * 3 + vertNdx;
  let twoIndices = indices[indexNdx / 2];  // indices is u32 but we want u16
  let index = select(twoIndices & 0xFFFF, twoIndices >> 16, (indexNdx & 1) == 1);