English
resource-icon
SSRFBONodeComponent v1.4.0
Category
Code
Author
supersuraccoon
Creator Version Required
v2.3.4
Supported Platform
AndroidiOSHTML5
Rating
Sale Price
$ 19.99 (Individual)

Introduction

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.

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.

test_screen_fbo

test_screen_fbo_mask

test_screen_fbo_shader

SSRFBONodeRegionComponent

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

test_region_fbo

test_region_fbo_mask

test_region_fbo_shader

SSRFBONodeInPlaceComponent

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

test_inplace_fbo

test_inplace_fbo_mask

test_inplace_fbo_shader

SSRFBONodeTargetComponent

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

test_target_fbo

test_target_fbo_mask

test_target_fbo_shader

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.

test_common_fbo_updatemode

flipY

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

test_common_fbo_flip

group

The group of the FBO component.

backgroundColor

The background color of the FBO component.

test_common_fbo_backgroudcolor

RegionComponent

zoom

The zoom factor of the texture.

test_region_fbo_zoom

InPlaceComponent

rect

The rect in which the texture will be captured.

test_inplace_fbo_mask

test_inplace_fbo_shader

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

editor_inplace_gizmo

TargetComponent

target

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

The target whose texture will be captured.

test_target_fbo

test_target_fbo_mask

test_target_fbo_shader

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.

test_target_fbo_sync

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.

test_target_fbo_offset

inflateW inflateH

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

test_target_fbo_inflate

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.

test_inplace_fbo_capture

test_inplace_fbo_capture_web

Editor

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

editor_inplace_shader

editor_region_shader

editor_target_shader

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

    editor_fbo_component

  1. **Create a new group for FBO **,any name will be fine

    editor_fbo_group

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

    editor_fbo_group2

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

    editor_download_import

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.

User Rating

Average Rating
(5)
Total users participating at this score: 4

Reviews

calfjohn 2021-12-08 20:08

购买之后,是否能用于商业用途,是否无需再授权

Author

是的,可以商用,不需要再授权

huahuaxiayula 2021-08-11 22:35

您好,ScreenShader 为啥我用你demo里的scene可以生效,我自己的就是不行啊,引擎版本是2.4.3

xiemingzhang 2021-03-18 17:15

太牛了

bcxiaolang008 2021-03-14 23:46

牛,明天上班马上买 名字看起来就不知道是什么 点进来,都是干货

819293923 2020-11-25 11:03

大神太厉害了 支持一下

amanda07232 2020-11-17 18:38

买了主要是想学习下 cc.RenderTexture 相关的使用方式,感觉还不错,希望有更多的功能更新

darkeril 2020-11-16 11:26

买了之后下载下来什么都没有啊

Author

不好意思,因为这个是以源码方式提交的商店,我刚才自己购买了,试了下,下载好以后,是需要自己点点一下把插件保存到指定目录才有效的。具体方法我已经回复到帖子里了: https://forum.cocos.org/t/cc-rendertexture-cc-camera-fbo-shader/99659 你可以试一下

xmewind 2020-11-16 10:32

引擎版本是2.4.3, 不如直接给代码啊

xmewind 2020-11-16 10:31

买了之后用编辑器自动下载成功,.download里是空的,添加组件里也没有SSR选项啊

Author

不好意思,我提交商店的时候就是以源码方式提交的商店,我刚才自己购买了,试了下,确实下载好以后,要自己点一下把插件保存到指定目录才有效的。具体方法我已经回复到帖子里了: https://forum.cocos.org/t/cc-rendertexture-cc-camera-fbo-shader/99659 你可以试一下

  • 1

2020 © Cocos.com版权所有

增值电信业务经营许可证:闽B2-20160169

闽ICP备14002653号-6

闽公网安备 35020302033941号