
- 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.
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
:
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
Copy the folder
SSRFBONodeComponent/assets/scripts/ssr
to you projectCopy the folder
SSRFBONodeComponent/packages/ssr-fbo-node
thepackages
folder in your projectThen your will see the
fbo
menu in theeditor
**Create a new group for
FBO
**,any name will be fine
When apply
FBO
component to a cc.Node remember to set thegroup
propertyTo use the
FBONodeCaptureComponent
in theWeb
you need to import theSSRFBONodeComponent/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.
User Rating
Reviews
您好,ScreenShader 为啥我用你demo里的scene可以生效,我自己的就是不行啊,引擎版本是2.4.3
太牛了
牛,明天上班马上买 名字看起来就不知道是什么 点进来,都是干货
大神太厉害了 支持一下
买了主要是想学习下 cc.RenderTexture 相关的使用方式,感觉还不错,希望有更多的功能更新
买了之后下载下来什么都没有啊
不好意思,因为这个是以源码方式提交的商店,我刚才自己购买了,试了下,下载好以后,是需要自己点点一下把插件保存到指定目录才有效的。具体方法我已经回复到帖子里了: https://forum.cocos.org/t/cc-rendertexture-cc-camera-fbo-shader/99659 你可以试一下
引擎版本是2.4.3, 不如直接给代码啊
买了之后用编辑器自动下载成功,.download里是空的,添加组件里也没有SSR选项啊
不好意思,我提交商店的时候就是以源码方式提交的商店,我刚才自己购买了,试了下,确实下载好以后,要自己点一下把插件保存到指定目录才有效的。具体方法我已经回复到帖子里了: https://forum.cocos.org/t/cc-rendertexture-cc-camera-fbo-shader/99659 你可以试一下
- 1
2020 © Cocos.com版权所有
增值电信业务经营许可证:闽B2-20160169
闽ICP备14002653号-6
闽公网安备 35020302033941号
购买之后,是否能用于商业用途,是否无需再授权
是的,可以商用,不需要再授权