可以直接在shander中获取的深度图,不再复制场景。


首先是场景展示模型来源: (FREE) Low Poly Game Assets - Download Free 3D model by LowPolyBoy (@lowPolyBoy)

可以直接在shander中获取的深度图,不再复制场景。

问题?

本人是因为一些客户需求,刚从unity转到cocos的技术美术。但发现在unity中写shader经常用到的深度图在cocos中官方并没有提供。就在网上寻找一些方案,网上的方案大多都指向了复制一个场景给与其专门渲染深度的材质,用一个RT来渲染深度图。但这个方案导致后期对场景维护的话要进行双倍维护以及场景中如果存与程序交互的物品也要双份控制吗?

可编程渲染管线!

最后发现cocos的可渲染管线!本来想有没有办法直接将深度缓冲中数据存到一张图中,这样感觉简直完美。又不需要额外的渲染,也没有笨重的维护简直完美。但最后尝试了两天没有进展。最后退而求其次新增了一个pass来专门渲染深度图。感觉应该比复制一个场景单独相机渲染要省一点。

觉得改写渲染管线非常麻烦的朋友。想直接使用的可以移步咸鱼了,里面有我已经实现好的和使用方法仅仅收取一点手工费。 我在闲鱼发布了【Cocos不复制场景深度图输出】

接下来也可以跟着我一步步实现。

1. 复制原本的渲染管线。

编写渲染管线 | Cocos Creator
因为我们是改写原本的渲染管线所以线复制原本的渲染管线。也就是上面连接中 “改写内置管线”根据官方的步骤复制一个渲染管线。
在这里我对builtin-pipeline.ts的类名,以及注册名是修改为



对builtin-pipeline-settings.ts的类名改为

2. 改写渲染管线_添加配置参数。

本次主要改写的类是builtin-pipeline.ts中的


这部分代码,这部分是负责场景的前向渲染。找到它!

在它上面有一个结构体


我们为其添加两个参数用来控制是否渲染开启深度图渲染以及深度图是否要降采样。
这两个参数也要在builtin-pipeline.ts开头的结构体CameraConfigs中添加。

最后我们在BuiltinForwardPassBuilder的configCamera这个方法内配置我们新增的参数。


这里的settings是通过builtin-pipeline-settings.ts生成的配置文件“builtin-pipeline-types.ts”。我们后续也会将这两个参数通过builtin-pipeline-settings.ts暴漏在面板。

3. 改写渲染管线_创建深度贴图的渲染资源。

在BuiltinForwardPassBuilder的类中有一个方法windowResize我们在其中创建渲染资源。


我们在其中添加下图的代码。

4. 改写渲染管线_编写添加深度渲染pass的方法。

其实这个函数是根据下面的_addCascadedShadowMapPass仿写的


主要包含以下代码。

5. 改写渲染管线_将深度pass添加到主函数中。

我们找到BuiltinForwardPassBuilder的setup方法


在其中使用我们上一步写好的方法

正如注释的一样我们要在_addForwardRadiancePasses和_buildReflectionProbePass将其赋值给我们对应的贴图。

6. 改写渲染管线_赋值。

其实就是找到两个给阴影贴图赋值的地方将我们渲染的深度图给赋值到对应贴图上
我们直接搜索cc_shadowMap就会找到两个地方。着两个下面添加代码。


改写渲染管线部分到此结束。之前我们提到一个事情就是将参数暴漏在面板上。

7. 改写管线操作面板。

这里其中分为两个部分第一个是builtin-pipeline-settings.ts另一个builtin-pipeline-types.ts。
先进行builtin-pipeline-types.ts这里很简单虽然这个代码备注说是自己生成的但最后发现还是要改一下。
先找到PipelineSettings结构体


将我们之前自定义参数加入,下面有个构造函数和赋值的函数也同理

然后进行builtin-pipeline-settings.ts部分其实就是将参数加入


到此管线代码部分修改结束。

8.配置渲染管线 。

接下来就是使用渲染管线了


渲染管线的名称是builtin-pipeline.ts的最后一行

这里改完要重新加载引擎在左上角 开发者>重新加载。

9.给相机添加设置的组件。

我们设置的组件是要添加在相机上的

10.为shader添加depth-caster。

正如之前所说只有名叫depth-caster的shaderPass才能正常在管线的深度图pass中渲染
到这一步应该已经不难了有这个需求应该是会写shader的。
先为我们的天空盒shader添加depth-caster。现复制一个原本的天空盒shader。


然后片元着色器其实很简单,因为天空盒作为无限远只要输出白色就好了。
image
接下来就是给场景中的shader添加depth-caster,场景中可能有很多shader接下来举例一个以此类推。
一样是先添加一个pass
image
然后着色器的代码是这样的

这个shader代码来自麒麟子老师的文章 Cocos Shader入门基础七:一文读懂深度图 - Creator 3.x - Cocos中文社区

完成以上步骤就可以直接从shader中通过 uniform sampler2D cc_depthMap获取深度贴图使用。其中r通道为基础深度g通道为线性深度。经过简单的代码调整应该可以做到这样的雾气效果了。

本方案没有因为本人刚转到cocos对引擎熟悉度差没有进行多平台发包测试但应该问题不大必经阴影贴图也是类似的方案。

想要这个Dome,或者觉得这个就有点意思的话可以移步商店。给一点点支持。谢谢大家看到这里

2赞

是一种方案,但是我想说的是目前直接从场景主相机上也是可以获得depthtexture的

美术已经这么牛x了吗

我没找到,是什么样的方法?