Render Texture

A render texture is a texture on the GPU. Usually, we set it to the camera’s target texture, so that the content illuminated by the camera is drawn to the texture via the frambuffer off the screen. Typically can be used to create car mirrors, implement dynamic shadows, etc.

Creating a RenderTexture

Click the + button in the top left of the Assets panel and select RenderTexture to create a Render Texture:

add-render-texture

The properties associated with the render texture asset can then be set in the Inspector panel.

render-texture-property

PropertyDescription
WidthSet the width of the render texture.
HeightSet the height of the render texture.
AnisotropyAnisotropy value.
Min FilterNarrowing filtering algorithm.
Mag FilterAmplification filtering algorithm.
Mip FilterMulti-level texture filtering algorithm.
Wrap Mode SS(U) direction texture addressing mode.
Wrap Mode TT(V) direction texture addressing mode.

Using RenderTexture

There are two ways to use RenderTexture:

  • Method 1: Draw the contents illuminated by the 3D camera to the sprite frame of the 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. // Need to manually call this function to make RenderTexture display correctly on each platform
    31. this.sprite.updateMaterial();
    32. }
    33. }
  • Method 2: Draw the contents illuminated by the 3D camera to the 3D model.

    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. // Set the 'SAMPLE_FROM_RT' macro to 'true' so that RenderTexture can be displayed correctly on each platform
    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. }

Set RenderTexture as a texture map

Setting the RenderTexture to a texture map consists of the following two steps:

  1. Process uv in effect

    Determine SAMPLE_FROM_RT and call CC_HANDLE_RT_SAMPLE_FLIP function:

    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. Select the corresponding material in the Hierarchy panel, and then check SAMPLE FROM RT in the Inspector panel.

    SAMPLE_FROM_RT

For more information about the usage, please refer to the example RenderTexture.