RenderTexture

A rendered 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 through the frambuffer off the screen.

Using RenderTexture

  1. // Method 1: Draw the content illuminated by the 3D camera
  2. // onto the UI sprite frame
  3. export class CaptureToWeb extends Component {
  4. @property(Sprite)
  5. sprite: Sprite = null;
  6. @property(Camera)
  7. camera: Camera = null;
  8. 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. });
  22. const rendetTex = this._renderTex = new RenderTexture();
  23. rendetTex.reset({
  24. width: 256,
  25. height: 256,
  26. colorFormat: RenderTexture.PixelFormat.RGBA8888,
  27. depthStencilFormat: RenderTexture.DepthStencilFormat.DEPTH_24_STENCIL_8
  28. });
  29. this.camera.targetTexture = rendetTex;
  30. sp.texture = rendetTex;
  31. this.sprite.spriteFrame = sp;
  32. }
  33. }
  34. // Method 2: Draw the content illuminated by the 3D camera onto the 3D model
  35. export class RenderCameraToModel extends Component {
  36. @property(MeshRenderer)
  37. model: MeshRenderer = null;
  38. start () {
  39. // Your initialization goes here.
  40. const renderTex = new RenderTexture();
  41. renderTex.reset({
  42. width: 256,
  43. height: 256,
  44. colorFormat: RenderTexture.PixelFormat.RGBA8888,
  45. depthStencilFormat: RenderTexture.DepthStencilFormat.DEPTH_24_STENCIL_8,
  46. });
  47. const cameraComp = this.getComponent(Camera);
  48. cameraComp.targetTexture = renderTex;
  49. const pass = this.model.material.passes[0];
  50. const binding = pass.getBinding('mainTexture');
  51. pass.bindTextureView(binding, renderTex.getGFXTextureView());
  52. }
  53. }

For more Render Texture examples, please see these test casees.