[cc.RenderTexture cc.Camera FBO] 截图, 放大镜, Shader 伴侣

我刚才自己试了下,貌似因为这个我是以源码方式提交的,所以付款后点击获取,是没有自动的下载到源码。需要自己保存一下。

你看下下面的截图步骤:

点击获取

点击侧边栏的小文件符号,会弹出对话框让你选择下载的源码保存到哪里

然后代码就会下载下来了

1赞

老哥 我现在看商店里让我用paypal付款 我没有paypal 能改成人民币吗?

你可以搜索一下 FBO,有一个是中文版的可以微信支付宝,一个是英文版的只有 PayPal,英文版的有后缀 “_EN”。

如果能像unity那样,一句话实现使用指定shader pass渲染src输出到dest就好了。

Graphics.Blit(src, dest, material, 0);

U3D 开发者表示,确实,这个 U3D 很方便

周末提交的新版本已经上线,之前购买过的朋友,记得来免费更新 :relaxed:

v1.1.0

更新内容

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

Clone && Ghost

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

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

Cross Shader

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

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

这个 shader 写起来是很简单的:

void main () {
		vec4 c = texture2D(texture, v_uv0);
    if (uv.y < 0.5) {
				if (uv.x < 0.5) { // 上半部分,注意这个和 cocos 的坐标系是反的
            // 左上,红色
        		gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * c;
        }
        else {
            // 右上,绿色
        		gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0) * c;
        }
    }
    else {
    		if (uv.x < 0.5) {
            // 左下,蓝色
        		gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0) * c;
        }
        else {
            // 右下,黑色
        		gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0) * c;
        }
    }
}

这样的一个 shader ,在直接运用到 spine 或是 drangonBones 对象上时,是绝对无法得到想要的结果的。

再加上有些骨骼动画的中心点也并非通常意义上的 cc.Node 的中点,而且 boundingBox 也很难派上用场。

Target && Clone && Ghost FBO

上一个版本中,就有了 SSRFBOTargetComponent,这个组件。它可以实时获取指定目标的纹理,然后进行 Shader 的特效处理。

但是在实际使用的时候,通常会希望 新产生出来的一个对象可以完全把本体所替代,只展示一个加了 shader 特效的对象,让人感觉就像是本体加了特效一样

因此这个版本引入了 CloneComponent

GhostComponent

两者都实现了上面提到的,完全替代本体,并且可以接收任何 uv 依赖的 shader

上面的截图可以看到,第二列都是直接使用 shader 的结果,第三列则是 Clone && Ghost 的情况。

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

CloneGhost 的区别在于:

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

OffSet && Tranform

Clone

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

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

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

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

Ghost

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

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

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

ghost_fbo

ghost_offset

ghost_transform

How to Use && 如何使用

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

Known Issues && 已知问题

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

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

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

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

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

总结 && Summary

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

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

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

分享一下最近业余时间在做的一个库 SSRShaderFX

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

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

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

fbo_and_shader

1赞

这个太棒了~

不错,最近正写 shader 然后正愁有些效果不能用到 骨骼动画上,正好参考下 :heart:

大佬牛逼,来学习一下

我用FBONodeTargetComponent给鱼做影子的时候,发现DrawCall很高,有好的优化方案吗

终于可以偷会师了!

感谢大佬的组件。
仿照大佬的代码写了一个简单的区域渲染的脚本,让spine的shader效果成为可能,感谢大佬。
这个困扰了我两天半的问题,就这么花了半个小时就解决了。大佬nb

话说camera的enable就算为false,似乎也可以进行手动的render操作

下载了最新的4.17新增的两个Demo,运行后不显示倒影和阴影。。。。环境是Creator2.3.4/2.4.4,Mac Big Sur Web和模拟器都有跑一下

  • 添加 FBO 示例 Demo 演示程序: WaterTurbulence + Reflection / 水面扰动 + 倒影
  • 添加 FBO 示例 Demo 演示程序: 2D Drop Shadow / 2D 阴影

想问下,项目里其他的 demo,是不是在 web 下也有问题?还有就是可以看下 分组是不是设置正确。

我现在情况是这样的




好奇怪,我这里查下,什么原因。能加个 qq 不,我详细查下: 453951749

在和用户沟通后,目前看来,只有 InPlace + Shader 的组合出现问题。但是原因暂时不明,用户的环境是

但是我这里也在同样环境下测试过,并没有能够重现。

另外,问题在发布到原生环境下是正常的。

mark 回头再来学习

大佬想问下,看你这个帖子里有些特效,后续也会更新到这个fbo的插件里吗?

更新版本 v1.4.0


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

SnowCover / 积雪特效

视频链接B站

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

视频链接B站

Fog of War / 组件特效

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

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


具体信息可以点击这里查看: FogOfWar 战雾组件

视频链接B站

1赞