Added color halftone effect.

Author: mikecao

src/effects/ColorHalftoneEffect.js

@@ -0,0 +1,59 @@
+import Effect from 'core/Effect';
+import ShaderPass from 'graphics/ShaderPass';
+import ColorHalftoneShader from 'shaders/ColorHalftoneShader';
+import { deg2rad } from '../utils/math';
+
+export default class ColorHalftoneEffect extends Effect {
+  static config = {
+    name: 'ColorHalftoneEffect',
+    description: 'Color halftone effect.',
+    type: 'effect',
+    label: 'ColorHalftone',
+    defaultProperties: {
+      scale: 0.5,
+      angle: 0,
+    },
+    controls: {
+      scale: {
+        label: 'Scale',
+        type: 'number',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        withRange: true,
+        withReactor: true,
+      },
+      angle: {
+        label: 'Angle',
+        type: 'number',
+        min: 0,
+        max: 360,
+        withRange: true,
+        withReactor: true,
+      },
+    },
+  };
+
+  constructor(properties) {
+    super(ColorHalftoneEffect, properties);
+  }
+
+  updatePass() {
+    const { scale, angle } = this.properties;
+
+    this.pass.setUniforms({
+      scale: 1 - scale,
+      angle: deg2rad(angle),
+    });
+  }
+
+  addToScene() {
+    this.pass = new ShaderPass(ColorHalftoneShader);
+
+    this.updatePass();
+  }
+
+  removeFromScene() {
+    this.pass = null;
+  }
+}

src/effects/DotScreenEffect.js

@@ -11,14 +11,14 @@ export default class DotScreenEffect extends Effect {
     label: 'Dot Screen',
     defaultProperties: {
       angle: 90,
-      scale: 1.0,
+      scale: 0.5,
     },
     controls: {
       scale: {
-        label: 'Amount',
+        label: 'Scale',
         type: 'number',
         min: 0,
-        max: 2.0,
+        max: 1,
         step: 0.01,
         withRange: true,
         withReactor: true,
@@ -39,9 +39,11 @@ export default class DotScreenEffect extends Effect {
   }
 
   updatePass() {
+    const { scale, angle } = this.properties;
+
     this.pass.setUniforms({
-      scale: this.properties.scale,
-      angle: deg2rad(this.properties.angle),
+      scale: 2 - scale * 2,
+      angle: deg2rad(angle),
     });
   }
 

src/effects/index.js

@@ -1,5 +1,6 @@
 export BloomEffect from './BloomEffect';
 export BlurEffect from './BlurEffect';
+export ColorHalftoneEffect from './ColorHalftoneEffect';
 export DistortionEffect from './DistortionEffect';
 export DotScreenEffect from './DotScreenEffect';
 export GlitchEffect from './GlitchEffect';

src/shaders/ColorHalftoneShader.js

@@ -0,0 +1,15 @@
+import { Vector2 } from 'three';
+import vertexShader from 'shaders/glsl/vertex/basic.glsl';
+import fragmentShader from 'shaders/glsl/fragment/color-halftone.glsl';
+
+export default {
+  uniforms: {
+    inputTexture: { type: 't', value: null },
+    angle: { type: 'f', value: 1.0 },
+    scale: { type: 'f', value: 1.0 },
+    center: { type: 'v2', value: new Vector2(0, 0) },
+    resolution: { type: 'v2', value: new Vector2(1, 1) },
+  },
+  vertexShader,
+  fragmentShader,
+};

src/shaders/HalftoneShader.js

@@ -1,6 +1,6 @@
 import { Vector2 } from 'three';
 import vertexShader from 'shaders/glsl/vertex/basic.glsl';
-import fragmentShader from 'shaders/glsl/fragment/halftone.glsl';
+import fragmentShader from 'src/shaders/glsl/fragment/color-halftone.glsl';
 
 export default {
   uniforms: {

src/shaders/glsl/fragment/halftone.glsl …haders/glsl/fragment/color-halftone.glslsrc/shaders/glsl/fragment/halftone.glsl renamed to src/shaders/glsl/fragment/color-halftone.glsl src/shaders/glsl/fragment/halftone.glsl renamed to src/shaders/glsl/fragment/color-halftone.glsl

@@ -1,17 +1,16 @@
 uniform sampler2D inputTexture;
-uniform vec2 center;
 uniform float angle;
 uniform float scale;
 uniform vec2 resolution;
 varying vec2 vUv;
 
 float pattern(float angle) {
     float s = sin(angle), c = cos(angle);
+    vec2 center = vec2(resolution.x * 0.5, resolution.y * 0.5);
     vec2 tex = vUv * resolution - center;
     vec2 point = vec2(c * tex.x - s * tex.y, s * tex.x + c * tex.y) * scale;
-    float r = (sin(point.x) * sin(point.y)) * 4.0;
 
-    return r;
+    return (sin(point.x) * sin(point.y)) * 4.0;
 }
 
 void main() {