Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@austinEng @Kangz
118 lines (92 sloc) 3.19 KB
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=600">
<title>WebGPU Triangle demo</title>
<script src="dist/utils.js"></script>
</head>
<body>
<div id="not-supported" style="display: none">WebGPU not supported! Please visit <a href="//webgpu.io">webgpu.io</a> to see the current implementation status.</div>
<canvas height=600 width=600></canvas>
<script>
if (!navigator.gpu) {
document.getElementById('not-supported').style.display = 'block';
alert('WebGPU not supported! Please visit webgpu.io to see the current implementation status.');
}
const vertexShaderGLSL = `#version 450
const vec2 pos[3] = vec2[3](vec2(0.0f, 0.5f), vec2(-0.5f, -0.5f), vec2(0.5f, -0.5f));
void main() {
gl_Position = vec4(pos[gl_VertexIndex], 0.0, 1.0);
}
`;
const fragmentShaderGLSL = `#version 450
layout(location = 0) out vec4 outColor;
void main() {
outColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
async function init() {
/* Context, Device, SwapChain */
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice({});
await Utils.ready;
const canvas = document.querySelector('canvas');
const context = canvas.getContext('gpupresent');
const swapChainFormat = "bgra8unorm";
const swapChain = context.configureSwapChain({
device,
format: swapChainFormat,
});
const pipeline = device.createRenderPipeline({
layout: device.createPipelineLayout({ bindGroupLayouts: [] }),
vertexStage: {
module: device.createShaderModule({
code: Utils.compile("v", vertexShaderGLSL),
}),
entryPoint: "main",
},
fragmentStage: {
module: device.createShaderModule({
code: Utils.compile("f", fragmentShaderGLSL),
}),
entryPoint: "main"
},
primitiveTopology: "triangle-list",
vertexInput: {
indexFormat: "uint32",
},
rasterizationState: {
frontFace: 'ccw',
cullMode: 'none',
},
colorStates: [{
format: swapChainFormat,
alphaBlend: {},
colorBlend: {},
}],
});
function frame() {
const commandEncoder = device.createCommandEncoder({});
const textureView = swapChain.getCurrentTexture().createDefaultView();
const renderPassDescriptor = {
colorAttachments: [{
loadValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
storeOp: "store",
attachment: textureView,
}],
};
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(pipeline);
passEncoder.draw(3, 1, 0, 0);
passEncoder.endPass();
device.getQueue().submit([commandEncoder.finish()]);
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
}
init();
</script>
<script data-href="https://github.com/austinEng/webgpu-samples/blob/master/hello_triangle.html"
src="https://unpkg.com/github-corners/dist/embed.min.js"></script>
</body>
</html>
You can’t perform that action at this time.