[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 种类多样,其中的一种,依赖 uv 的 shader ,在合图的情况下,还可以通过坐标转换来解决。但是当作用于一些骨骼动画的时候,就只能放弃了。

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 转换就可以解决。

Clone 和 Ghost 的区别在于:

  • 前者和 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 使用时,如果 target 在 onLoad 的时候被 .active = false 就会报错

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

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

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

总结 && Summary

这一次在加入了 Clone 和 Ghost 两个新的组建之后, 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赞