WebGPU学习-顶点插槽&资源绑定（二）

美名其曰：将WGSL着色器语言中的变量交给JS控制，实现动态修改视图

一、JS控制顶点插槽

1. 创建顶点数据

const vertex = new Float32Array([
    0.0, 0.5, 0.0,  
    -0.5, -0.5, 0.0,  
    0.5, -0.5, 0.0
])

2. 创建顶点缓冲区

const vertexBuffer = device.createBuffer({
    size: vertex.byteLength,
    usage:GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
})

3. 将顶点数据写入到顶点缓冲区

device.queue.writeBuffer(vertexBuffer, 0, vertex)

4. 在创建渲染管线时在vertex字段中加入buffers

const pipeline = device.createRenderPipeline({
    ...
    vertex:{
        module:device.createShaderModule({code}),
        entryPoint:"main",
        buffers:[{
            arrayStride:3*4,
            attributes:[{
                shaderLocation:0,
                offset:0,
                format:"float32x3"
            }]
        }]
    }
    ...
})

5. 在renderPass.setPipeline(pipeline)之后renderPass.draw(3)之前，设置顶点缓冲

renderPass.setVertexBuffer(0,vertexBuffer)

二、JS控制着色器

1. 创建着色器数据

const color = new Float32Array([1,0,0,1])

2. 创建着色器缓冲区

const colorBuffer = device.createBuffer({
    size: color.byteLength,
    usage:GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
})

3. 将着色器数据写入着色缓冲区

device.queue.writeBuffer(colorBuffer, 0, color)

4. 在调用device.createRenderPipeline()创建pipeline之后创建绑定wgsl语言中group对应的对象

const group = device.createBindGroup({
    layout:pipeline.getBindGroup(0),
    entries:[{
        binding:0,
        resource:{
            buffer:colorBuffer
        }
    }]
})

5. 在调用beginRenderPass()创建并调用renderPass.setPipeline()之后renderPass.draw()之前绑定着色器

...
renderPass.setBindGroup(group)
...