渲染纹理资源(Render Texture)

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

创建渲染纹理资源

资源管理器 中点击左上方的 + 按钮,然后选择 渲染纹理,即可创建渲染纹理资源:

add-render-texture

然后在 属性检查器 中便可以设置渲染纹理资源的相关属性:

render-texture-property

属性说明
Width设置渲染纹理的宽
Height设置渲染纹理的高
Anisotropy各项异性值
Min Filter缩小过滤算法
Mag Filter放大过滤算法
Mip Filter多级纹理过滤算法
Wrap Mode SS(U)方向纹理寻址模式
Wrap Mode TT(V)方向纹理寻址模式

使用 RenderTexture

使用 RenderTexture 有以下两种方法:

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

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

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

设置 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

更多使用方法可参考范例 RenderTextureGitHub | Gitee)。