dat.gui

examples/js/postprocessing/HalftonePass.js

@@ -12,12 +12,11 @@ THREE.HalftonePass = function(width, height) {
 		console.error('THREE.HalftonePass requires THREE.HalftoneShader');
 	}
 
-	this.shader = THREE.HalftoneShader;
-	this.uniforms = THREE.UniformsUtils.clone(this.shader.uniforms);
+	this.uniforms = THREE.UniformsUtils.clone(THREE.HalftoneShader.uniforms);
 	this.material = new THREE.ShaderMaterial({
 		uniforms: this.uniforms,
-		fragmentShader: this.shader.fragmentShader,
-		vertexShader: this.shader.vertexShader
+		fragmentShader: THREE.HalftoneShader.fragmentShader,
+		vertexShader: THREE.HalftoneShader.vertexShader
 	});
 
 	this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
@@ -29,6 +28,7 @@ THREE.HalftonePass = function(width, height) {
 
 THREE.HalftonePass.prototype = Object.assign(Object.create(THREE.Pass.prototype), {
 	constructor: THREE.HalftonePass,
+
 	render: function(renderer, writeBuffer, readBuffer, delta, maskActive) {
 		this.material.uniforms["tDiffuse"].value = readBuffer.texture;
 		this.quad.material = this.material;
@@ -39,9 +39,11 @@ THREE.HalftonePass.prototype = Object.assign(Object.create(THREE.Pass.prototype)
 			renderer.render(this.scene, this.camera, writeBuffer, this.clear);
 		}
 	},
+
 	setSize: function(width, height) {
 		this.width = width;
 		this.height = height;
-		// send to shader uniforms
+		this.uniforms['width'].value = this.width;
+		this.uniforms['height'].value = this.height;
 	}
 });

examples/js/shaders/HalftoneShader.js

@@ -1,5 +1,5 @@
 /**
- * @author meatbags / http://xavierburrow.com/
+ * @author meatbags / xavierburrow.com, github/meatbags
  *
  * Colour halftone shader
  */
@@ -7,7 +7,14 @@
 THREE.HalftoneShader = {
 	uniforms: {
 		"tDiffuse": {value: null},
-		"iSize": {value: 1}
+		"radius": {value: 5},
+		"rSample": {value: Math.PI * 0.25},
+		"rC": {value: Math.PI * 0.25},
+		"rM": {value: Math.PI * 0.33},
+		"rY": {value: Math.PI * 0.66},
+		"shape": {value: 1},
+		"width": {value: 1},
+		"height": {value: 1}
 	},
 	vertexShader: `
     varying vec2 vUv;
@@ -17,17 +24,26 @@ THREE.HalftoneShader = {
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
     }`,
 	fragmentShader: `
-		uniform sampler2D tDiffuse;
-		uniform int size;
 		varying vec2 vUv;
+		uniform sampler2D tDiffuse;
+		uniform float radius;
+		uniform float rSample;
+		uniform float rC;
+		uniform float rY;
+		uniform float rM;
+		uniform float width;
+		uniform float height;
 
 		float rand(vec2 seed){
     	return fract(sin(dot(seed.xy, vec2(12.9898,78.233))) * 43758.5453);
 		}
 
+		vec2 gridReference(vec2 coord, float step, float rotation) {
+			return vec2(0, 0);
+		}
+
 		void main() {
 			vec4 color = texture2D(tDiffuse, vUv);
-			color.r += rand(vUv) * 0.1;
 			gl_FragColor = color;
 		}`
 };

examples/webgl_postprocessing_color_halftone.html

@@ -105,25 +105,40 @@
 			}
 
 			initGUI() {
-				this.controller = {
-					size: 10
+				var guiTarget = this.halftonePass.uniforms;
+				var controller = {
+					radius: 5,
+					rotateSampleGrid: 45,
+					rotateC: 45,
+					rotateM: 30,
+					rotateY: 60,
+					shape: 1
+				};
+				var onGUIChange = function() {
+					guiTarget.radius.value = controller.radius;
+					guiTarget.rSample.value = controller.rotateSampleGrid * (Math.PI / 180);
+					guiTarget.rC.value = controller.rotateC * (Math.PI / 180);
+					guiTarget.rM.value = controller.rotateM * (Math.PI / 180);
+					guiTarget.rY.value = controller.rotateY * (Math.PI / 180);
+					guiTarget.shape.value = controller.shape;
 				};
-				this.onGUIChange = function() {
-					for (var key in this.controller) {
-						if (this.halftonePass.uniforms.hasOwnProperty(key)) {
-							this.halftonePass.uniforms[key] = this.controller[key];
-						}
-					}
-				}
 				this.gui = new dat.GUI();
-				this.gui.add(this.controller, 'size', 1, 50).onChange(this.onGUIChange);
+				this.gui.add(controller, 'shape', {'dot': 1, 'euclidean-dot': 2, 'ellipse': 3, 'line': 4}).onChange(onGUIChange);
+				this.gui.add(controller, 'radius', 1, 50).onChange(onGUIChange);
+				this.gui.add(controller, 'rotateSampleGrid', 0, 360).onChange(onGUIChange);
+				this.gui.add(controller, 'rotateC', 0, 360).onChange(onGUIChange);
+				this.gui.add(controller, 'rotateM', 0, 360).onChange(onGUIChange);
+				this.gui.add(controller, 'rotateY', 0, 360).onChange(onGUIChange);
+
+				// reset
+				onGUIChange();
 			}
 
 
 			loop() {
 				requestAnimationFrame(() => { this.loop(); });
 				var delta = this.clock.getDelta();
-				this.group.rotation.y += delta * this.rotationSpeed;
+				//this.group.rotation.y += delta * this.rotationSpeed;
 				this.composer.render(delta);
 			}
 		}