From fec717057e893eb0bdd21a9a7a9f95e4ace6acf2 Mon Sep 17 00:00:00 2001 From: Tanish Manku Date: Thu, 30 Apr 2026 14:32:53 -0700 Subject: [PATCH] Re-add shaders.js used by chromakey.js --- .../app/src/pages/PageScene/engine/shaders.js | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 frontend/apps/artcraft/app/src/pages/PageScene/engine/shaders.js diff --git a/frontend/apps/artcraft/app/src/pages/PageScene/engine/shaders.js b/frontend/apps/artcraft/app/src/pages/PageScene/engine/shaders.js new file mode 100644 index 0000000000..5b44e2730c --- /dev/null +++ b/frontend/apps/artcraft/app/src/pages/PageScene/engine/shaders.js @@ -0,0 +1,52 @@ +// @see https://discourse.threejs.org/t/production-ready-green-screen-with-three-js/23113/2 + +const VERTEX_SHADER = ` +varying vec2 vUv; + +void main() { + vUv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); +} +`; +const FRAGMENT_SHADER = ` +uniform sampler2D tex; +uniform float texWidth; +uniform float texHeight; + +uniform vec3 keyColor; +uniform float similarity; +uniform float smoothness; +uniform float spill; + +varying vec2 vUv; + +// From https://github.com/libretro/glsl-shaders/blob/master/nnedi3/shaders/rgb-to-yuv.glsl +vec2 RGBtoUV(vec3 rgb) { + return vec2( + rgb.r * -0.169 + rgb.g * -0.331 + rgb.b * 0.5 + 0.5, + rgb.r * 0.5 + rgb.g * -0.419 + rgb.b * -0.081 + 0.5 + ); +} + +vec4 ProcessChromaKey(vec2 texCoord) { + vec4 rgba = texture2D(tex, texCoord); + float chromaDist = distance(RGBtoUV(texture2D(tex, texCoord).rgb), RGBtoUV(keyColor)); + + float baseMask = chromaDist - similarity; + float fullMask = pow(clamp(baseMask / smoothness, 0., 1.), 1.5); + rgba.a = fullMask; + + float spillVal = pow(clamp(baseMask / spill, 0., 1.), 1.5); + float desat = clamp(rgba.r * 0.2126 + rgba.g * 0.7152 + rgba.b * 0.0722, 0., 1.); + rgba.rgb = mix(vec3(desat, desat, desat), rgba.rgb, spillVal); + + return rgba; +} + +void main(void) { + vec2 texCoord = vUv; + gl_FragColor = ProcessChromaKey(texCoord); +} +`; + +export { VERTEX_SHADER, FRAGMENT_SHADER };