Vignette support in the Compose render pass (#5867)

* Color grab pass can be used for custom render pass rendering

* Vignette support in the Compose render pass

* vignette in linear space

---------

Co-authored-by: Martin Valigursky <[email protected]>

Author: mvaligursky

examples/src/examples/graphics/post-processing.mjs

@@ -112,6 +112,51 @@ function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                     precision: 2
                 })
             )
+        ),
+        jsx(Panel, { headerText: 'Vignette' },
+            jsx(LabelGroup, { text: 'enabled' },
+                jsx(BooleanInput, {
+                    type: 'toggle',
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'data.vignette.enabled' }
+                })
+            ),
+            jsx(LabelGroup, { text: 'inner' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'data.vignette.inner' },
+                    min: 0,
+                    max: 3,
+                    precision: 2
+                })
+            ),
+            jsx(LabelGroup, { text: 'outer' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'data.vignette.outer' },
+                    min: 0,
+                    max: 3,
+                    precision: 2
+                })
+            ),
+            jsx(LabelGroup, { text: 'curvature' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'data.vignette.curvature' },
+                    min: 0.01,
+                    max: 10,
+                    precision: 2
+                })
+            ),
+            jsx(LabelGroup, { text: 'intensity' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'data.vignette.intensity' },
+                    min: 0,
+                    max: 1,
+                    precision: 2
+                })
+            )
         )
     );
 }
@@ -458,6 +503,23 @@ async function example({ canvas, deviceType, assetPath, glslangPath, twgslPath,
                     composePass.gradingEnabled = value;
                 }
             }
+            if (pathArray[1] === 'vignette') {
+                if (pathArray[2] === 'enabled') {
+                    composePass.vignetteEnabled = value;
+                }
+                if (pathArray[2] === 'inner') {
+                    composePass.vignetteInner = value;
+                }
+                if (pathArray[2] === 'outer') {
+                    composePass.vignetteOuter = value;
+                }
+                if (pathArray[2] === 'curvature') {
+                    composePass.vignetteCurvature = value;
+                }
+                if (pathArray[2] === 'intensity') {
+                    composePass.vignetteIntensity = value;
+                }
+            }
         });
 
         data.set('data', {
@@ -477,6 +539,13 @@ async function example({ canvas, deviceType, assetPath, glslangPath, twgslPath,
                 saturation: 1,
                 brightness: 1,
                 contrast: 1
+            },
+            vignette: {
+                enabled: false,
+                inner: 0.5,
+                outer: 1.0,
+                curvature: 0.5,
+                intensity: 0.3
             }
         });
 

extras/render-passes/render-pass-compose.js

@@ -18,7 +18,7 @@ const fragmentShader = `
         uniform vec3 brightnessContrastSaturation;
 
         // for all parameters, 1.0 is the no-change value
-        vec3 ContrastSaturationBrightness(vec3 color, float brt, float sat, float con)
+        vec3 contrastSaturationBrightness(vec3 color, float brt, float sat, float con)
         {
             color = color * brt;
             float grey = dot(color, vec3(0.3, 0.59, 0.11));
@@ -28,6 +28,29 @@ const fragmentShader = `
     
     #endif
 
+    #ifdef VIGNETTE
+
+        uniform vec4 vignetterParams;
+
+        float vignette(vec2 uv) {
+
+            float inner = vignetterParams.x;
+            float outer = vignetterParams.y;
+            float curvature = vignetterParams.z;
+            float intensity = vignetterParams.w;
+
+            // edge curvature
+            vec2 curve = pow(abs(uv * 2.0 -1.0), vec2(1.0 / curvature));
+
+            // distance to edge
+            float edge = pow(length(curve), curvature);
+
+            // gradient and intensity
+            return 1.0 - intensity * smoothstep(inner, outer, edge);
+        }        
+
+    #endif
+
     void main() {
         vec4 scene = texture2D(sceneTexture, uv0);
         vec3 result = scene.rgb;
@@ -38,10 +61,15 @@ const fragmentShader = `
         #endif
 
         #ifdef GRADING
-            result = ContrastSaturationBrightness(result, brightnessContrastSaturation.x, brightnessContrastSaturation.z, brightnessContrastSaturation.y);
+            result = contrastSaturationBrightness(result, brightnessContrastSaturation.x, brightnessContrastSaturation.z, brightnessContrastSaturation.y);
         #endif
 
         result = toneMap(result);
+
+        #ifdef VIGNETTE
+            result *= vignette(uv0);
+        #endif
+
         result = gammaCorrectOutput(result);
 
         gl_FragColor = vec4(result, scene.a);
@@ -67,6 +95,16 @@ class RenderPassCompose extends RenderPassShaderQuad {
 
     _shaderDirty = true;
 
+    _vignetteEnabled = false;
+
+    vignetteInner = 0.5;
+
+    vignetteOuter = 1.0;
+
+    vignetteCurvature = 0.5;
+
+    vignetteIntensity = 0.3;
+
     _key = '';
 
     constructor(graphicsDevice) {
@@ -76,6 +114,7 @@ class RenderPassCompose extends RenderPassShaderQuad {
         this.bloomTextureId = graphicsDevice.scope.resolve('bloomTexture');
         this.bloomIntensityId = graphicsDevice.scope.resolve('bloomIntensity');
         this.bcsId = graphicsDevice.scope.resolve('brightnessContrastSaturation');
+        this.vignetterParamsId = graphicsDevice.scope.resolve('vignetterParams');
     }
 
     set bloomTexture(value) {
@@ -100,6 +139,17 @@ class RenderPassCompose extends RenderPassShaderQuad {
         return this._gradingEnabled;
     }
 
+    set vignetteEnabled(value) {
+        if (this._vignetteEnabled !== value) {
+            this._vignetteEnabled = value;
+            this._shaderDirty = true;
+        }
+    }
+
+    get vignetteEnabled() {
+        return this._vignetteEnabled;
+    }
+
     set toneMapping(value) {
         if (this._toneMapping !== value) {
             this._toneMapping = value;
@@ -136,14 +186,16 @@ class RenderPassCompose extends RenderPassShaderQuad {
 
             const key = `${this.toneMapping}` +
                 `-${this.bloomTexture ? 'bloom' : 'nobloom'}` +
-                `-${this.gradingEnabled ? 'grading' : 'nograding'}`;
+                `-${this.gradingEnabled ? 'grading' : 'nograding'}` +
+                `-${this.vignetteEnabled ? 'vignette' : 'novignette'}`;
 
             if (this._key !== key) {
                 this._key = key;
 
                 const defines =
                     (this.bloomTexture ? `#define BLOOM\n` : '') +
-                    (this.gradingEnabled ? `#define GRADING\n` : '');
+                    (this.gradingEnabled ? `#define GRADING\n` : '') +
+                    (this.vignetteEnabled ? `#define VIGNETTE\n` : '');
 
                 const fsChunks =
                 shaderChunks.decodePS +
@@ -168,6 +220,10 @@ class RenderPassCompose extends RenderPassShaderQuad {
             this.bcsId.setValue([this.gradingBrightness, this.gradingContrast, this.gradingSaturation]);
         }
 
+        if (this._vignetteEnabled) {
+            this.vignetterParamsId.setValue([this.vignetteInner, this.vignetteOuter, this.vignetteCurvature, this.vignetteIntensity]);
+        }
+
         super.execute();
     }
 }