110 lines
2.8 KiB
JavaScript
110 lines
2.8 KiB
JavaScript
import { getPath } from "./common.js";
|
|
|
|
class FlatRenderer {
|
|
constructor(device, canvasFormat, viewUniformBuffer, shaderModule)
|
|
{
|
|
const label = "flat";
|
|
|
|
//////////////////////////////////////////////////////////////////////
|
|
// buffer
|
|
//////////////////////////////////////////////////////////////////////
|
|
|
|
const array = new Uint16Array(6);
|
|
array[0] = 0;
|
|
array[1] = 1;
|
|
array[2] = 2;
|
|
array[3] = 0;
|
|
array[4] = 3;
|
|
array[5] = 1;
|
|
|
|
this.buffer = device.createBuffer({
|
|
label: `${label} renderer buffer`,
|
|
size: array.byteLength,
|
|
usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
|
|
});
|
|
|
|
device.queue.writeBuffer(this.buffer, 0, array, 0, array.length);
|
|
|
|
//////////////////////////////////////////////////////////////////////
|
|
// pipeline
|
|
//////////////////////////////////////////////////////////////////////
|
|
|
|
const bindGroupLayouts = [
|
|
device.createBindGroupLayout({
|
|
label: `${label} view matrix bind group layout`,
|
|
entries: [{
|
|
binding: 0,
|
|
visibility: GPUShaderStage.VERTEX,
|
|
buffer: { type: "uniform" }
|
|
}]
|
|
}),
|
|
];
|
|
|
|
const pipelineLayout = device.createPipelineLayout({
|
|
label: `${label} pipeline layout`,
|
|
bindGroupLayouts: bindGroupLayouts,
|
|
});
|
|
|
|
this.renderPipeline = device.createRenderPipeline({
|
|
label: `${label} pipeline`,
|
|
layout: pipelineLayout,
|
|
vertex: {
|
|
module: shaderModule,
|
|
entryPoint: "vertexMain",
|
|
},
|
|
fragment: {
|
|
module: shaderModule,
|
|
entryPoint: "fragmentMain",
|
|
targets: [{
|
|
format: canvasFormat,
|
|
}]
|
|
},
|
|
primitive: {
|
|
topology: "triangle-list",
|
|
},
|
|
depthStencil: {
|
|
depthWriteEnabled: true,
|
|
depthCompare: "less",
|
|
format: "depth24plus",
|
|
},
|
|
});
|
|
|
|
//////////////////////////////////////////////////////////////////////
|
|
// bind group
|
|
//////////////////////////////////////////////////////////////////////
|
|
|
|
this.bindGroups = [
|
|
device.createBindGroup({
|
|
label: `${label} bind group`,
|
|
layout: bindGroupLayouts[0],
|
|
entries: [{
|
|
binding: 0,
|
|
resource: { buffer: viewUniformBuffer },
|
|
}],
|
|
}),
|
|
];
|
|
}
|
|
|
|
render(renderPass)
|
|
{
|
|
renderPass.setPipeline(this.renderPipeline);
|
|
renderPass.setIndexBuffer(this.buffer, "uint16");
|
|
renderPass.setBindGroup(0, this.bindGroups[0]);
|
|
renderPass.drawIndexed(6);
|
|
}
|
|
}
|
|
|
|
async function loadFlat(device, canvasFormat, viewUniformBuffer)
|
|
{
|
|
const flatWgsl = await getPath("flat.wgsl");
|
|
const shaderModule = device.createShaderModule({
|
|
label: "flag shader",
|
|
code: flatWgsl,
|
|
});
|
|
|
|
const renderer = new FlatRenderer(device, canvasFormat, viewUniformBuffer, shaderModule);
|
|
return renderer;
|
|
}
|
|
|
|
export { loadFlat };
|