代碼見：https://github.com/onsummer/my-dev-notes/tree/master/webgpu-Notes/05-uniform-color
原創，發布日 2021年4月6日，@秋意正寒，若代碼失效請留言，或自行到官網根據最新 API 修改，
簡介
這個案例演示 uniform 資料如何傳入著色器，
以一個綠色值為例，直接傳遞到片元著色器，令所有顏色為 vec4<f32>(0.0, 0.5, 0.0, 1.0)
1 創建 uniform buffer
const uniformBufferSize = 4 * 4 // vec4<f32>，即 16 byte
const uniformBuffer = device.createBuffer({
size: uniformBufferSize,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
})
/* 創建系結組物件，細節參考上篇 */
const uniformBindGroup = device.createBindGroup({
layout: bindGroupLayout, // <- 直接傳遞 系結組布局物件，它是什么請參考上一篇
entries: [
{
binding: 0,
resource: { // <- 指定資源型別為 buffer，并傳入 GPUBuffer 型別的物件
buffer: uniformBuffer
}
}
]
})
/* 創建型別陣列，并寫入 GPUBuffer */
const uniformColor = new Float32Array([0.0, 0.5, 0.0, 1.0])
device.queue.writeBuffer(uniformBuffer, 0, uniformColor.buffer, uniformColor.byteOffset, uniformColor.byteLength)
2 修改著色器
在著色器中，需要借助一個 block 的東西，宣告一個結構體，從結構體中拿到顏色值，
具體原因不明，后續查資料，
注意此例中 vbo 只有坐標，所以 pipeline 中頂點、片元階段的 buffers 屬性中的值，都要跟著修改，不贅述，請讀者參考第 2 篇，
頂點著色器
[[builtin(position)]] var<out> out_position: vec4<f32>;
[[location(0)]] var<in> in_position_2d: vec2<f32>;
[[stage(vertex)]]
fn main() -> void {
out_position = vec4<f32>(in_position_2d, 0.0, 1.0);
return;
}
片元著色器
// 宣告一個結構體型別，其包含一個我們需要的顏色欄位
[[block]] struct Uniforms {
uniform_color: vec4<f32>;
};
// 宣告一個結構體變數，將其系結到 js 代碼中系結組的第 0 個資源值
[[binding(0), group(0)]] var<uniform> uniforms: Uniforms;
[[location(0)]] var<out> outColor: vec4<f32>;
[[stage(fragment)]]
fn main() -> void {
outColor = uniforms.uniform_color; // <- 從 uniform 里取一個顏色值
return;
}
END
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/273159.html
標籤：其他