WEBGPU学习之通过javascript代码修改顶点着色器的顶点数据。

1.WEBGPU学习之通过javascript代码修改顶点着色器的顶点数据。

1. 创建缓冲区
2. 向缓冲区中写入数据
3. 配置渲染管线buffer
4. 向渲染通过配置buffer (暂时瞎起的名字)

2.创建缓冲区

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

解释 :

• 5. size : 表示这个缓冲区的大小，单位是字节，vertex是我们需要向这个缓冲区写入的数据，所以我们设置这个缓冲区的大小为vertex.byteLength。表示就是这个vertex的字节。
• 6. usage: 表示的就是这个缓冲区的用途。

3. 向缓冲区中写入数据

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

解释 :
参数1：就是需要写入的缓冲区
参数2：偏移值(单位也是字节)，就是从那个位置开始
参数3 : 这个是写入的数据

4. 配置渲染管线buffer

在创建渲染管线时，需要对对应的着色器配置使用的buffer（先简单这么理解）

let vertex = {
	module: device.createShaderModule({
		code: positionVert
	}),
	entryPoint: 'main',
	// 接下来就是配置buffer
	buffer: [{
		arrayStride: 3 * 4 // 表示将多少位一组，分配给一个顶点，单位也是字节
		attributes:[{
			shaderLocation: 0,
			offset: 0, //这个也是偏移量
			format: 'float32x3' // 表示数据的格式
		}]
	}]
}

5.在渲染通道中设置对应的buffer

passEncoder.setVertexBuffer(0, vertexBuffer)