0x01 About

Render textures are textures that can be rendered to.

They can be used to implement image based rendering effects, dynamic shadows, projectors, reflections or surveillance cameras.

FBO can be used as a texture map for further rendering by OpenGL ES. This is called Render to Texture or RTT.

0x02 Scenarios

Here are some useful scenarios using this technique.

Multi-Pass Shader

Most shaders will only need to work once to achieve the designed effects,such as grayscale shader outline shader.

But sometimes we need to have multi shaders to work together for a cool effect.

An example here is a blur shader. Say we need to do a vertical blur shader first on the origin texture and a horizontal blur shader on the texture from the output of the first shader.

Screen Post-Effect Shader

This is also often seen in lots of games such as the blood effect on the screen when the player is getting hit or a blur effect when the player is running and out of energy.

This can all be implemented with a full screen render texture object.

UV-Related Shader

Some shaders do not care UV info at all such as grayscale shader. Those shaders can be applied to any targets and usually will have the same effects the as you expect.

Some shaders relies on the UV but only relatively which means it only cares about the UV info surrounded by.

Some shaders relies on the UV absolutely such as a color gradient decent shader from top to bottom.

For the last type of shaders, they can't be applied directly to those targets uses packed textues, you'll need to convert uv coordinates when you use them.

And another way to solve this probelm is to use RenderTexture.

Bones Animation Shader

Another special case here is Bone Animation such as Spine or DragonBones.

Unlike Frame Animation that all the Frame Texture are packed in a big texture, the Bone Animation textures are usually splitted into every small textures and the animation system will try to build them up following then configuraion data in a json file.

For those targets it's very difficualt to do the UV coordinate converting process in your shader program.

And again, it can be solved with RenderTexture.

Screenshot

Catprue the running game screen at run time and export it as a image.

Magnifier

Zoom in or zoom out part of the running game screen at run time.

0x03 Component

RenderTexutre is provided in CocosCreator as a built in component but it is not that easy to use not to mention to have it achieve the effects listed above.

And that's why this Component is born.

It makes it very easy to use the RenderTexture features in Creator.

So far, I have tested it with the following built in components in Creator:

cc.Sprite

cc.Animation

cc.ParticleSystem

cc.Label

cc.RichText

DragonBones

sp.Skeleton Spine

And all the components listed above work fine when used with cc.Mask compoent.

0x04 Mode

SSRFBONodeComponent contains four different modes to cover all the requirements when using RenderTexture (The red part in the screenshot indicates the textures in RenderTexture ):

SSRFBONodeScreenComponent

Full screen FBO component designed for capturing the whole screen texture.

SSRFBONodeRegionComponent

Specified region FBO component designed for capturing the texture around the cc.Node with this component.

SSRFBONodeInPlaceComponent

Another specified region FBO component designed for capturing the texture in a given region and the render it to another region.

SSRFBONodeTargetComponent

Specific target FBO component designed for capturing the textuer of a given cc.Node target.

0x05 Features

Common

UpdateMode

RenderTexture can be expensive so you need to use it wisely.

It is allow to set the UpdateMode of the Component to make it update only when you need it or just let it keep updating per frame.

flipY

If the texture in cc.RenderTexturre needs to be y flipped.

group

The group of the FBO component.

backgroundColor

The background color of the FBO component.

RegionComponent

zoom

The zoom factor of the texture.

InPlaceComponent

rect

The rect in which the texture will be captured.

And there will be a rect in the Creator Edtior (gizmo) helping you to setup the area.

TargetComponent

target

指定抓取纹理的对象节点。

The target whose texture will be captured.

syncAngle syncScale syncSize syncAnchor

If the FBO component need to synchronize with the target node.

When enabled the texture captured will be precied with the Boundingbox of the target.

There is a known issue currently in Creator when calling UpdateSize in cc.RenderTexture:

cc.RenderTexture 原生环境调用 updateSize 报错?

So know I am using a workaround for the syncSize which may have a bit of impact on the performance.

offsetX offsetY

The offset value for the captured texture which may be useful when used with Spine DragonBones objects.

inflateW inflateH

The inflate value fot the captured texture which may be useful for shaders need to expand the origin texture.

CaptureComponent

The component takes any FBOComponent object and will export the texture in it to a image and save it locally.

This feature is only implemented for Web android iOS platforms , not for wechat mini game yet.

Editor

All the components and properties are WYSIWYG in the Creator Editor, you can set everything up in the editor easily.

0x06 Platform Support

Tested version

Creator v2.3.4

Creator v2.4.0

Creator v2.4.3

Tested devices

Model.1

2018

MacBook Pro (13-inch)

macOS Catalina 10.15.6

Google Chrome version 85.0.4183.83（64 bit）

Firefox 80.0.1 (64 bit)

Safari version 13.1.2 (15609.3.5.1.3)

Model.2

2014

iPhone 6 11.3.1 MG4H27P/A

Model.3

2017

iPhone X 13.3.1 MQA92CH/A

Model.4

2017

Huawei Honor 7X BND-AL10 Android 9.0 EMUI 9.1.0

Model.5

2018 产

Huawei Mate20 Pro LYA-AL00 Android 10.1 EMUI v10.1.0

Tested platforms / Results

Web Desktop

All the testcases are running full FPS in Model.1

Web Mobile

All the testcases are running full FPS in Model.3/4/5/6

Part of the testcases are running at 30 ~ 40FPS in Model.2 and full FPS for the others.

Mac Xode Version 11.6 (11E708)

All the testcases are running full FPS in Model.1

iOS Xode Version 11.6 (11E708)

Part of the testcases are running at 30 ~ 40FPS in Model.2/3 and full FPS for the others.

Android Android-29 armeabi-v7a

所有测试用例在 Model.5 中都可以满帧运行。

All the testcases are running full FPS in Model.5

Part of the testcases are running at 30 ~ 40FPS in Model.4 and full FPS for the others.

Wechat Game Stable Build 1.03.2010240

Part of the testcases are running at 30 ~ 40FPS in Model.2/3/4/5/6 and full FPS for the others.

Conclusion

Performance in total Web > android > iOS。

Multi FBO components used in a single scene will cause performance down.

Proper choose of component type, update mode will help performance up.

0x07 How to use

1. Copy the folder SSRFBONodeComponent/assets/scripts/ssr to you project

2. Copy the folder SSRFBONodeComponent/packages/ssr-fbo-node the packages folder in your project

3. Then your will see the fbo menu in the editor

   

4. **Create a new group for FBO **，any name will be fine

   

5. When apply FBO component to a cc.Node remember to set the group property

   

6. To use the FBONodeCaptureComponent in the Web you need to import the SSRFBONodeComponent/assets/scripts/ssr/fbo/download.js as plugin

   

0x08 Misc

• All the testcases mentioned above are all included in the downlaod package.
• The Shader used in testcases are just for demonstration purpose so they are not optimized.