相机通道
每台相机以一组帧通道渲染其在帧图中的部分。默认是引擎为渲染相机图层而创建的通道。你可以在其前后添加自定义通道,也可以替换默认通道。
相机的通道
每台相机按以下顺序渲染三组通道,全部完成后才开始下一台相机:
beforePasses在相机渲染场景之前执行。- 相机主体渲染使用默认方式,或使用
framePasses中的通道。 afterPasses在相机所有渲染内容之后执行。
前置通道
CameraComponent#beforePasses 中的通道在相机的平行光阴影贴图之后、场景之前渲染。适合向场景材质读取的纹理渲染,或运行结果供同帧场景使用的计算着色器。
它们不能包含渲染相机图层的通道,例如 RenderPassForward。一帧渲染多个 XR 视图时,它们对每个视图执行;计算通道例外,只在其 xrViewIndex 指定的视图中执行。
后置通道
CameraComponent#afterPasses 中的通道在该帧相机的所有渲染完成后执行,包括其帧通道。适合在同帧处理相机渲染结果,例如使用计算通道读取颜色贴图。渲染多个 XR 视图时,它们在所有视图之后执行一次。
替换相机渲染
CameraComponent#framePasses 中的通道按数组顺序替代相机默认渲染。通过它们,你决定哪些图层渲染到哪些目标,以及哪些通道处理结果。通常其中包含一个 RenderPassForward,用相机渲染场景图层。
这里,前向通道将场景渲染到纹理,再由着色器四边形通道将其着色后绘制到屏幕:
// a texture the size of the back buffer, which the scene renders into
const texture = new Texture(app.graphicsDevice, {
name: 'SceneTexture',
width: 4,
height: 4,
format: PIXELFORMAT_RGBA8,
mipmaps: false,
minFilter: FILTER_LINEAR,
magFilter: FILTER_LINEAR,
addressU: ADDRESS_CLAMP_TO_EDGE,
addressV: ADDRESS_CLAMP_TO_EDGE
});
const renderTarget = new RenderTarget({ colorBuffer: texture, depth: true });
// render the world and the UI layers into the texture, resized to the back buffer each frame
const scenePass = new RenderPassForward(app.graphicsDevice, app.scene, cameraEntity.camera);
scenePass.name = 'ScenePass';
scenePass.init(renderTarget, { resizeSource: null });
scenePass.addLayer(worldLayer, false);
scenePass.addLayer(uiLayer, true);
// draw the texture to the screen, tinted
const tintPass = new TintPass(app.graphicsDevice, texture);
tintPass.init(null);
cameraEntity.camera.framePasses = [scenePass, tintPass];
将 framePasses 设为 null,即可恢复相机默认渲染。
相机的前置和后置通道仍围绕其帧通道执行。前置通道在首个渲染相机图层的帧通道之前执行;如果没有这样的通道,则不执行。后置通道在所有帧通道之后执行。
相机也可以通过多个前向通道渲染图层,例如先渲染不透明图层,再用自定义通道读取其结果,最后渲染透明图层。
添加和移除通道
向数组添加通道即可启用渲染,从数组移除即可停止。相机不会销毁通道,因此移除后应销毁通道,再销毁它的渲染目标:
const pass = new MyPass(app.graphicsDevice);
pass.name = 'MyPass';
cameraEntity.camera.afterPasses.push(pass);
// when no longer needed, remove the pass and destroy it
const passes = cameraEntity.camera.afterPasses;
passes.splice(passes.indexOf(pass), 1);
pass.destroy();
示例
相机通过帧通道渲染:前向通道将世界和 UI 图层渲染到纹理,再由着色器四边形通道着色后绘制到屏幕。
相机后置列表中的计算通道为其渲染颜色构建直方图。