Slide 39
Slide 39 text
render pipeline
Fragment Shader (WGSL)
@group(0) @binding(0) var mySampler: sampler;
@group(0) @binding(1) var myTexture: texture_2d;
@fragment
fn main(@location(0) uv: vec2) -> @location(0) vec4 {
return textureSample(myTexture, mySampler, uv);
}
パイプラインやパスの構築
const pipeline = device.createRenderPipeline({
layout: "auto",
vertex: { … },
fragment: { … },
});
const sampler = device.createSampler();
const mandelbrot = createMandelbrotTexture(device);
const bindGroup = device.createBindGroup({
layout: pipeline.getBindGroupLayout(0),
entries: [
{ binding: 0, resource: sampler }
{ binding: 1,
resource: mandelbrot.texture.createView() }
]
});
…
pass.setPipeline(pipeline);
pass.setBindGroup(0, bindGroup);
pass.draw(4);
Vertex Shader (WGSL)
const POS = array, 4>(
vec2(-1.0, -1.0), vec2(1.0, -1.0),
vec2(-1.0, 1.0), vec2(1.0, 1.0),
);
const UV = array, 4>(
vec2(0.0, 0.0), vec2(1.0, 0.0),
vec2(0.0, 1.0), vec2(1.0, 1.0),
);
struct VertexOutput {
@builtin(position) position: vec4,
@location(0) uv: vec2,
}
@vertex
fn main(@builtin(vertex_index) i : u32) -> VertexOutput {
var output: VertexOutput;
output.position = vec4(POS[i], 0.0, 1.0);
output.uv = UV[i];
return output;
}
四角形を描くので 4頂点