refactor: use dedicated outline shader output (#9070)

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>

Author: mvaligursky

src/extras/renderers/outline-renderer.js

@@ -132,7 +132,7 @@ class OutlineRenderer {
         });
 
         // custom shader pass for the outline camera
-        this.outlineShaderPass = this.outlineCameraEntity.camera.setShaderPass('OutlineShaderPass');
+        this.outlineShaderPass = this.outlineCameraEntity.camera.setShaderPass('pcOutline');
 
         // function called after the camera has rendered the outline objects to the texture
         this.postRender = (cameraComponent) => {
@@ -168,27 +168,13 @@ class OutlineRenderer {
         });
 
         this.quadRenderer = new QuadRender(this.shaderBlend);
-
-        this.whiteTex = new Texture(device, {
-            name: 'OutlineWhiteTexture',
-            width: 1,
-            height: 1,
-            format: PIXELFORMAT_SRGBA8,
-            mipmaps: false
-        });
-        const pixels = this.whiteTex.lock();
-        pixels.set(new Uint8Array([255, 255, 255, 255]));
-        this.whiteTex.unlock();
     }
 
     /**
      * Destroy the outline renderer and its resources.
      */
     destroy() {
 
-        this.whiteTex.destroy();
-        this.whiteTex = null;
-
         this.outlineCameraEntity.destroy();
         this.outlineCameraEntity = null;
 
@@ -248,7 +234,7 @@ class OutlineRenderer {
 
                     if (options.pass === outlineShaderPass) {
 
-                        // custom shader for the outline shader pass, renders single color meshes using emissive color
+                        // custom shader for the outline shader pass, preserving material opacity
                         const opts = new StandardMaterialOptions();
                         opts.defines = options.defines;
                         opts.opacityMap = options.opacityMap;
@@ -272,11 +258,10 @@ class OutlineRenderer {
                     return options;
                 };
 
-                // set emissive color override for the outline shader pass only
+                // set the color consumed only by the pcOutline shader variant
                 _tempColor.linear(color);
                 const colArray = new Float32Array([_tempColor.r, _tempColor.g, _tempColor.b]);
-                meshInstance.setParameter('material_emissive', colArray, 1 << this.outlineShaderPass);
-                meshInstance.setParameter('texture_emissiveMap', this.whiteTex, 1 << this.outlineShaderPass);
+                meshInstance.setParameter('pcOutlineColor', colArray);
             }
         });
 
@@ -297,7 +282,7 @@ class OutlineRenderer {
         meshInstances.forEach((meshInstance) => {
             if (meshInstance.material instanceof StandardMaterial) {
                 meshInstance.material.onUpdateShader = null;
-                meshInstance.deleteParameter('material_emissive');
+                meshInstance.deleteParameter('pcOutlineColor');
             }
         });
     }

src/scene/shader-lib/glsl/chunks/lit/frag/litMain.js

@@ -4,6 +4,7 @@ export default /* glsl */`
 #include "varyingsPS"
 #include "litUserDeclarationPS"
 #include "frontendDeclPS"
+#include "outlineDeclarationPS"
 
 #if defined(PICK_PASS) || defined(PREPASS_PASS)
 

src/scene/shader-lib/glsl/chunks/lit/frag/outline-declaration.js

@@ -0,0 +1,5 @@
+export default /* glsl */`
+#ifdef PCOUTLINE_PASS
+uniform vec3 pcOutlineColor;
+#endif
+`;

src/scene/shader-lib/glsl/chunks/lit/frag/outline-output.js

@@ -0,0 +1,5 @@
+export default /* glsl */`
+#ifdef PCOUTLINE_PASS
+gl_FragColor.rgb = gammaCorrectOutput(pcOutlineColor);
+#endif
+`;

src/scene/shader-lib/glsl/chunks/lit/frag/pass-forward/litForwardBackend.js

@@ -238,5 +238,7 @@ void evaluateBackend() {
         // output when the shadow catcher is enabled - accumulated shadows
         gl_FragColor.rgb = vec3(dShadowCatcher);
     #endif
+
+    #include "outlineOutputPS"
 }
 `;

src/scene/shader-lib/glsl/collections/shader-chunks-glsl.js

@@ -89,6 +89,8 @@ import normalCoreVS from '../chunks/common/vert/normalCore.js';
 import normalMapPS from '../chunks/standard/frag/normalMap.js';
 import opacityPS from '../chunks/standard/frag/opacity.js';
 import opacityDitherPS from '../chunks/standard/frag/opacity-dither.js';
+import outlineDeclarationPS from '../chunks/lit/frag/outline-declaration.js';
+import outlineOutputPS from '../chunks/lit/frag/outline-output.js';
 import outputPS from '../chunks/lit/frag/output.js';
 import outputAlphaPS from '../chunks/lit/frag/outputAlpha.js';
 import outputTex2DPS from '../chunks/common/frag/outputTex2D.js';
@@ -260,6 +262,8 @@ const shaderChunksGLSL = {
     normalMapPS,
     opacityPS,
     opacityDitherPS,
+    outlineDeclarationPS,
+    outlineOutputPS,
     outputPS,
     outputAlphaPS,
     outputTex2DPS,

src/scene/shader-lib/wgsl/chunks/lit/frag/litMain.js

@@ -4,6 +4,7 @@ export default /* wgsl */`
 #include "varyingsPS"
 #include "litUserDeclarationPS"
 #include "frontendDeclPS"
+#include "outlineDeclarationPS"
 
 #if defined(PICK_PASS) || defined(PREPASS_PASS)
 

src/scene/shader-lib/wgsl/chunks/lit/frag/outline-declaration.js

@@ -0,0 +1,5 @@
+export default /* wgsl */`
+#ifdef PCOUTLINE_PASS
+uniform pcOutlineColor: vec3f;
+#endif
+`;

src/scene/shader-lib/wgsl/chunks/lit/frag/outline-output.js

@@ -0,0 +1,5 @@
+export default /* wgsl */`
+#ifdef PCOUTLINE_PASS
+output.color = vec4f(gammaCorrectOutput(uniform.pcOutlineColor), output.color.a);
+#endif
+`;

src/scene/shader-lib/wgsl/chunks/lit/frag/pass-forward/litForwardBackend.js

@@ -244,6 +244,8 @@ fn evaluateBackend() -> FragmentOutput {
         output.color = vec4f(vec3f(dShadowCatcher), output.color.a);
     #endif
 
+    #include "outlineOutputPS"
+
     return output;
 }
 `;