Cocos Creator 3.8 后期效果 Shader 编写(2/2) 进阶篇

dingdingding

看不懂,但我要假装看懂了,标记

顶,mark

大佬,我想问下这个代码下,我再进行降采样和升采样。在这过程中会向材质传送新的texelsize并绘制,但是会存在texelsize没有刷新的情况。我想问下材质中的属性刷新的条件

    let shadeingScale = 1 / 2;
    //降采样
    for (let i = 0; i < setting.iterations; ++i) {
        this.params.x = setting.BlurRadius / passViewport.width / 2;
        this.params.y = 0;
        passContext.material.setProperty('params', this.params, 0);

        this.params.x = 0;
        this.params.y = setting.BlurRadius / passViewport.height / 2;
        passContext.material.setProperty('params', this.params, 1);

        let slotName = `${"dsGBloomPassDownSampleHoriColor"}${cameraID}${i}`;
        passContext
            .updatePassViewPort(shadeingScale)
            .addRenderPass('post-process', `gbloom-horiDown${cameraID}${i}`)
            .setPassInput(input, 'gbloomTexture')
            .addRasterView(slotName, gfx.Format.RGBA8)
            .blitScreen(2)
            .version();
        input = slotName;

        slotName = `${"dsGBloomPassDownSampleVertColor"}${cameraID}${i}`;

        passContext
            .updatePassViewPort(shadeingScale)
            .addRenderPass('post-process', `gbloom-vertDown${cameraID}${i}`)
            .setPassInput(input, 'gbloomTexture')
            .addRasterView(slotName, gfx.Format.RGBA8)
            .blitScreen(3)
            .version();
        input = slotName;

        shadeingScale /= 2;
    }
    
    //升采样
    for (let i = setting.iterations - 2; i >= 0; --i) {
        this.params.x = setting.BlurRadius / passViewport.width * 2;
        this.params.y = 0;
        passContext.material.setProperty('params', this.params, 0);

        this.params.x = 0;
        this.params.y = setting.BlurRadius / passViewport.height * 2;
        passContext.material.setProperty('params', this.params, 2);

        shadeingScale *= 2;

        let slotName = `${"dsGBloomPassUpSampleHoriColor"}${cameraID}${i}`;

        passContext
            .updatePassViewPort(shadeingScale)
            .addRenderPass('post-process', `gbloom-horiUp${cameraID}${i}`)
            .setPassInput(input, 'gbloomTexture')
            .addRasterView(slotName, gfx.Format.RGBA8)
            .blitScreen(0)
            .version();
        input = slotName;

        slotName = `${"dsGBloomPassUpSampleVertColor"}${cameraID}${i}`;
        let downInput = `${"dsGBloomPassDownSampleVertColor"}${cameraID}${i}`;

        if (i == 0) {
            slotName = this.slotName(camera, 0);
        }
        passContext
            .updatePassViewPort(shadeingScale)
            .addRenderPass('post-process', `gbloom-vertUp${cameraID}${i}`)
            .setPassInput(input, 'gbloomTexture')
            .addRasterView(slotName, gfx.Format.RGBA8)
            .blitScreen(2)
            .version();
        input = slotName;
    }

在降采样过程中,属性都被正确传进去了,在升采过程中,passindex = 2的属性并未正确刷新,导致图像出现了错误

在Shader中多个pass时,后面的pass如何获取前一个pass渲染的渲染数据呢?这边不管多少个pass获取到的sampler2D总是原数据,无法做到一张图片多次绘制并处理的需求



这样写第二个pass会覆盖掉第一个pass的渲染结果,预想是第二个pass在第一个pass上做二次处理,怎么获取第一次pass的数据?

自定义渲染管线

1、高斯模糊耗性能吗?
2、打断dc吗?

2.x怎么自定义渲染管线

如果想实现类似翻书搓牌的效果呢。

抗锯齿的时候同时开了fxaa,taa,fsa的时候,虽然多开了fsa更清晰一点了,但是模型在动的时候,会有锯齿的出现。

大佬,请问你上面图片里的RenderGraph 这个节点编辑器在哪里打开呢?我看你的几篇教程都有提到这个工具,但是官方只字未提,文档里也没看到。

你想说的是shader graph吧 【官方 Shader Graph 插件发布帖】 - Creator 3.x - Cocos中文社区

不是,是这个,他文章里提到有这个窗口,但我没找到。这个不是shader graph,是编辑渲染管线流程的

按照之前文章中讲过的方法,打开 Custom Render Pipeline Graph 窗口,可以在 main 管线中,找到 DeferredBufferPassDeferredLightingPass


image

哦,那你要下3.8以前的版本就有了,3.8以后自定义管线的方式不一样了

有没有后期效果怎么拿深度图 @boyue

shader取投影距离就行

顶顶顶顶顶

这个只有后效shader里面可以用 还是普通shader里面可以用。

没有后处理就自己改渲染管线呗。在管线第一次渲染的时候就取到相机距离。

这个后效为什么需要继承重写这个?不可以获取那个bit什么的组件,然后获取那个shader修改参数吗?这两种有什么区别?