跳到主要内容

相机通道

每台相机以一组帧通道渲染其在帧图中的部分。默认是引擎为渲染相机图层而创建的通道。你可以在其前后添加自定义通道,也可以替换默认通道。

相机的通道​

每台相机按以下顺序渲染三组通道,全部完成后才开始下一台相机:

  • 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 图层渲染到纹理,再由着色器四边形通道着色后绘制到屏幕。

相机渲染通道

相机后置列表中的计算通道为其渲染颜色构建直方图。

直方图