add pass params

examples/js/postprocessing/HalftonePass.js

@@ -5,11 +5,9 @@
  *
  */
 
-THREE.HalftonePass = function ( width, height ) {
+THREE.HalftonePass = function ( width, height, params ) {
 
 	THREE.Pass.call( this );
- 	this.width = width;
- 	this.height = height;
 
  	if ( THREE.HalftoneShader === undefined ) {
 
@@ -24,6 +22,20 @@ THREE.HalftonePass = function ( width, height ) {
  		vertexShader: THREE.HalftoneShader.vertexShader
  	} );
 
+	// set params
+	this.uniforms.width.value = width;
+	this.uniforms.height.value = height;
+
+	for ( var key in params ) {
+
+		if ( params.hasOwnProperty( key ) && this.uniforms.hasOwnProperty( key ) ) {
+
+			this.uniforms[key].value = params[key];
+
+		}
+
+	}
+
  	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
  	this.scene = new THREE.Scene();
  	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
@@ -33,8 +45,10 @@ 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 ) {
+
+	constructor: THREE.HalftonePass,
+
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
  		this.material.uniforms[ "tDiffuse" ].value = readBuffer.texture;
  		this.quad.material = this.material;
@@ -50,12 +64,11 @@ THREE.HalftonePass = function ( width, height ) {
 		}
 
  	},
+
  	setSize: function ( width, height ) {
 
- 		this.width = width;
- 		this.height = height;
- 		this.uniforms[ 'width' ].value = this.width;
- 		this.uniforms[ 'height' ].value = this.height;
+ 		this.uniforms.width.value = width;
+ 		this.uniforms.height.value = height;
 
  	}
 } );

examples/js/shaders/HalftoneShader.js

@@ -2,7 +2,9 @@
  * @author meatbags / xavierburrow.com, github/meatbags
  *
  * RGB Halftone shader for three.js.
- *
+ *	NOTE:
+ * 		Shape (1 = Dot, 2 = Ellipse, 3 = Line, 4 = Square)
+ *		Blending Mode (1 = Linear, 2 = Multiply, 3 = Add, 4 = Lighter, 5 = Darker)
  */
 
 THREE.HalftoneShader = {
@@ -40,12 +42,12 @@ THREE.HalftoneShader = {
 
 		"#define SQRT2_MINUS_ONE 0.41421356",
 		"#define SQRT2_HALF_MINUS_ONE 0.20710678",
-		"#define SHAPE_DOT 1",
 		"#define PI2 6.28318531",
+		"#define SHAPE_DOT 1",
 		"#define SHAPE_ELLIPSE 2",
+		"#define SHAPE_LINE 3",
 		"#define SHAPE_SQUARE 4",
 		"#define BLENDING_LINEAR 1",
-		"#define SHAPE_LINE 3",
 		"#define BLENDING_MULTIPLY 2",
 		"#define BLENDING_ADD 3",
 		"#define BLENDING_LIGHTER 4",

examples/webgl_postprocessing_rgb_halftone.html

@@ -134,11 +134,23 @@
 		}
 
 		// post-processing
-		var composer, renderPass, halftonePass;
+		var composer, renderPass, halftonePass, params;
 
 		composer = new THREE.EffectComposer( renderer );
 		renderPass = new THREE.RenderPass( scene, camera );
-		halftonePass = new THREE.HalftonePass( window.innerWidth, window.innerHeight );
+		params = {
+			shape: 1,
+			radius: 4,
+			rotateR: Math.PI / 12,
+			rotateB: Math.PI / 12 * 2,
+			rotateG: Math.PI / 12 * 3,
+			scatter: 0,
+			blending: 1,
+			blendingMode: 1,
+			greyscale: false,
+			disable: false
+		};
+		halftonePass = new THREE.HalftonePass( window.innerWidth, window.innerHeight, params );
 		halftonePass.renderToScreen = true;
 		composer.addPass( renderPass );
 		composer.addPass( halftonePass );