中原彼得堡航空学院网站的建设,怎么样建设一个网站,丹阳网站设计公司,做网站领券收佣金Cocos Cyberpunk 是 Cocos 引擎官方团队以展示引擎重度 3D 游戏制作能力#xff0c;提升社区学习动力而推出的完整开源 TPS 3D游戏#xff0c;支持 Web, IOS, Android 多端发布。
本系列文章将从各个方面对源码进行解读#xff0c;提升大家的学习效率。希望能够帮助大家在 …
Cocos Cyberpunk 是 Cocos 引擎官方团队以展示引擎重度 3D 游戏制作能力提升社区学习动力而推出的完整开源 TPS 3D游戏支持 Web, IOS, Android 多端发布。
本系列文章将从各个方面对源码进行解读提升大家的学习效率。希望能够帮助大家在 3D 游戏开发的路上更进一步。
工程源码免费下载页面: https://store.cocos.com/app/detail/4543
今天的内容相对比较简单既适合年轻人把玩也适合中老年娱乐一定要看完哟。
上一篇文章给大家分享了 如何将 Cocos Cyberpunk 中的自定义渲管线(CRP)搬到自己的项目中。
看着那 Bling Bling 的效果很多朋友也是跃跃欲试但刚准备动手就卡住了。于是跑过来问
那个自定义管线的 Shader 怎么写啊那个渲染管线图是怎么连的啊我想自己增加一个效果怎么整啊
别急这就安排
谁让麒麟子这是么个好专说业话托呢。
大家可能发现了虽然麒麟子的文章开头都会有一段用于缓和紧张的学习气氛的句子但文章结构依然保持了 总-分-总 结构。
因这样的结构很适合用于分享学习内容。
如果还有更好的建议欢迎随时告诉我我会根据情况做调整。
话不多说我们开始吧。
内容提要
想要在 Cocos Cyberpunk 的 CRP 中新增一个后期效果只需要需要解决下面几个问题就好了
新增什么后期效果如何编写一个 Pass如何将一个 Pass 加入到管线
接下来我们逐一搞定它们。
选择效果
Cocos Cyberpunk 中已经内置了 Bloom 和 TAA 两个出场率 90% 的后处理。如果还要加的话应该还有
LutVignetteDoFMotion BlurSSRSSAO
除了 Lut 和 Vignette 非常简单以外其余的都很难搞。
列出来就是为了让大家看看。
这篇文章的目的是演示添加一个后效效果的工作流程所以没有必要搞得那么复杂我们实现一个简单的效果就好了。
有了我们可以实现一个让画面变灰的效果。
这个效果虽然简单但可以作为玩家角色死亡时的画面变灰处理以增强游戏氛围实用价值也不小。
先来张效果图避免观众流失了 编写一个 Pass
资源目录
我们先来看看一个 Pass 涉及到哪些内容
pipeline/passes相关脚本pipeline/resources/effects相关 Shaderpipeline/resources/materials相关材质
Pass 代码
接下来我们先忽略所有原理和细节快速实现一个变灰效果从而掌握流程。
1、从fxaa快速构建
我们新建一个 grayscale-pass.ts然后将 fxaa.ts 中的内容复制过来。
2、修改代码内容
修改与类名相关的代码如下逐行检查
ccclass(GrayscalePass)
export class GrayscalePass extends BasePass {_materialName grayscale;...property({ override: true })name GrayscalePass;property({ override: true })outputNames [GrayscalePassColor];...rener(camera: renderer.scene.Camera, ppl: rendering.Pipeline){...passUtils.addRasterPass(width, height, post-process, Camera_Grayscale_Pass${cameraID});...}
}删除下面这些代码
...
checkEnable () {return super.checkEnable() !!HrefSetting.fxaa;
}
...
_offset new Vec2
texSize new Vec4
...
material.setProperty(texSize, this.texSize.set(width, height, 0, 0))好了我们的 grayscale-pass.ts 就制作好了。
Cocos Shader
接下来我们制作让画面变灰的 Shader。
为了快速实现我们还是先复制 pipeline/resources/fxaa.effect改名为 grayscale.effect。
将 main 函数改为如下内容
void main () {vec4 color texture(inputTex,v_uv);float Y 0.2126 * color.r 0.7152 * color.g 0.0722 * color.b;fragColor vec4(Y,Y,Y ,1.0);
}为了 Shader 代码的整洁我们删除掉用不上的部分
#include unpack
#include ./chunks/fxaa
...
uniform Params {vec4 texSize;
};注意 in vec2 v_uv; 可别误删了要留着。
好了我们的Shader就准备好了
材质
材质是最简单的了只需要在 Cocos Creator 中复制 pipeline/resources/fxaa.mtl并改名为 grayscale。
然后把它的 effect 指定为 grayscale.effect 就可以了。
到这里 一个 GrayscalePass 就制作完成啦。
加入新的 Pass
材质加载
1、双击 pipeline/resources/pipeline.prefab。
2、在属性面板中找到 PipelineAssets 组件。
3、将 Materials 后面的数字加1没有改过的话应该是8我们把它变成0可以看到最下方空出来一个元素。 4、将 pipeline/resources/materials/grayscale.mtl 拖进去保存 pipeline.prefab。
材质就会在 pipeline 启动的时候加载啦。
添加 GrayscalePass 到 Graph 数据
为了能够在 CRP Graph 中添加节点我们需要先将 GrayscalePass 注册到 graph 数据里。
打开 pipeline/graph/nodes/pass.ts在末尾追加一行代码
createPassGraph(BasePass);
createPassGraph(BloomPass);
...
//GrayscalePass
createPassGraph(GrayscalePass);添加节点
按照之前教过的方法 算了再从头教一次吧。
打开 CRP Graph
新建一个空节点将 pipeline/graph/pipeline-graph.ts 组件拖到这个节点上勾选组件上的 Edit 复选框就会弹出 RenderPipeline Graph 窗口
你可以看到下面这样的窗口
添加 GrayscalePass
在窗口中点击右键会弹出第一级菜单选择 AddNode。
在弹出的新菜单中选择 pipeline最底部。
接下来在弹出的新菜单中选择 GrayscalePass最底部。
就能得到一个 GrayscalePass 节点了。
将它放入 main 管线中的适合位置即可。 这里麒麟子把它放在了 BloomPass 之前。 关掉这个窗口回到编辑器就可以看到画面变灰啦。 最后画个饼
今天的内容就到此结束了。 虽然我们没有对管线的细节和实现原理进行分析但通过对 FXAA 的 借鉴我们实现了一个让画面变灰的后处理效果 。
这就叫站在巨人的肩膀上。
下一篇文章我们会从原理出发讲解自定义管线的设计。
后面的文章会陆续包含前向管线、延迟管线、BLOOM、TAA、FSR 等讲解。
再后面的文章会基于这个管线新增更多高级功能包括但不限于SSR、SSAO 等等。
当然也有很多朋友在问原生开发相关的功能恰好 Cocos Cyberpunk 在原生端也是做了非常多的优化和兼容性处理的这一块的内容也会在后面的文章中进行分享敬请期待。