基于rt的3d描边-残疾版

Creator 3.x
#1

第一步先渲染模板采样深度图有灰度,就把它变成黑色

// Copyright (c) 2017-2023 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
  - passes:
      - vert: depthStencilBlur-vs
        frag: depthStencilBlur-fs
        pass: depthStencilBlur
        depthStencilState:
          depthTest: false
          depthWrite: false    
}%
CCProgram depthStencilBlur-vs %{
#include <../chunks/vs1>
}%
CCProgram depthStencilBlur-fs %{
precision highp float;
#include <../chunks/depth>
layout(location = 0)out vec4 fragColor;
in vec2 v_uv;
void main() {
  float depth = GetDepthFromTex(v_uv); 
  #if __VERSION__ < 450
    depth = 2.0 * depth - 1.0;
  #endif
  if(depth<1.0){
    depth=0.0;
  }
  vec4 color=vec4(depth,depth,depth,1.0);
  fragColor=color;
}
}%

第二步对模板进行模糊

// Copyright (c) 2017-2023 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
  - passes:
      - vert: horizontal-vs
        frag: blur-fs
        pass: horizontalBlur
        depthStencilState:
          depthTest: false
          depthWrite: false
      - vert: vertical-vs
        frag: blur-fs
        pass: verticalBlur
        depthStencilState:
          depthTest: false
          depthWrite: false
}%
CCProgram horizontal-vs %{
    precision highp float;
    #include <legacy/decode-standard>
    #include <post-process/pipeline>
    out vec2 v_uvs[5];
    #pragma rate verticalVsubo pass
    uniform verticalVsubo {
      vec4 mainTexTexelSize;
      float blurSize;
    };
    void main () {
      StandardVertInput In;
      CCDecode(In);
      FLIP_VULKAN_NDC(In.position);
      vec2 v_uv=a_texCoord;
      v_uvs[0]=v_uv;
      v_uvs[1]=v_uv+vec2(mainTexTexelSize.x*1.0,0.0)*blurSize;
      v_uvs[2]=v_uv-vec2(mainTexTexelSize.x*1.0,0.0)*blurSize;
      v_uvs[3]=v_uv+vec2(mainTexTexelSize.x*2.0,0.0)*blurSize;
      v_uvs[4]=v_uv-vec2(mainTexTexelSize.x*2.0,0.0)*blurSize;
      gl_Position = In.position;
    }
}%

CCProgram vertical-vs %{
    precision highp float;
    #include <legacy/decode-standard>
    #include <post-process/pipeline>
    out vec2 v_uvs[5];
    #pragma rate verticalVsubo pass
    uniform verticalVsubo {
      vec4 mainTexTexelSize;
      float blurSize;
    };

    void main () {
      StandardVertInput In;
      CCDecode(In);
      FLIP_VULKAN_NDC(In.position);
      vec2 v_uv=a_texCoord;
      v_uvs[0]=v_uv;
      v_uvs[1]=v_uv+vec2(0.0,mainTexTexelSize.y*1.0)*blurSize;
      v_uvs[2]=v_uv-vec2(0.0,mainTexTexelSize.y*1.0)*blurSize;
      v_uvs[3]=v_uv+vec2(0.0,mainTexTexelSize.y*2.0)*blurSize;
      v_uvs[4]=v_uv-vec2(0.0,mainTexTexelSize.y*2.0)*blurSize;
      gl_Position = In.position;
    }

 
  
}%


CCProgram blur-fs %{
precision highp float;

layout(location = 0)out vec4 fragColor;
in vec2 v_uvs[5];
#pragma rate  screenTex2 pass
uniform sampler2D screenTex2;

void main() {
      vec3 weight=vec3(0.4026,0.2442,0.0545);
      vec3 sum=texture(screenTex2,v_uvs[0]).rgb*weight[0];
      for(int i=1;i<3;i++){
        sum+=texture(screenTex2,v_uvs[i]).rgb*weight[i];
        sum+=texture(screenTex2,v_uvs[2*i]).rgb*weight[i];
      }
      fragColor=vec4(sum,texture(screenTex2, v_uvs[0]).a);
  }
}%

效果图:
// Copyright © 2017-2023 Xiamen Yaji Software Co., Ltd.

CCEffect %{

techniques:

  • passes:

    • vert: horizontal-vs

      frag: blur-fs

      pass: horizontalBlur

      depthStencilState:

      depthTest: false

      depthWrite: false

    • vert: vertical-vs

      frag: blur-fs

      pass: verticalBlur

      depthStencilState:

      depthTest: false

      depthWrite: false

}%

CCProgram horizontal-vs %{

precision highp float;

#include <legacy/decode-standard>

#include <post-process/pipeline>

out vec2 v_uvs[5];

#pragma rate verticalVsubo pass

uniform verticalVsubo {

  vec4 mainTexTexelSize;

  float blurSize;

};

void main () {

  StandardVertInput In;

  CCDecode(In);

  FLIP_VULKAN_NDC(In.position);

  vec2 v_uv=a_texCoord;

  v_uvs[0]=v_uv;

  v_uvs[1]=v_uv+vec2(mainTexTexelSize.x*1.0,0.0)*blurSize;

  v_uvs[2]=v_uv-vec2(mainTexTexelSize.x*1.0,0.0)*blurSize;

  v_uvs[3]=v_uv+vec2(mainTexTexelSize.x*2.0,0.0)*blurSize;

  v_uvs[4]=v_uv-vec2(mainTexTexelSize.x*2.0,0.0)*blurSize;

  gl_Position = In.position;

}

}%

CCProgram vertical-vs %{

precision highp float;

#include <legacy/decode-standard>

#include <post-process/pipeline>

out vec2 v_uvs[5];

#pragma rate verticalVsubo pass

uniform verticalVsubo {

  vec4 mainTexTexelSize;

  float blurSize;

};

void main () {

  StandardVertInput In;

  CCDecode(In);

  FLIP_VULKAN_NDC(In.position);

  vec2 v_uv=a_texCoord;

  v_uvs[0]=v_uv;

  v_uvs[1]=v_uv+vec2(0.0,mainTexTexelSize.y*1.0)*blurSize;

  v_uvs[2]=v_uv-vec2(0.0,mainTexTexelSize.y*1.0)*blurSize;

  v_uvs[3]=v_uv+vec2(0.0,mainTexTexelSize.y*2.0)*blurSize;

  v_uvs[4]=v_uv-vec2(0.0,mainTexTexelSize.y*2.0)*blurSize;

  gl_Position = In.position;

}

}%

CCProgram blur-fs %{

precision highp float;

layout(location = 0)out vec4 fragColor;

in vec2 v_uvs[5];

#pragma rate screenTex2 pass

uniform sampler2D screenTex2;

void main() {

  vec3 weight=vec3(0.4026,0.2442,0.0545);

  vec3 sum=texture(screenTex2,v_uvs[0]).rgb*weight[0];

  for(int i=1;i<3;i++){

    sum+=texture(screenTex2,v_uvs[i]).rgb*weight[i];

    sum+=texture(screenTex2,v_uvs[2*i]).rgb*weight[i];

  }

  fragColor=vec4(sum,texture(screenTex2, v_uvs[0]).a);

}

}%
效果图:
2602dfb3fd47f50345b505d5801857f
本来是想合成模糊模板贴图和场景颜色贴图 但是发现先渲染其他层的物体 再渲染描边层的物体,相机加上2个后处理(模板Pass,模糊pass)输出到场景中是黑屏的,啥报错也没有就很奇怪,只能先渲染到RT中,对crp还不是很熟悉以后再研究(或许是他的bug :neutral_face:)
最后读取RT对描边层物体进行着色

// 顶点着色器
CCEffect %{
  techniques:
  - name: transparent
    passes:
    - vert: base-vs:vert
      frag: base-fs:frag
      properties: 
        outlineColor: { value: [1,1,1,1],editor: {type: color} }
        speed: { value: 1.0 }
        outlineRt: { value: white }
        mainTexture: { value: white }  
}%   
CCProgram base-vs %{
    precision highp float;
    #include <legacy/input-standard>
    #include <builtin/uniforms/cc-global>
    #include <builtin/functionalities/world-transform>
    out vec2 v_uv;
    out vec4 v_clipPos;
    vec4 vert () {
      StandardVertInput In;
      CCVertInput(In);
      mat4 matWorld,matWorldIT;
      CCGetWorldMatrixFull(matWorld,matWorldIT);
      v_clipPos=cc_matProj*(cc_matView*matWorld)*In.position;
      v_uv=a_texCoord;
      return v_clipPos;
    }
}%
CCProgram base-fs %{
      precision highp float;
      #include <builtin/uniforms/cc-global>
      uniform sampler2D outlineRt;
      uniform sampler2D mainTexture;
      uniform constantFs{
        vec4 outlineColor;
        float speed;
      };
      in vec2 v_uv;
      in vec4 v_clipPos;
      vec4 frag () {
        vec4 finalColor;
        vec2 screenUv=v_clipPos.xy/v_clipPos.w*0.5+0.5;
        float depth=texture(outlineRt,screenUv).r;

        vec4 blur=texture(outlineRt,screenUv);
        if(depth<=0.01){
            finalColor=vec4(texture(mainTexture,v_uv).rgb,1.0);
        }else{
          finalColor=vec4((outlineColor.r),depth*sin(cc_time.x*speed)*0.5+0.5,depth*sin(cc_time.x*speed)*0.5+0.5,1.0);
            
        }
        //finalColor=texture(outlineRt,v_uv);
        return finalColor;
      }
}%
```[outline.rar|attachment](upload://4126zg7RxK0zklEC9HsKNLCKUo3.rar) (47.2 KB) 
效果:
![image|690x374](upload://eVYXDHK03FCOnV36rpo8b1DoLoZ.png) 

当然效果不是很好
#2

效果图:

image
image1127×612 61.7 KB

2赞
#3

代码:
outline.rar (47.2 KB)

#4

想什么来什么，瞌睡来了有人递枕头，谢啦，比心:heart: