渲染纹理资源（RenderTexture）

渲染纹理是一张在 GPU 上的纹理。通常我们会把它设置到相机的 目标纹理 上，使相机照射的内容通过离屏的 frambuffer 绘制到该纹理上。一般可用于制作汽车后视镜，动态阴影等功能。

使用 RenderTexture

使用 RenderTexture 有以下两种方法：

  • 方法一：把 3D 相机照射的内容绘制到 UI 的精灵帧上

    1.   export class CaptureToWeb extends Component {
    2.       @property(Sprite)
    3.       sprite: Sprite = null;
    4.       @property(Camera)
    5.       camera: Camera = null;
    7.       protected _renderTex: RenderTexture = null;
    9.       start () {
    10.           const spriteframe = this.sprite.spriteFrame;
    11.           const sp = new SpriteFrame();
    12.           sp.reset({
    13.               originalSize: spriteframe.getOriginalSize(),
    14.               rect: spriteframe.getRect(),
    15.               offset: spriteframe.getOffset(),
    16.               isRotate: spriteframe.isRotated(),
    17.               borderTop: spriteframe.insetTop,
    18.               borderLeft: spriteframe.insetLeft,
    19.               borderBottom: spriteframe.insetBottom,
    20.               borderRight: spriteframe.insetRight,
    21.           });
    23.           const renderTex = this._renderTex = new RenderTexture();
    24.           renderTex.reset({
    25.               width: 256,
    26.               height: 256,
    27.               colorFormat: RenderTexture.PixelFormat.RGBA8888,
    28.               depthStencilFormat: RenderTexture.DepthStencilFormat.DEPTH_24_STENCIL_8
    29.           });
    30.           this.camera.targetTexture = renderTex;
    31.           sp.texture = renderTex;
    32.           this.sprite.spriteFrame = sp;
    33.           // 需要手动调用该函数，使 RenderTexture 能在各平台正确显示
    34.           this.sprite.updateMaterial();
    35.       }
    36.   }

  • 方法二：把 3D 相机照射的内容绘制到 3D 模型上

    1.   export class RenderCameraToModel extends Component {
    2.       @property(MeshRenderer)
    3.       model: MeshRenderer = null;
    5.       start () {
    6.           // Your initialization goes here.
    7.           const renderTex = new RenderTexture();
    8.           renderTex.reset({
    9.               width: 256,
    10.               height: 256,
    11.               colorFormat: RenderTexture.PixelFormat.RGBA8888,
    12.               depthStencilFormat: RenderTexture.DepthStencilFormat.DEPTH_24_STENCIL_8,
    13.           });
    14.           const cameraComp = this.getComponent(Camera);
    15.           cameraComp.targetTexture = renderTex;
    16.           const pass = this.model.material.passes[0];
    17.           // 设置 'SAMPLE_FROM_RT' 宏为 'true' 的目的是为了使 RenderTexture 在各个平台能正确显示
    18.           const defines = { SAMPLE_FROM_RT: true, ...pass.defines };
    19.           const renderMat = new Material();
    20.           renderMat.initialize({
    21.               effectAsset: this.model.material.effectAsset,
    22.               defines,
    23.           });
    24.           this.model.setMaterial(renderMat, 0);
    25.           renderMat.setProperty('mainTexture', renderTex, 0);
    26.       }
    27.   }

设置 RenderTexture 为材质贴图

将 RenderTexture 设置为材质贴图包括以下两个步骤：

  1. 在 effect 中处理 uv。判断 SAMPLE_FROM_RT，并调用 CC_HANDLE_RT_SAMPLE_FLIP 函数：

    1.  #if USE_TEXTURE
    2.      v_uv = a_texCoord * tilingOffset.xy + tilingOffset.zw;
    3.      #if SAMPLE_FROM_RT
    4.          CC_HANDLE_RT_SAMPLE_FLIP(v_uv);
    5.      #endif
    6.  #endif

  2. 在 层级管理器 中选中对应的材质，然后在 属性检查器 中勾选 SAMPLE FROM RT

    SAMPLE_FROM_RT

更多使用方法可参考范例 RenderTexture（GitHub | Gitee）。