gui + composer

examples/js/postprocessing/HalftonePass.js

@@ -2,11 +2,9 @@
  * @author meatbags / xavierburrow.com, github/meatbags
  */
 
-THREE.HalftonePass = function(scene, camera, width, height, texture) {
+THREE.HalftonePass = function(width, height) {
 	THREE.Pass.call(this);
 
-	this.scene = scene;
-	this.camera = camera;
 	this.width = width;
 	this.height = height;
 
@@ -15,8 +13,9 @@ THREE.HalftonePass = function(scene, camera, width, height, texture) {
 	}
 
 	this.shader = THREE.HalftoneShader;
+	this.uniforms = THREE.UniformsUtils.clone(this.shader.uniforms);
 	this.material = new THREE.ShaderMaterial({
-		uniforms: THREE.UniformsUtils.clone(this.shader.uniforms),
+		uniforms: this.uniforms,
 		fragmentShader: this.shader.fragmentShader,
 		vertexShader: this.shader.vertexShader
 	});

examples/js/shaders/HalftoneShader.js

@@ -4,9 +4,10 @@
  * Colour halftone shader
  */
 
-THREE.HalftonShader = {
+THREE.HalftoneShader = {
 	uniforms: {
 		"tDiffuse": {value: null},
+		"iSize": {value: 1}
 	},
 	vertexShader: `
     varying vec2 vUv;
@@ -17,10 +18,16 @@ THREE.HalftonShader = {
     }`,
 	fragmentShader: `
 		uniform sampler2D tDiffuse;
+		uniform int size;
 		varying vec2 vUv;
 
+		float rand(vec2 seed){
+    	return fract(sin(dot(seed.xy, vec2(12.9898,78.233))) * 43758.5453);
+		}
+
 		void main() {
 			vec4 color = texture2D(tDiffuse, vUv);
+			color.r += rand(vUv) * 0.1;
 			gl_FragColor = color;
 		}`
 };

examples/webgl_postprocessing_color_halftone.html

@@ -38,7 +38,6 @@
 		<script src="js/shaders/DepthLimitedBlurShader.js"></script>
 		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
 		<script src="js/Detector.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 		<script src='js/libs/dat.gui.min.js'></script>
 
 		<div id="info">
@@ -47,6 +46,10 @@
 
 		<script>
 
+		if (!Detector.webgl) {
+			Detector.addGetWebGLMessage();
+		}
+
 		class Example {
 			constructor() {
 				this.wrapper = document.createElement('div');
@@ -57,9 +60,11 @@
 			 	this.height = window.innerHeight;
 			 	this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 1, 1000);
 				this.camera.position.z = 20;
+				this.rotationSpeed = Math.PI / 8;
 
 				this.initScene();
 				this.initRender();
+				this.initGUI();
 				this.loop();
 			}
 
@@ -83,24 +88,42 @@
 
 			initRender() {
 				// 3js renderer
-				this.renderer = new THREE.WebGLRenderer();
+				this.renderer = new THREE.WebGLRenderer({antialias: true});
 				this.renderer.setPixelRatio(window.devicePixelRatio);
 				this.renderer.setSize(window.innerWidth, window.innerHeight);
 
 				// effect composer
 				this.composer = new THREE.EffectComposer(this.renderer);
 			 	this.renderPass = new THREE.RenderPass(this.scene, this.camera);
-				this.renderPass.renderToScreen = true;
+				this.halftonePass = new THREE.HalftonePass(this.width, this.height);
+				this.halftonePass.renderToScreen = true;
 				this.composer.addPass(this.renderPass);
+				this.composer.addPass(this.halftonePass);
 
 				// add to doc
 				this.wrapper.appendChild(this.renderer.domElement);
 			}
 
+			initGUI() {
+				this.controller = {
+					size: 10
+				};
+				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);
+			}
+
+
 			loop() {
 				requestAnimationFrame(() => { this.loop(); });
 				var delta = this.clock.getDelta();
-				this.group.rotation.y += delta * Math.PI * 0.25;
+				this.group.rotation.y += delta * this.rotationSpeed;
 				this.composer.render(delta);
 			}
 		}