中文
resource-icon
SSRFBONodeComponent v1.4.0
类别
源码
作者
supersuraccoon
Creator版本要求
v2.3.4
支持平台
AndroidiOSHTML5
评分
售价
¥ 99.99 (个人)

介绍

0x01 About && 关于

RenderTexture 简称 RTT,指的是使用 FBO -- Frame Buffer Object 技术来实现实时的纹理渲染。

换句话说,纹理是在 GPU 中实时生成并渲染的。

multi-pass 的时候经常要使用 RTT 技术,包括一些 post-effect 后期。

0x02 Scenarios && 使用场景

上面简单提到了 FBO 的应用场景,下面就来细分一下这些例子,其中大部分的使用场景,都是和 Shader 相关的。

Multi-Pass Shader

大部分 Shader 效果只需要干一次活,就可以实现效果,比如说一个 GrayScale Shader ,或者 Outline Shader

但是有些效果,干一次活不够,而且这些活又不能合并到一次做完。

一个例子,就是模糊效果,模糊效果有很多实现方式可以一次搞定,比如高斯模糊,径向模糊,均值模糊。

但是也有需要多次渲染才能实现的效果,比如说先进行水平模糊,再对第一次渲染输出的纹理,进行垂直模糊,达到最终效果。

对应 Creator 中的实际操作,可以将第一次 Shader 处理 cc.Node 后的纹理结果,渲染到 RenderTexture 对象,然后再将第二次 Shader 作用于 RenderTexture对象,这样最后的输出纹理,就是想要的结果。

Screen Post-Effect Shader

屏幕后期特效,很多游戏中,都很常见,比如射击游戏中,血量低下时屏幕四周的血液效果,人物跑动后体力不足,屏幕边缘的模糊,或是呼吸效果。

要实现这些效果都可以使用 Shader 但是这些 Shader 的作用对象,应该是整个屏幕纹理渲染到的 RenderTexture 中的纹理。

Creator 中的很多 Shader 在实际使用时会生奇怪的错误,论坛上经常提到,最常见的一个原因,就是勾选了纹理打包选项, Shader 中使用的纹理坐标错误,从而导致最终 Shader 效果的错误。

很多 Shader 完全不关心纹理坐标,比如灰度图,黑白效果,等等。

有些 Shader 只关心纹理的相对坐标,比如说一些模糊算法,对于每一个处理的像素,它只关心和它临近的像素的信息。

最后还有一些 Shader 是关注纹理坐标在整个纹理中所处的绝对坐标的,比如一个类似小草摇曳的效果,需要对纹理从上到下赋予幅度递增的弯曲效果。

对于最后一种 Shader ,只要合图就会出现错误,一种解决方案,是对纹理坐标进行简单的换算。

还有一种方法,也可以用 FBO 来解决。就是把目标对象的纹理,渲染到 RenderTexture,然后将 Shader 作用于 RenderTexture

对于帧动画来说,也是属于最后一种情况,每帧切换合图中的不同纹理,如果是纹理绝对坐标依赖的 Shader,直接使用必然是得不到想要的效果的。

Bones Animation Shader

除了上面提到的三种纹理坐标的情况,还有这一种更特殊的例子,那就是骨骼动画。

比如 Spine , DragonBones 这些骨骼动画,它们并不只是单纯的在合图中寻找,切换不同的纹理。而是将合图中各种骨骼纹理取出,根据预制好的动画规则,将骨骼纹理进行形变后组合,并且每帧变化,来呈现出动画效果。

对于这样的骨骼动画,和纹理坐标相关的 Shader 在使用时,直接使用,必然会有很多问题,而且也很难像帧动画一样,通过换算纹理坐标来解决问题。

但是同样的,通过使用 FBO 的套路,一样可以解决问题。

Screenshot

一个很常见的使用场景,截图,最后将纹理导出。

Magnifier

另一个很常见的使用场景,就是将 RenderTexture 中的纹理,进行放大或是缩小操作,实现放大镜的效果。

0x03 Component && 组件

既然是这么有用的东西,那么 Creator 中必然有提供。通过使用 cc.Cameracc.RenderTexture 就可以实现 FBO 的效果。但是通过搜索论坛就可以发现,这个东西是个满是坑 的功能。

总有各种各样的问题来阻止使用者实现想要的效果,即使官方已经在测试用例中给出了简单的演示功能。

也正因为如此,有了这次的组件 SSRFBONodeComponent ,就像名字一样,很直接,就是为了能够在 Creator 中方便的使用 FBO 功能而开发的。把各种复杂的易错的细节都在组件中进行了统一处理,使开发者只需要及其简单的设置就可以使用。

目前组件所测试过的,确认支持的 Creator 中的渲染组件:

cc.Sprite 单图精灵

cc.Animation 帧动画

cc.ParticleSystem 粒子系统

cc.Label 文本

cc.RichText 富文本

DragonBones 龙骨骨骼动画

sp.Skeleton Spine 骨骼动画

以上所有的渲染组件在和 Mask 组件混用是,同样都能够正常使用。

0x04 Mode && 模式

SSRFBONodeComponent 包含了多种模式来满足实际的 FBO 使用需求,主要有如下四种 (截图中红色部分为 FBO 部分,为了方便演示):

SSRFBONodeScreenComponent

全屏 FBO 专用组件,用于获取全屏纹理。可以用于实现如全屏模糊的效果。

test_screen_fbo

test_screen_fbo_mask

test_screen_fbo_shader

SSRFBONodeRegionComponent

指定大小区域 FBO 专用组件,用于获取节点问中心的,指定大小区域的纹理。可以用于实现如局部区域模糊的效果。

test_region_fbo

test_region_fbo_mask

test_region_fbo_shader

SSRFBONodeInPlaceComponent

指定区域 FBO 专用组件,用于获取指定区域范围内的纹理。可以用于实现如局部区域倒影的效果。

test_inplace_fbo

test_inplace_fbo_mask

test_inplace_fbo_shader

SSRFBONodeTargetComponent

指定对象 FBO 专用组件,用于获取指定对象的纹理。可以用于实现一些骨骼动画相关的 Shader 效果。

test_target_fbo

test_target_fbo_mask

test_target_fbo_shader

0x05 Features && 功能

Common

UpdateMode

更新模式,可以根据需要求,选择是进更新一次纹理,还是实时更新。

根据实际的使用场景,选择合适的更新模式,可以提升 FBO 的性能。比如用户可以在选择 UpdateOnce 模式,然后再需要更新纹理的时候,主动调用 UpdateFBO 接口即可。

test_common_fbo_updatemode

flipY

可以指定纹理是否需要翻转。

最常使用 cc.SpriteFrameflipY 属性来实现,但是该属性配合 cc.RenderTexture 使用的时候,在动态运行时更新后无法马上刷新纹理。因此暂时改用 -scaleY 实现。

test_common_fbo_flip

group

指定 FBO 相关节点专用的分组。

backgroundColor

可以指定 FBO 对象的背景颜色。

test_common_fbo_backgroudcolor

RegionComponent

zoom

可以指定纹理的缩放比例,实现类似放大镜的效果。

test_region_fbo_zoom

InPlaceComponent

rect

指定抓取纹理的矩形范围。

test_inplace_fbo_mask

test_inplace_fbo_shader

编辑器中,有 gizmo 会标识出实际抓取的纹理矩形范围。

editor_inplace_gizmo

TargetComponent

target

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

test_target_fbo

test_target_fbo_mask

test_target_fbo_shader

syncAngle syncScale syncSize syncAnchor

可指定是否需要和对象的旋转 / 缩放 / 尺寸/锚点 属性保持同步。

在需要精准的纹理计算时,可以开启,这样就会保证 FBONode 和目标节点的 BoundingBox 保持同步。

目前发现,Creator 中的 RenderTexture 在原生环境下调用 UpdateSize 存在 bug ,暂时采用重新创建纹理的方式实现,因此 syncSize 的性能降低。

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

test_target_fbo_sync

offsetX offsetY

可指定抓取后的纹理的横向 / 纵向偏移量。

对于某些骨骼动画,通过设置该属性,可以将渲染目标节点调整到合适的位置。

test_target_fbo_offset

inflateW inflateH

可指定输出纹理在宽度 / 高度上的膨胀大小。主要用于一些需要外扩的 Shader 情况。

在测试中发现 Creator 中目前对有些 Spine 动画在大小读取上有问题,比如官方例子中的 SpineBoy,添加到编辑器中后,size 的大小显示为 0, 0。但是 SpineRator 则是正确的。

对于前一种情况,可以通过设置 inflate 属性,来实现正确的纹理抓取。

test_target_fbo_inflate

CaptureComponent

接受一个 FBOComponent 对象,并将其中的纹理导出为图片。目前实现了 Web android iOS 平台中的导出图片功能。

test_inplace_fbo_capture

test_inplace_fbo_capture_web

Editor

所有的控件几属性均可以在编辑器中实时预览,所见即所得。

editor_inplace_shader

editor_region_shader

editor_target_shader

0x06 Platform Support && 平台支持

目前测试过的平台,设备,相关信息。

从测试结果来看,所有功能在所有测试的平台和设备上都可以正常运行 (除了微信小游戏没有做保存图片的功能)。

引擎版本

Creator v2.3.4

Creator v2.4.0

Creator v2.4.3

测试设备

Model.1

2018 产

MacBook Pro (13-inch)

macOS Catalina 10.15.6

Google Chrome 版本 85.0.4183.83(正式版本)(64 位)

Firefox 80.0.1 (64 位)

Safari 版本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

发布平台 / 测试结果

Web Desktop

所有测试用例在 Model.1 所有浏览器中都可以满帧运行。

Web Mobile

所有测试用例在

Model.3/4/5/6 微信浏览器和系统默认浏览器中都可以满帧运行。

Model.2 系统默认浏览器中,部分测试用例为 30 ~ 40FPS,其余都可以满帧运行。

Mac Xode Version 11.6 (11E708)

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

iOS Xode Version 11.6 (11E708)

所有测试用例在

Model.2/3 中,部分测试用例为 30 ~ 40FPS,其余都可以满帧运行。

Android Android-29 armeabi-v7a

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

Model.4 中,部分测试用例为 30 ~ 40FPS,其余都可以满帧运行。

Wechat Game 稳定版 Stable Build 1.03.2010240

所有测试用例在 Model.2/3/4/5/6 中,部分测试用例为 30 ~ 40FPS,其余都可以满帧运行。

总结

测试用例性能在各种场景下还是有着很不错的表现。

总体性能 Web > android > iOS

FBO 在同一场景中数量多会造成性能下降的。

选择合适的组件类型,合适的更新策略,都可以帮助提高性能。

除了 FBOTarget 以外,其他三种类型通常在一个场景中只会用到 12 个。

0x07 How to use && 使用方法

  1. 将下载文件夹中的 SSRFBONodeComponent/assets/scripts/ssr 目录,复制到想要使用的项目

  2. 将下载文件夹中的 SSRFBONodeComponent/packages/ssr-fbo-node 目录,复制到想要使用的项目的 packages 目录中

  3. 在编辑器中,就可以看到 fbo 的插件选项了

    editor_fbo_component

  4. 增加一个给 FBO 专用的分组,名称,顺序都随意。

    editor_fbo_group

  5. 记得在使用 FBO 的插件时,设置 group 属性为刚才创建的分组名称

    editor_fbo_group2

  6. FBONodeCaptureComponent 在网页端使用时,需要将 SSRFBONodeComponent/assets/scripts/ssr/fbo/download.js 文件导入为插件

    editor_download_import

0x08 Misc && 杂项

  • 下载的项目中,包含了核心的 Component 和源码,和所有的测试用例源码。
  • 下载的项目中,组件使用的 Group 名称为 fbo
  • 测试用例中的 Shader 主要是为了演示用,所以一律不讲究编码优雅与否,性能如何,只是为了配合演示。

#v1.1.0

更新内容

  • 类命名规范修改为和其他组件一样的方式
  • 把纹理旋转的实现方式,从 scaleY -1 修改为 flipY,虽然这样存在无法实时修改 flipY 的问题,但是这种需求是比较少的,配合 flipY 的方式实现纹理的翻转,才能更好的配合各种 Shader 实现特效的应用
  • 增加两个新的组件 SSRFBOCloneCompoent SSRFBOGhostComponent 已经对应的测试用例

Clone && Ghost

就像这个组件最初在介绍时说过,FBO 的一个最大的使用场景,就是配合 Shader 的使用。

由于 Shader 种类多样,其中的一种,依赖 uvshader ,在合图的情况下,还可以通过坐标转换来解决。但是当作用于一些骨骼动画的时候,就只能放弃了。

Cross Shader

这里那一个很简单的,uv 依赖的 shader 做例子。

把作用对象水平,垂直的,划分成四个象限,然后染色不一样的颜色。

这里 红色绿色 本该在上半部分却显示在了下半部分并不是错误,是因为 FBO 有纹理垂直翻转的情况,只要像合图那样,在 Shader 做个 uv 转换就可以解决。

CloneGhost 的区别在于:

  • 前者和 target 是并列关系,因此不受 target 的形变影响
  • 后者是 target 的子节点,受 target 的形变影响
  • 通常情况下,更推荐后者来实现骨骼动画的 uv Shader 特效

OffSet && Tranform

Clone

对于 Clone 的情况,由于是并列的节点关系,因此有需要实时同步 target 的缩放旋转的需求

clone2

这里通过调整 size / offset 属性,可以修正 boundingBox 的大小位置。如果骨骼动画有缩放旋转,也可以选择是否实时同步。

clone1

修正后,就可以正确的启用 Shader 的效果了。

但是这种方式不是很推荐,因为就像前面看到的,很多骨骼动画的中点不统一,在旋转缩放的时候,如果不及时再次调整 Offset 或是 Size,那么效果又会出现问题,因此更推荐下面的 Ghost 模式。

Ghost

由于 Ghost 是以子节点的方式实现的,所以只需要简单的调整 Offset 就可以了:

ghost1

ghost2

target 的任何形变,子节点都不需要做出任何修改,都可以始终保持正确。

此外,通过设置两种形式的 Offset ,还可以起到一些特殊的效果,比如做到 target部分消失效果

ghost_fbo

ghost_offset

ghost_transform

How to Use && 如何使用

使用方式和 v.1.0.0 完全一致,只是需要 再增加一个分组 Group,用于 Clone && Ghost 模式使用。演示程序中增加了一个 Clone 和 Ghost 分组。

group

Known Issues && 已知问题

目前的版本还存在一些已知的问题没有修复,但都是不影响实际使用的问题,在这里先记录一下,后续会努力修复。

  • TargetComponent 使用时,如果 targetonLoad 的时候被 .active = false 就会报错

    issue1

    但是将代码放到 start 中,就不会有问题,应该是调用时机方面的问题。

  • 在运行时,改变 flipY 属性不会生效 texture.setFlipY

  • CloneGhost 在编辑器中实时改变大小,有时候会出现不正确的结果,只要在编辑器中刷新当前 Scene 就可以恢复

总结 && Summary

这一次在加入了 CloneGhost 两个新的组建之后, SSRFBO 这一组件也越来越接近最初我想要的结果了。

就像我一直提到的,FBO 主要是在和 Shader 配合的使用中,会起到很大的作用。

就像我几年前写用 cocos2dx 写的 SSRShaderFX,其中有很多特效和实现方式都用到了 FBO

https://forum.cocos.org/t/ssrshaderfx/60295

这几天我也用 SSRFBOComponent 这个组件,在寻找 Creator 中,任何节点的 Shader 统一解决方案。

无论是否合图,静态动态,帧动画,骨骼动画,是否级联,对于任何一个 Shader ,都该有统一的表现。

配合现在 SSRFBOComponent 这个组件,应该能找到很好的解决方案(目前还有一些小的问题)。

fbo_and_shader

fbo_and_shader


v1.2.0 / v1.3.0

目前 SSRFBOComponent 组件的功能已经是相对比较完善的了。

恰好最近 Shader 编辑器 也上架了商店,最初在做 FBO 组件的时候就曾经提到过,FBOShader 的最佳伴侣,现在有了编辑器方便的制作特效,再加上 FBO 的帮助,就能将这些特效玩出更多不一样的姿势。

从这个版本开始,会陆续的添加一些游戏 Demo 场景,所有场景都一个 Shader 主题,这些 Shader 都是用 Shader 编辑器 制作,再配合上 FBO 的演示 (这些 Shader 通常都是无法直接使用到复杂的对象上的,如 Spine 动画,龙骨,帧动画,但是有了 FBO 的帮助,使这一切成为可能)。

这一次的版本主要更新两个 Demo:

WaterTurbulence + Reflection / 水面扰动 + 倒影

编辑器中的,用多纹理采样实现的波纹扰动特效:

WaterTurbulence

接着导出 shader 特效,准备一个实际的游戏场景中:

WaterTurbulenceWithFBODemo1

接着,加入一张纯色图,作为水的部分:

WaterTurbulenceWithFBODemo2

然后混入 spine 动画 和 龙骨动画,用做测试 FBO Shader 是否有效,增加复杂度 :

WaterTurbulenceWithFBODemo3

然后加入 FBO 组件,这里选用的是多种类型中的 InPlace 组件,主要用于获取指定区域范围内的纹理,并将其渲染到指定位置。

WaterTurbulenceWithFBODemo4

可以看到,绿色矩形区域的纹理被渲染到了蓝色矩形范围内 (PS: 插件支持实时预览)

接着,把纹理翻转设置一下,实现倒影的倒置效果:

WaterTurbulenceWithFBODemo5

再来就是将编辑器制作的水面扰动特效,拖放到 FBO 组件上,替换掉系统默认的 Shader 即可:

WaterTurbulenceWithFBODemo6

同样可以在编辑器中实时预览效果。

最后,就是调整一下参数,直到效果基本满意:

WaterTurbulence

顺便测试一下有些用户关心的,微信小游戏是否可以用。

  1. 2017 产 Huawei Honor 7X BND-AL10 Android 9.0 EMUI 9.1.0

WaterTurbulence

  1. 2017 产 iPhone X 13.3.1 MQA92CH/A

WaterTurbulence

2D Drop Shadow / 2D 阴影

在编辑器中的效果:

WaterTurbulence

但是这样的 Shader 直接使用与骨骼动画的话,是有问题的,当然还是因为 UV 相关操作的原因。想要使用的话,那还是需要 FBO 的帮助,这次我用的是 FBO插件 中的 ghost 模式:

2DDropShadowFBO

同样,插件支持 creator 中的实时预览。

Night Vision / 夜视镜效果

在编辑器中的效果:

WaterTurbulence

这次配合的是 FBO插件 中的 Reigon + Mask 模式:

2DDropShadowFBO

移动夜视镜,可以看到效果。



v1.4.0

继续更新一些配合 Shader 编辑器 制作的演示特效

SnowCover / 积雪特效

ss

视频链接 B站

Cyberpunk / 赛博朋克屏幕后期特效

ss

视频链接 B站

Fog of War / 组件特效

这次除了继续更新上面的特效,还加入了一个新的组件 战雾

ss

视频链接 B站

该组件同时也独立上架,已经购买过 FBO 组件的用户,只需要更新代码,就能获取到该组件。


下面是作者的其他一些插件,如果有感兴趣的,可以支持一下,感谢 ~

01.SSRFBONodeComponent_Banner.png 02.SSRSVGComponent_Banner.png 03.SSRSVGWriterComponent_Banner.png 04.SSRShaderFXEditor_Banner.png 05.SSRLoSComponent_Banner.png 06.SSRFogOfWarComponent_Banner.png 07.SSRCreatorPluginAdaptor_Banner.png 08.SSRShaderFXTutorial_Banner.png 09.SSRDnDComponent_Banner.png 10.SSRShaderGallery_Banner.png 11.SSRDynamicMaterial_Banner.png 12.SSRBluePrintStarterKit_Banner.png 13.SSRPostProcessingFX_Banner.png 14.SSRDeviceMotion_Banner.png 15.SSRGridCCLContour_Banner.png 16.SSRWorkCollection_Banner.png 17.SSRScreenSplitFX_Banner.png 18.SSRShaderConverter_Banner.png

用户评分

平均评分
(5)
共有 4 位用户参与评分

评论

calfjohn 2021-12-08 20:08

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

作者

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

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

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

作者

不好意思,因为这个是以源码方式提交的商店,我刚才自己购买了,试了下,下载好以后,是需要自己点点一下把插件保存到指定目录才有效的。具体方法我已经回复到帖子里了: 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选项啊

作者

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

  • 1

2020 © Cocos.com版权所有

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

闽ICP备14002653号-6

闽公网安备 35020302033941号