creepy HSV blend mask shader

js/deformers/three/index.ts

@@ -7,10 +7,12 @@ import {
   PlaneGeometry,
   Texture,
   LinearFilter,
+  NearestFilter,
   DoubleSide,
   ShaderMaterial,
   BufferGeometry,
-  BufferAttribute
+  BufferAttribute,
+  WebGLRenderTarget
 } from 'three';
 
 import { generateTextureVertices } from 'clmtrackr/js/utils/points';
@@ -27,6 +29,7 @@ const DEG_TO_RAD = Math.PI / 180;
 export default class ThreeDeformer extends Deformer {
 
   private scene: Scene;
+
   private camera: PerspectiveCamera;
 
   private renderer: WebGLRenderer;
@@ -45,10 +48,15 @@ export default class ThreeDeformer extends Deformer {
   public init (canvas: HTMLCanvasElement): void {
     super.init(canvas);
 
-    this.renderer = new WebGLRenderer({ canvas });
+    this.renderer = new WebGLRenderer({
+      canvas,
+      preserveDrawingBuffer: true
+    });
+    this.renderer.autoClear = false;
     this.renderer.setSize(canvas.width, canvas.height);
 
     this.scene = new Scene();
+
     this.camera = new PerspectiveCamera(
       75,
       canvas.width / canvas.height,
@@ -77,7 +85,10 @@ export default class ThreeDeformer extends Deformer {
     const maskGeom = new BufferGeometry();
     const maskMat = new ShaderMaterial({
       uniforms: {
-        texture: { value: null }
+        texture: { value: null },
+        bgTexture: { value: null },
+        bgWidth: { value: canvas.width },
+        bgHeight: { value: canvas.height }
       },
       vertexShader: createMaskVS(),
       fragmentShader: createMaskFS()
@@ -96,6 +107,11 @@ export default class ThreeDeformer extends Deformer {
     texture.minFilter = LinearFilter;
     const bgMaterial = this.bgMesh.material;
     bgMaterial.map = texture;
+
+    const maskBgTexture = this.maskMesh.material.uniforms.bgTexture;
+    maskBgTexture.value = texture;
+    maskBgTexture.needsUpdate = true;
+
     // Un-set the defaults
     bgMaterial.wireframe = false;
     bgMaterial.color.set(0xffffff);
@@ -181,6 +197,7 @@ export default class ThreeDeformer extends Deformer {
     const bgTex = this.bgMesh.material.map;
     if (bgTex) {
       bgTex.needsUpdate = true;
+      this.maskMesh.material.uniforms.bgTexture.needsUpdate = true;
     }
 
     this.renderer.render(this.scene, this.camera);

js/deformers/three/shaders/ColorSpaces.glsl

@@ -0,0 +1,62 @@
+/*
+GLSL Color Space Utility Functions
+(c) 2015 tobspr
+-------------------------------------------------------------------------------
+The MIT License (MIT)
+Copyright (c) 2015
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+-------------------------------------------------------------------------------
+Most formulars / matrices are from:
+https://en.wikipedia.org/wiki/SRGB
+Some are from:
+http://www.chilliant.com/rgb2hsv.html
+
+https://github.com/tobspr/GLSL-Color-Spaces/blob/master/ColorSpaces.inc.glsl
+*/
+
+const float HCV_EPSILON = 1e-10;
+
+vec3 rgb_to_hcv(vec3 rgb)
+{
+    // Based on work by Sam Hocevar and Emil Persson
+    vec4 P = (rgb.y < rgb.z) ? vec4(rgb.zy, -1.0, 2.0/3.0) : vec4(rgb.yz, 0.0, -1.0/3.0);
+    vec4 Q = (rgb.x < P.x) ? vec4(P.xyw, rgb.x) : vec4(rgb.x, P.yzx);
+    float C = Q.x - min(Q.w, Q.y);
+    float H = abs((Q.w - Q.y) / (6.0 * C + HCV_EPSILON) + Q.z);
+    return vec3(H, C, Q.x);
+}
+
+vec3 rgb_to_hsv(vec3 rgb)
+{
+    vec3 HCV = rgb_to_hcv(rgb);
+    float S = HCV.y / (HCV.z + HCV_EPSILON);
+    return vec3(HCV.x, S, HCV.z);
+}
+
+vec3 hue_to_rgb(float hue)
+{
+    float R = abs(hue * 6.0 - 3.0) - 1.0;
+    float G = 2.0 - abs(hue * 6.0 - 2.0);
+    float B = 2.0 - abs(hue * 6.0 - 4.0);
+    return saturate(vec3(R,G,B));
+}
+
+vec3 hsv_to_rgb(vec3 hsv)
+{
+    vec3 rgb = hue_to_rgb(hsv.x);
+    return ((rgb - 1.0) * hsv.y + 1.0) * hsv.z;
+}

js/deformers/three/shaders/mask.frag

@@ -1,7 +1,33 @@
 uniform sampler2D texture;
+uniform sampler2D bgTexture;
+
+uniform float bgWidth;
+uniform float bgHeight;
 
 varying vec2 vUv;
 
+
+#include ./ColorSpaces;
+
+
 void main() {
-  gl_FragColor = texture2D(texture, vUv);
+  vec4 bgColor = texture2D(
+    bgTexture,
+    vec2(
+      gl_FragCoord.x / bgWidth,
+      gl_FragCoord.y / bgHeight
+    )
+  );
+  vec4 texColor = texture2D(texture, vUv);
+
+  vec3 texHSV = rgb_to_hsv(vec3(texColor.x, texColor.y, texColor.z));
+  vec3 bgHSV = rgb_to_hsv(vec3(bgColor.x, bgColor.y, bgColor.z));
+
+  float vDiff = bgHSV.z - texHSV.z;
+
+  gl_FragColor = vec4(hsv_to_rgb(vec3(
+    texHSV.x,
+    texHSV.y,
+    texHSV.z + vDiff * 0.4
+  )), 1.0);
 }

package.json

@@ -26,7 +26,7 @@
     "filesaver.js": "andyinabox/FileSaver.js",
     "getusermedia": "^1.3.5",
     "gh-pages": "^0.11.0",
-    "glsl-template-loader": "git+https://github.com/jsio-private/glsl-template-loader#ac20d0e2d88d2e231d2ea4c271e56205b8ea437f",
+    "glsl-template-loader": "git+https://github.com/jsio-private/glsl-template-loader#0c1b2cbaa6b1020de78527b37dcd2ce51a5e89bc",
     "html-webpack-plugin": "^2.22.0",
     "json-loader": "^0.5.4",
     "raf": "^3.1.0",

webpack.config.js

@@ -23,7 +23,7 @@ const config = {
       'clmtrackr': path.resolve(__dirname),
       'stats.js': path.resolve(__dirname, 'lib', 'stats.js')
     },
-    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
+    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.vert', '.frag', '.glsl']
   },
   module: {
     loaders: [