Browse Source

JSM: Added module and TS file for HalftonePass.

Mugen87 6 years ago
parent
commit
c7a8aab8f8

+ 1 - 0
docs/manual/en/introduction/Import-via-modules.html

@@ -165,6 +165,7 @@
 						<li>EffectComposer</li>
 						<li>EffectComposer</li>
 						<li>FilmPass</li>
 						<li>FilmPass</li>
 						<li>GlitchPass</li>
 						<li>GlitchPass</li>
+						<li>HalftonePass</li>
 						<li>MaskPass</li>
 						<li>MaskPass</li>
 						<li>RenderPass</li>
 						<li>RenderPass</li>
 						<li>SavePass</li>
 						<li>SavePass</li>

+ 1 - 1
examples/js/postprocessing/HalftonePass.js

@@ -44,7 +44,7 @@ THREE.HalftonePass.prototype = Object.assign( Object.create( THREE.Pass.prototyp
 
 
 	constructor: THREE.HalftonePass,
 	constructor: THREE.HalftonePass,
 
 
-	render: function ( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
+	render: function ( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive*/ ) {
 
 
  		this.material.uniforms[ "tDiffuse" ].value = readBuffer.texture;
  		this.material.uniforms[ "tDiffuse" ].value = readBuffer.texture;
 
 

+ 25 - 0
examples/jsm/postprocessing/HalftonePass.d.ts

@@ -0,0 +1,25 @@
+import {
+  ShaderMaterial,
+} from '../../../src/Three';
+
+import { Pass } from './Pass';
+
+export interface HalftonePassParameters {
+  shape?: number;
+  radius?: number;
+  rotateR?: number;
+  rotateB?: number;
+  rotateG?: number;
+  scatter?: number;
+  blending?: number;
+  blendingMode?: number;
+  greyscale?: boolean;
+  disable?: boolean;
+}
+
+export class HalftonePass extends Pass {
+  constructor(width: number, height: number, params: HalftonePassParameters);
+  uniforms: object;
+  material: ShaderMaterial;
+  fsQuad: object;
+}

+ 81 - 0
examples/jsm/postprocessing/HalftonePass.js

@@ -0,0 +1,81 @@
+/**
+ * @author meatbags / xavierburrow.com, github/meatbags
+ *
+ * RGB Halftone pass for three.js effects composer. Requires HalftoneShader.
+ *
+ */
+
+import {
+	ShaderMaterial,
+	UniformsUtils
+} from "../../../build/three.module.js";
+import { Pass } from "../postprocessing/Pass.js";
+import { HalftoneShader } from "../shaders/HalftoneShader.js";
+
+var HalftonePass = function ( width, height, params ) {
+
+	Pass.call( this );
+
+ 	if ( HalftoneShader === undefined ) {
+
+ 		console.error( 'THREE.HalftonePass requires HalftoneShader' );
+
+ 	}
+
+ 	this.uniforms = UniformsUtils.clone( HalftoneShader.uniforms );
+ 	this.material = new ShaderMaterial( {
+ 		uniforms: this.uniforms,
+ 		fragmentShader: HalftoneShader.fragmentShader,
+ 		vertexShader: 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.fsQuad = new Pass.FullScreenQuad( this.material );
+
+};
+
+HalftonePass.prototype = Object.assign( Object.create( Pass.prototype ), {
+
+	constructor: HalftonePass,
+
+	render: function ( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive*/ ) {
+
+ 		this.material.uniforms[ "tDiffuse" ].value = readBuffer.texture;
+
+ 		if ( this.renderToScreen ) {
+
+ 			renderer.setRenderTarget( null );
+ 			this.fsQuad.render( renderer );
+
+		} else {
+
+ 			renderer.setRenderTarget( writeBuffer );
+ 			if ( this.clear ) renderer.clear();
+			this.fsQuad.render( renderer );
+
+		}
+
+ 	},
+
+ 	setSize: function ( width, height ) {
+
+ 		this.uniforms.width.value = width;
+ 		this.uniforms.height.value = height;
+
+ 	}
+} );
+
+export { HalftonePass };

+ 1 - 0
utils/modularize.js

@@ -74,6 +74,7 @@ var files = [
 	{ path: 'postprocessing/EffectComposer.js', dependencies: [ { name: 'CopyShader', path: 'shaders/CopyShader.js' }, { name: 'ShaderPass', path: 'postprocessing/ShaderPass.js' }, { name: 'MaskPass', path: 'postprocessing/MaskPass.js' }, { name: 'ClearMaskPass', path: 'postprocessing/MaskPass.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/EffectComposer.js', dependencies: [ { name: 'CopyShader', path: 'shaders/CopyShader.js' }, { name: 'ShaderPass', path: 'postprocessing/ShaderPass.js' }, { name: 'MaskPass', path: 'postprocessing/MaskPass.js' }, { name: 'ClearMaskPass', path: 'postprocessing/MaskPass.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/FilmPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'FilmShader', path: 'shaders/FilmShader.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/FilmPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'FilmShader', path: 'shaders/FilmShader.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/GlitchPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'DigitalGlitch', path: 'shaders/DigitalGlitch.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/GlitchPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'DigitalGlitch', path: 'shaders/DigitalGlitch.js' } ], ignoreList: [] },
+	{ path: 'postprocessing/HalftonePass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'HalftoneShader', path: 'shaders/HalftoneShader.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/MaskPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/MaskPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/RenderPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/RenderPass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/SavePass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'CopyShader', path: 'shaders/CopyShader.js' } ], ignoreList: [] },
 	{ path: 'postprocessing/SavePass.js', dependencies: [ { name: 'Pass', path: 'postprocessing/Pass.js' }, { name: 'CopyShader', path: 'shaders/CopyShader.js' } ], ignoreList: [] },