redcamel / RedGPU

RedGPU - Javascript WebGPU Library

Home Page:https://redcamel.github.io/RedGPU/examples/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to render multi-views?

laobel opened this issue · comments

Hi, your code helps me a lot,But now a lot of APIs is deprecated. I have a question for you.
How to render multi-views? Can you give me a simple demo? Thank you very much.
I try the following code, but only render the last command!
class Renderer {
sceneView;

constructor(sceneView) {
this.sceneView = sceneView;
}

frame() {

let gpuCommands = [];

for (let i = 0, len = this.sceneView.viewList.length; i < len; i++) {
    let viewport = this.sceneView.viewList[i];

    viewport.preRender.raiseEvent();

    //gpuCommands.splice(0,0,this.renderViewport(viewport));
    gpuCommands.push(this.renderViewport(viewport));

    viewport.postRender.raiseEvent();
}

this.sceneView.device.queue.submit(gpuCommands);

}

renderViewport(viewport) {
// CAMERA BUFFER
const cameraViewProjectionMatrix = viewport.camera.getCameraViewProjMatrix();
this.sceneView.device.queue.writeBuffer(
viewport.cameraUniformBuffer,
0,
cameraViewProjectionMatrix.buffer,
cameraViewProjectionMatrix.byteOffset,
cameraViewProjectionMatrix.byteLength
);

viewport.renderPassDescriptor.colorAttachments[0].view = this.sceneView.swapChain.getCurrentTexture().createView();


const commandEncoder = this.sceneView.device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass(viewport.renderPassDescriptor);

passEncoder.setViewport(viewport.viewRect.x, viewport.viewRect.y, viewport.viewRect.width, viewport.viewRect.height, 0, 1);
passEncoder.setScissorRect(viewport.viewRect.x, viewport.viewRect.y, viewport.viewRect.width, viewport.viewRect.height);

for (let object of viewport.scene.Primitives) {
    object.draw(passEncoder, this.sceneView.device, viewport.camera)
}

passEncoder.endPass();

return commandEncoder.finish();

}
}