improve(outline): improve outline effect (Orillusion#247)

Change the offline texture size of the outline to be modifiable through EngineSetting(textureScale). offset outline uv revert default outline color.
0xKiKi · Aug 9, 2023 · e00b1b4 · e00b1b4
1 parent 1aa2a85
commit e00b1b4
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 29 deletions.
diff --git a/samples/pick/Sample_OutlineEffectPick.ts b/samples/pick/Sample_OutlineEffectPick.ts
@@ -10,20 +10,17 @@ class Sample_OutlineEffectPick {
     highLightColor: Color;
 
     constructor() {
-        this.selectColor = new Color(1.0, 0, 0.0, 3.0);
-        this.selectColor.convertToHDRRGB();
-
-        this.highLightColor = new Color(0.0, 1.0, 1.0, 3);
-        this.highLightColor.convertToHDRRGB();
+        this.selectColor = new Color(1.0, 0, 0.0, 1.0);
+        this.highLightColor = new Color(0.0, 1.0, 1.0, 1);
     }
 
     async run() {
         Engine3D.setting.pick.enable = true;
         Engine3D.setting.pick.mode = `pixel`;
 
-        Engine3D.setting.render.postProcessing.outline.outlinePixel = 2;
-        Engine3D.setting.render.postProcessing.outline.fadeOutlinePixel = 1;
-        Engine3D.setting.render.postProcessing.outline.strength = 0.5;
+        Engine3D.setting.render.postProcessing.outline.outlinePixel = 3;
+        Engine3D.setting.render.postProcessing.outline.fadeOutlinePixel = 6;
+        Engine3D.setting.render.postProcessing.outline.strength = 1;
 
         // init Engine3D
         await Engine3D.init({});

diff --git a/src/Engine3D.ts b/src/Engine3D.ts
@@ -163,6 +163,7 @@ export class Engine3D {
                     groupCount: 4,
                     outlinePixel: 2,
                     fadeOutlinePixel: 4,
+                    textureScale: 0.7,
                     useAddMode: false,
                     debug: true,
                 },

diff --git a/src/assets/shader/compute/OutLineBlendColor_cs.ts b/src/assets/shader/compute/OutLineBlendColor_cs.ts
@@ -28,15 +28,24 @@ export let OutLineBlendColor_cs: string = /*wgsl*/ `
          return;
       }
 
-      let uv01 = vec2<f32>(fragCoord) / (vec2<f32>(texSize) - 1.0);
-      let outLineColor = textureSampleLevel(lowTex, lowTexSampler, uv01, 0.0) * outlineSetting.strength;
-      var newOC = textureLoad(inTex, fragCoord, 0);
+      var uv01 = vec2<f32>(fragCoord) / (vec2<f32>(texSize) - 1.0);
+      var offset = vec2<f32>(texSize) / vec2<f32>(outlineSetting.lowTexWidth, outlineSetting.lowTexHeight);
+      offset = 0.5 * offset / (vec2<f32>(texSize) - 1.0);
+      uv01 += offset;
+      var outLineColor = textureSampleLevel(lowTex, lowTexSampler, uv01, 0.0);
+
+      outLineColor.x *= outlineSetting.strength;
+      outLineColor.y *= outlineSetting.strength;
+      outLineColor.z *= outlineSetting.strength;
+
+      var inColor = textureLoad(inTex, fragCoord, 0);
       var blendColor:vec3<f32> = vec3<f32>(0.0);
       if(outlineSetting.useAddMode > 0.5){
-         blendColor = vec3<f32>(newOC.xyz) + vec3<f32>(outLineColor.xyz) * outLineColor.w;
+         blendColor = inColor.xyz + outLineColor.xyz * outLineColor.w;
       }else{
-         blendColor = mix(vec3<f32>(newOC.xyz), vec3<f32>(outLineColor.xyz), outLineColor.w);
+         blendColor = mix(inColor.xyz, outLineColor.xyz, outLineColor.w);
       }
-      textureStore(outlineTex, fragCoord , vec4<f32>(blendColor, newOC.w));
+      textureStore(outlineTex, fragCoord, vec4<f32>(blendColor, inColor.w));
    }
+
 `
diff --git a/src/assets/shader/compute/OutlineCalcOutline_cs.ts b/src/assets/shader/compute/OutlineCalcOutline_cs.ts
@@ -45,9 +45,11 @@ export let OutlineCalcOutline_cs: string = /*wgsl*/ `
   fn CsMain( @builtin(workgroup_id) workgroup_id : vec3<u32> , @builtin(global_invocation_id) globalInvocation_id : vec3<u32>)
   {
     fragCoordLow = vec2<i32>( globalInvocation_id.xy );
-    fragCoord = fragCoordLow * 2;
     texSize = textureDimensions(indexTexture).xy;
     lowSize = vec2<i32>(i32(outlineSetting.lowTexWidth), i32(outlineSetting.lowTexHeight));
+    let scaleValue = f32(texSize.x) / f32(lowSize.x);
+    fragCoord.x = i32(f32(fragCoordLow.x) * scaleValue);
+    fragCoord.y = i32(f32(fragCoordLow.y) * scaleValue);
 
     if(fragCoord.x >= i32(texSize.x) || fragCoord.y >= i32(texSize.y)){
         return;

diff --git a/src/assets/shader/compute/Outline_cs.ts b/src/assets/shader/compute/Outline_cs.ts
@@ -45,7 +45,6 @@ export let Outline_cs: string = /*wgsl*/ `
         coordIndex = fragCoord.x + fragCoord.y * i32(texSize.x);
         fragOutline = weightBuffer[coordIndex];
         
-        var blendColor = vec3<f32>(0.0);
         var newOC = vec4<f32>(0.0);
         
         calcOutline();
@@ -55,26 +54,24 @@ export let Outline_cs: string = /*wgsl*/ `
             newOC = vec4<f32>(outLineColor, fragOutline.weight);
         }
         
-        let coordIndex0 = fragCoord.x + 1 + (fragCoord.y - 1) * i32(texSize.x);
-        let coordIndex1 = fragCoord.x - 1 + (fragCoord.y - 1) * i32(texSize.x);
-        let coordIndex2 = fragCoord.x + (fragCoord.y + 1) * i32(texSize.x);
+        let coordIndex0 = fragCoord.x + 1 + (fragCoord.y + 1) * i32(texSize.x);
+        let coordIndex1 = fragCoord.x - 1 + (fragCoord.y + 1) * i32(texSize.x);
+        let coordIndex2 = fragCoord.x + (fragCoord.y - 1) * i32(texSize.x);
 
         let oldOC = oldOutlineColor[coordIndex];
         let oldOC0 = oldOutlineColor[coordIndex0];
         let oldOC1 = oldOutlineColor[coordIndex1];
         let oldOC2 = oldOutlineColor[coordIndex2];
         
-        newOC = mix((oldOC + oldOC0 + oldOC1 + oldOC2) * 0.25, newOC, 0.4);
-        
+        newOC = mix((oldOC + oldOC0 + oldOC1 + oldOC2) * 0.25, newOC, 0.5);
         oldOutlineColor[coordIndex] = newOC;
         textureStore(lowTex, fragCoord, newOC);
     }
     
     fn calcOutline()
     {
         let outlinePixel = outlineSetting.outlinePixel;
-        let fadeOutlinePixel = outlineSetting.fadeOutlinePixel;
-        let pixelRadius = outlinePixel + fadeOutlinePixel;
+        let pixelRadius = outlinePixel + outlineSetting.fadeOutlinePixel;
         let minX = max(0.0, f32(fragCoord.x) - pixelRadius);
         let maxX = min(f32(texSize.x), f32(fragCoord.x) + pixelRadius);
         let minY = max(0.0, f32(fragCoord.y) - pixelRadius);
@@ -111,12 +108,12 @@ export let Outline_cs: string = /*wgsl*/ `
         }
     }
     
-    fn calcWeight(radius:f32, distance0:f32, outlinePixel:f32) -> f32{
-        let distance = distance0 - outlinePixel;
-        if(distance < 0.0){
+    fn calcWeight(totalRadius:f32, distance:f32, innerRadius:f32) -> f32{
+        if(distance < innerRadius){
             return 1.0;
         }
-        var ret = 1.0 - distance / (radius - outlinePixel);
+        var ret = 1.0 - (distance - innerRadius)  / (totalRadius - innerRadius);
+
         return ret;
     }
 `

diff --git a/src/gfx/renderJob/post/OutlinePost.ts b/src/gfx/renderJob/post/OutlinePost.ts
@@ -183,7 +183,8 @@ export class OutlinePost extends PostBase {
         let presentationSize = webGPUContext.presentationSize;
         let w = presentationSize[0];
         let h = presentationSize[1];
-        this.lowTexSize = new Vector2(Math.floor(w * 0.5), Math.floor(h * 0.5));
+        let textureScale = Engine3D.setting.render.postProcessing.outline.textureScale;
+        this.lowTexSize = new Vector2(Math.ceil(w * textureScale), Math.ceil(h * textureScale));
 
         this.lowTex = new VirtualTexture(this.lowTexSize.x, this.lowTexSize.y, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING);
         this.lowTex.name = 'lowTex';

diff --git a/src/setting/post/OutlineSetting.ts b/src/setting/post/OutlineSetting.ts
@@ -26,7 +26,8 @@ export type OutlineSetting = {
      */
     useAddMode: boolean;
     /**
-     * 
+     * Set the scaling value of the offline map used for calculation relative to the GBuffer map
      */
+    textureScale: number,
     debug: boolean;
 };