请问post process如何获取法向贴图

Creator 3.x
#1

目前使用版本3.8.6进行屏幕后效处理，可以拿到color和depth的信息。
PipelineContext下有colorName 和depthStencilName。
现在想要实现一些边缘检测需要法向贴图，请问这个现在有办法获取吗？
大佬求教！@panda

#2

目前应该是不能直接获取到，只能自定义管线增加法线贴图输出来使用

#3

听起来自己增加pass好像很复杂？我应该从哪里开始入手？我看到之前的版本有 Deferred 渲染，那个gbuffer能拿出来给到后处理吗？
求教增加pass还是使用defferd？

#4

我也在看源码，新管线目前还没有延迟渲染，你可以用crp自己实现

#5

可以试试不要法线贴图的边缘检测

#6

用depth可以做边缘检测，只是少了法向少了个来源

#7

用crp实现增加pass还是只增加deffered.
我对cocos还不熟……

#8

增加一个renderpass 输出法线贴图

#9

可以在渲染场景的时候同时输出color和normal，然后在后处理中使用。流程类似这样：

  • 创建RT时创建两个颜色缓冲，并且设置为相机的target。

    const rt = new RenderTexture();
const passInfo = new gfx.RenderPassInfo([_colorAttachment, _normalAttachment], _depthStencilAttachment);
rt.reset({ passInfo });

  • 修改渲染Shader

    // FS
layout(location = 1) out vec4 fragNormal;

vec4 frag () {
    // normal
    fragNormal = vec4(v_worldNormal, 1.0);
    // color
    return color;
}

  • 在后处理中使用
    Snipaste_2025-04-14_12-37-02

具体细节的话还需要考虑一些类似跨平台、流程控制和抗锯齿问题。

2赞
#10

哇大佬太强了！直接一套做了！但是找不到代码往哪里赛。

我可以理解成，我直接创建一个RT，然后给相加，然后增加shader以及材质给场景里的东西，然后拿着这张帖图，做渲染以及后处理吗？这是不是相当于实现了defferred render？

#11

这个代码应该是放在哪里？我想做到微信小游戏平台上，因此应该是webgl，抗锯齿可能先不用考虑。流程控制就不太懂，是指整个pipeline吗?

#12

目前尚未支持GBuffers。
如果需要法线，得自己改standard shader，输出normal。
同时还需要修改管线，在ForwardPass中，添加normal的render target。

我们也在设计延迟管线方案，希望用户不需要修改场景，就能做到切换各类管线，并且有一定的自定义能力。
这个问题比较复杂，所以还需要些时间。

2赞
#13

这个是放在ts脚本里，相机初始化时更新相机的target为RT，渲染完场景后在后处理阶段绑定normal到后处理材质，后处理完毕后上屏。RT的所有颜色缓冲可以通过 rt.window.framebuffer.colorTextures 获得。
抗锯齿是离屏渲染会丢失Canvas默认的抗锯齿，流程控制是指这个流程可配置，扩展性好什么的。

#14

这里还是Forward着色，在着色的同时维护一个normal GBuffer，相当于一次场景渲染后，RT的颜色附件1提供颜色，颜色附件2提供normal，深度模板附件提供深度。后处理阶段将这3个纹理绑定到后处理材质，后处理完毕后上屏。

#15

也就是设置好rt，然后修改使用到的材质的shader，让他把颜色2作为normal的输出？这样每个shader画的时候，就会相当于得到一个gbuffer？
大佬不知道可否上传git或者分享一下，我“借鉴”一下 :heart_eyes:谢谢大佬！