From 7f48f044b6234ce1d0aadad366c574d064e93c90 Mon Sep 17 00:00:00 2001 From: chasedavis Date: Sat, 3 Jun 2023 12:45:14 -0400 Subject: [PATCH 1/7] feat: ramp --- src/effects/Ramp.tsx | 105 +++++++++++++++++++++++++++++++++++++++++++ src/index.tsx | 1 + 2 files changed, 106 insertions(+) create mode 100644 src/effects/Ramp.tsx diff --git a/src/effects/Ramp.tsx b/src/effects/Ramp.tsx new file mode 100644 index 00000000..bfec67eb --- /dev/null +++ b/src/effects/Ramp.tsx @@ -0,0 +1,105 @@ +import { Uniform } from 'three' +import { BlendFunction, Effect } from 'postprocessing' +import { wrapEffect } from '../util' + +const RampShader = { + fragmentShader: ` + + uniform int rampType; + + uniform vec2 rampStart; + uniform vec2 rampEnd; + + uniform vec4 startColor; + uniform vec4 endColor; + + uniform float rampBias; + uniform float rampGain; + + uniform bool rampMask; + uniform bool rampInvert; + + float getBias(float time, float bias) { + return (time / ((((1.0 / bias) - 2.0) * (1.0 - time)) + 1.0)); + } + + float getGain(float time, float gain) { + if(time < 0.5) + return getBias(time * 2.0, gain) / 2.0; + else + return getBias(time * 2.0 - 1.0, 1.0 - gain) / 2.0 + 0.5; + } + + void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) { + + vec2 startPixel = rampStart * resolution.xy; + vec2 endPixel = rampEnd * resolution.xy; + + float rampAlpha, radius; + + if (rampType == 1) { + vec2 fuv = uv * resolution.xy / resolution.y; + vec2 suv = startPixel / resolution.y; + vec2 euv = endPixel / resolution.y; + + radius = length(suv - euv); + float falloff = length(fuv - suv); + rampAlpha = smoothstep(0., radius, falloff); + } + + else { + radius = length(startPixel - endPixel); + vec2 direction = normalize(vec2(endPixel.x - startPixel.x, -(startPixel.y - endPixel.y))); + + float fade = dot(uv * resolution - startPixel, direction); + if (rampType == 2) { fade = abs(fade); } + + rampAlpha = smoothstep(0.0, 1.0, fade / radius); + } + + rampAlpha = abs((rampInvert ? 1.0 : 0.0) - getBias(rampAlpha, rampBias) * getGain(rampAlpha, rampGain)); + + if (!rampMask) { + outputColor = mix(startColor, endColor, rampAlpha); + } + + else { + vec4 inputBuff = texture2D(inputBuffer, uv); + outputColor = mix(inputBuff, inputColor, rampAlpha); + } + }` +} + +export class RampEffect extends Effect { + constructor({ + blendFunction = BlendFunction.NORMAL, // Multiply default, but blend modes are great for ramp + rampType = 0, // {0 : linear, 1 : radial, 2 : linear (mirrored)} + rampStart = [0.5, 0.5], // [0, 1) as normalized x,y + rampEnd = [1, 1], // [0, 1) as normalized x,y + startColor = [0, 0, 0, 1], // black default + endColor = [1, 1, 1, 1], // white default + rampBias = 0.5, // [0, 1] - linear interpolation curve when both bias and gain are 0.5 + rampGain = 0.5, // [0, 1] - linear interpolation curve when both bias and gain are 0.5 + rampMask = false, // bool - uses ramp as effect mask, ignores colors when true + rampInvert = false // when false, rampStart is transparent and rampEnd is opaque + } = {}) { + super('RampEffect', RampShader.fragmentShader, { + blendFunction, + uniforms: new Map([ + ['rampType', new Uniform(rampType)], + ['rampStart', new Uniform(rampStart)], + ['rampEnd', new Uniform(rampEnd)], + ['startColor', new Uniform(startColor)], + ['endColor', new Uniform(endColor)], + ['rampBias', new Uniform(rampBias)], + ['rampGain', new Uniform(rampGain)], + ['rampMask', new Uniform(rampMask)], + ['rampInvert', new Uniform(rampInvert)] + ]) + }) + } +} + +const Ramp = wrapEffect(RampEffect) + +export default Ramp diff --git a/src/index.tsx b/src/index.tsx index 2e65653e..43403e0c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -24,6 +24,7 @@ export * from './effects/Sepia' export * from './effects/SSAO' export * from './effects/SMAA' export * from './effects/FXAA' +export * from './effects/Ramp' export * from './effects/Texture' export * from './effects/ToneMapping' export * from './effects/Vignette' From 09db3b5b59f416769e31a42363882a9b587cfeff Mon Sep 17 00:00:00 2001 From: chasedavis Date: Fri, 9 Jun 2023 21:48:26 -0400 Subject: [PATCH 2/7] typefix --- src/effects/Ramp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/effects/Ramp.tsx b/src/effects/Ramp.tsx index bfec67eb..e2012d40 100644 --- a/src/effects/Ramp.tsx +++ b/src/effects/Ramp.tsx @@ -85,7 +85,7 @@ export class RampEffect extends Effect { } = {}) { super('RampEffect', RampShader.fragmentShader, { blendFunction, - uniforms: new Map([ + uniforms: new Map>([ ['rampType', new Uniform(rampType)], ['rampStart', new Uniform(rampStart)], ['rampEnd', new Uniform(rampEnd)], @@ -94,8 +94,8 @@ export class RampEffect extends Effect { ['rampBias', new Uniform(rampBias)], ['rampGain', new Uniform(rampGain)], ['rampMask', new Uniform(rampMask)], - ['rampInvert', new Uniform(rampInvert)] - ]) + ['rampInvert', new Uniform(rampInvert)], + ]), }) } } From fdd2c51dbafcd7b7898e79c7b3ac0035f96c1636 Mon Sep 17 00:00:00 2001 From: chasedavis Date: Fri, 9 Jun 2023 21:50:40 -0400 Subject: [PATCH 3/7] lint --- src/effects/Ramp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/effects/Ramp.tsx b/src/effects/Ramp.tsx index e2012d40..305ad139 100644 --- a/src/effects/Ramp.tsx +++ b/src/effects/Ramp.tsx @@ -67,7 +67,7 @@ const RampShader = { vec4 inputBuff = texture2D(inputBuffer, uv); outputColor = mix(inputBuff, inputColor, rampAlpha); } - }` + }`, } export class RampEffect extends Effect { From 13929bfb46f93c81661a9484523a7c3d2b00bba2 Mon Sep 17 00:00:00 2001 From: Cody Bennett <23324155+CodyJasonBennett@users.noreply.github.com> Date: Wed, 23 Aug 2023 09:11:05 -0500 Subject: [PATCH 4/7] fix(Ramp): types, exports --- src/effects/Ramp.tsx | 126 ++++++++++++++++++++++++++++--------------- 1 file changed, 84 insertions(+), 42 deletions(-) diff --git a/src/effects/Ramp.tsx b/src/effects/Ramp.tsx index 305ad139..05fc8589 100644 --- a/src/effects/Ramp.tsx +++ b/src/effects/Ramp.tsx @@ -1,10 +1,9 @@ import { Uniform } from 'three' -import { BlendFunction, Effect } from 'postprocessing' +import { Effect } from 'postprocessing' import { wrapEffect } from '../util' const RampShader = { - fragmentShader: ` - + fragmentShader: /* glsl */ ` uniform int rampType; uniform vec2 rampStart; @@ -20,72 +19,117 @@ const RampShader = { uniform bool rampInvert; float getBias(float time, float bias) { - return (time / ((((1.0 / bias) - 2.0) * (1.0 - time)) + 1.0)); + return time / (((1.0 / bias) - 2.0) * (1.0 - time) + 1.0); } float getGain(float time, float gain) { - if(time < 0.5) + if (time < 0.5) return getBias(time * 2.0, gain) / 2.0; else return getBias(time * 2.0 - 1.0, 1.0 - gain) / 2.0 + 0.5; } - void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) { + void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) { + vec2 centerPixel = uv * resolution; + vec2 startPixel = rampStart * resolution; + vec2 endPixel = rampEnd * resolution; - vec2 startPixel = rampStart * resolution.xy; - vec2 endPixel = rampEnd * resolution.xy; - - float rampAlpha, radius; + float rampAlpha; if (rampType == 1) { - vec2 fuv = uv * resolution.xy / resolution.y; + vec2 fuv = centerPixel / resolution.y; vec2 suv = startPixel / resolution.y; vec2 euv = endPixel / resolution.y; - radius = length(suv - euv); + float radius = length(suv - euv); float falloff = length(fuv - suv); - rampAlpha = smoothstep(0., radius, falloff); - } - - else { - radius = length(startPixel - endPixel); + rampAlpha = smoothstep(0.0, radius, falloff); + } else { + float radius = length(startPixel - endPixel); vec2 direction = normalize(vec2(endPixel.x - startPixel.x, -(startPixel.y - endPixel.y))); - float fade = dot(uv * resolution - startPixel, direction); - if (rampType == 2) { fade = abs(fade); } + float fade = dot(centerPixel - startPixel, direction); + if (rampType == 2) fade = abs(fade); rampAlpha = smoothstep(0.0, 1.0, fade / radius); } - - rampAlpha = abs((rampInvert ? 1.0 : 0.0) - getBias(rampAlpha, rampBias) * getGain(rampAlpha, rampGain)); - if (!rampMask) { - outputColor = mix(startColor, endColor, rampAlpha); - } + rampAlpha = abs((rampInvert ? 1.0 : 0.0) - getBias(rampAlpha, rampBias) * getGain(rampAlpha, rampGain)); - else { + if (rampMask) { vec4 inputBuff = texture2D(inputBuffer, uv); - outputColor = mix(inputBuff, inputColor, rampAlpha); + outputColor = mix(inputBuff, inputColor, rampAlpha); + } else { + outputColor = mix(startColor, endColor, rampAlpha); } - }`, + } + `, } export class RampEffect extends Effect { constructor({ - blendFunction = BlendFunction.NORMAL, // Multiply default, but blend modes are great for ramp - rampType = 0, // {0 : linear, 1 : radial, 2 : linear (mirrored)} - rampStart = [0.5, 0.5], // [0, 1) as normalized x,y - rampEnd = [1, 1], // [0, 1) as normalized x,y - startColor = [0, 0, 0, 1], // black default - endColor = [1, 1, 1, 1], // white default - rampBias = 0.5, // [0, 1] - linear interpolation curve when both bias and gain are 0.5 - rampGain = 0.5, // [0, 1] - linear interpolation curve when both bias and gain are 0.5 - rampMask = false, // bool - uses ramp as effect mask, ignores colors when true - rampInvert = false // when false, rampStart is transparent and rampEnd is opaque + /** + * Type of ramp gradient. + * * `0`: Linear + * * `1`: Radial + * * `2`: Mirrored Linear + */ + rampType = 0, + /** + * Starting point of the ramp gradient in normalized coordinates. + * + * Ranges from `[0 - 1]` as `[x, y]`. Default is `[1, 1]`. + */ + rampStart = [0.5, 0.5], + /** + * Ending point of the ramp gradient in normalized coordinates. + * + * Ranges from `[0 - 1]` as `[x, y]`. Default is `[1, 1]` + */ + rampEnd = [1, 1], + /** + * Color at the starting point of the gradient. + * + * Default is black: `[0, 0, 0, 1]` + */ + startColor = [0, 0, 0, 1], + /** + * Color at the ending point of the gradient. + * + * Default is white: `[1, 1, 1, 1]` + */ + endColor = [1, 1, 1, 1], + /** + * Bias for the interpolation curve when both bias and gain are 0.5. + * + * Ranges from `[0 - 1]`. Default is `0.5`. + */ + rampBias = 0.5, + /** + * Gain for the interpolation curve when both bias and gain are 0.5. + * + * Ranges from `[0 - 1]`. Default is `0.5`. + */ + rampGain = 0.5, + /** + * When enabled, the ramp gradient is used as an effect mask, and colors are ignored. + * + * Default is `false`. + */ + rampMask = false, + /** + * Controls whether the ramp gradient is inverted. + * + * When disabled, rampStart is transparent and rampEnd is opaque. + * + * Default is `false`. + */ + rampInvert = false, + ...params } = {}) { super('RampEffect', RampShader.fragmentShader, { - blendFunction, - uniforms: new Map>([ + ...params, + uniforms: new Map>([ ['rampType', new Uniform(rampType)], ['rampStart', new Uniform(rampStart)], ['rampEnd', new Uniform(rampEnd)], @@ -100,6 +144,4 @@ export class RampEffect extends Effect { } } -const Ramp = wrapEffect(RampEffect) - -export default Ramp +export const Ramp = wrapEffect(RampEffect) From 4ac59b6dceafa90f45559e0167401c5767ae1d53 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Sat, 18 Jan 2025 15:19:41 -0600 Subject: [PATCH 5/7] refactor: add RampType enum --- src/effects/Ramp.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/effects/Ramp.tsx b/src/effects/Ramp.tsx index 05fc8589..181cc43d 100644 --- a/src/effects/Ramp.tsx +++ b/src/effects/Ramp.tsx @@ -66,19 +66,22 @@ const RampShader = { `, } +export enum RampType { + Linear, + Radial, + MirroredLinear, +} + export class RampEffect extends Effect { constructor({ /** * Type of ramp gradient. - * * `0`: Linear - * * `1`: Radial - * * `2`: Mirrored Linear */ - rampType = 0, + rampType = RampType.Linear, /** * Starting point of the ramp gradient in normalized coordinates. * - * Ranges from `[0 - 1]` as `[x, y]`. Default is `[1, 1]`. + * Ranges from `[0 - 1]` as `[x, y]`. Default is `[0.5, 0.5]`. */ rampStart = [0.5, 0.5], /** @@ -129,7 +132,7 @@ export class RampEffect extends Effect { } = {}) { super('RampEffect', RampShader.fragmentShader, { ...params, - uniforms: new Map>([ + uniforms: new Map([ ['rampType', new Uniform(rampType)], ['rampStart', new Uniform(rampStart)], ['rampEnd', new Uniform(rampEnd)], From 4637759881cc49b656dc98e7618a7e7a2fc37119 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Sat, 18 Jan 2025 15:19:47 -0600 Subject: [PATCH 6/7] docs: add Ramp --- docs/effects/ramp.mdx | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 docs/effects/ramp.mdx diff --git a/docs/effects/ramp.mdx b/docs/effects/ramp.mdx new file mode 100644 index 00000000..c373be3f --- /dev/null +++ b/docs/effects/ramp.mdx @@ -0,0 +1,42 @@ +--- +title: Ramp +nav: 1 +--- + +Ramp effect for linear and radial color gradients, as well as masking of effects before it in the effect array. + +```jsx +import { Ramp, RampType } from '@react-three/postprocessing' + +return ( + +) +``` + +## Example + + + +## Props + +| Name | Type | Default | Description | +| ---------- | -------------------------------------------- | --------------- | -------------------------------------------------------------------------------------------------------------- | +| rampType | RampType | RampType.Linear | Type of ramp gradient. | +| rampStart | [x: number, y: number] | [0.5, 0.5] | Starting point of the ramp gradient in normalized coordinates. | +| rampEnd | [x: number, y: number] | [1.0, 1.0] | Ending point of the ramp gradient in normalized coordinates. | +| startColor | [r: number, g: number, b: number, a: number] | [0, 0, 0, 1] | Color at the starting point of the gradient. | +| endColor | [r: number, g: number, b: number, a: number] | [1, 1, 1, 1] | Color at the ending point of the gradient. | +| rampBias | number | 0.5 | Bias for the interpolation curve when both bias and gain are 0.5. | +| rampGain | number | 0.5 | Gain for the interpolation curve when both bias and gain are 0.5. | +| rampMask | boolean | false | When enabled, the ramp gradient is used as an effect mask, and colors are ignored. | +| rampInvert | boolean | false | Controls whether the ramp gradient is inverted. When disabled, rampStart is transparent and rampEnd is opaque. | From 22617be4362fa24de1a92c088a6af7e5678cd1ae Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Sat, 18 Jan 2025 15:20:14 -0600 Subject: [PATCH 7/7] fix(Ramp): tree-shaking annotations --- src/effects/Ramp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/effects/Ramp.tsx b/src/effects/Ramp.tsx index 181cc43d..502ce830 100644 --- a/src/effects/Ramp.tsx +++ b/src/effects/Ramp.tsx @@ -147,4 +147,4 @@ export class RampEffect extends Effect { } } -export const Ramp = wrapEffect(RampEffect) +export const Ramp = /* @__PURE__ */ wrapEffect(RampEffect)