eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-14 12:29:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Creating stump render bundle array. This is how WebGPU command buffers are created and executed.

Browse Source
This commit is contained in:
Rezmason
2021-10-24 06:24:47 -07:00
parent 6b317af0bb
commit 3cb20139c4
2 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
js/webgpu_main.js
View File

@@ -13,11 +13,12 @@ export default async (canvas, config) => {
const adapter = await navigator.gpu.requestAdapter(); const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice(); const device = await adapter.requestDevice();
const canvasContext = canvas.getContext("webgpu"); const canvasContext = canvas.getContext("webgpu");
const presentationFormat = canvasContext.getPreferredFormat(adapter);
const queue = device.queue; const queue = device.queue;
const canvasConfig = { const canvasConfig = {
device, device,
format: canvasContext.getPreferredFormat(adapter), format: presentationFormat,
size: getCanvasSize(canvas), size: getCanvasSize(canvas),
}; };
@@ -37,6 +38,13 @@ export default async (canvas, config) => {
// TODO: create pipelines, bind groups, shaders // TODO: create pipelines, bind groups, shaders
const bundleEncoder = device.createRenderBundleEncoder({
colorFormats: [presentationFormat],
});
// TODO: create render bundle(s)
const bundle = bundleEncoder.finish();
const renderBundles = [bundle];
const frame = (now) => { const frame = (now) => {
const canvasSize = getCanvasSize(canvas); const canvasSize = getCanvasSize(canvas);
if (canvasSize[0] !== canvasConfig.size[0] || canvasSize[1] !== canvasConfig.size[1]) { if (canvasSize[0] !== canvasConfig.size[0] || canvasSize[1] !== canvasConfig.size[1]) {
@@ -50,19 +58,16 @@ export default async (canvas, config) => {
// TODO: update the uniforms that change, write to queue // TODO: update the uniforms that change, write to queue
// TODO: passes and pipelines
renderPassConfig.colorAttachments[0].loadValue.g = Math.sin((now / 1000) * 2) / 2 + 0.5; renderPassConfig.colorAttachments[0].loadValue.g = Math.sin((now / 1000) * 2) / 2 + 0.5;
renderPassConfig.colorAttachments[0].view = canvasContext.getCurrentTexture().createView(); renderPassConfig.colorAttachments[0].view = canvasContext.getCurrentTexture().createView();
const encoder = device.createCommandEncoder(); const encoder = device.createCommandEncoder();
const renderPass = encoder.beginRenderPass(renderPassConfig); const renderPass = encoder.beginRenderPass(renderPassConfig);
renderPass.executeBundles(renderBundles);
renderPass.endPass(); renderPass.endPass();
const commandBuffer = encoder.finish(); const commandBuffer = encoder.finish();
queue.submit([commandBuffer]); queue.submit([commandBuffer]);
// TODO: Record this, so it doesn't have to be reencoded
requestAnimationFrame(frame); requestAnimationFrame(frame);
}; };

3
webgpu_notes.txt
View File

@@ -37,3 +37,6 @@ You DO need a canvas to display what you're rendering
Textures were never resizable, you simply forgot Textures were never resizable, you simply forgot
Screen-size textures have to be destroyed and recreated Screen-size textures have to be destroyed and recreated
Transfer the data over if you need to Transfer the data over if you need to
Bind groups let you bind a bunch of resources at once
Render bundles let you reissue commands