فهرست منبع

JSM: Added module and TS file for ParallaxBarrierEffect.

Mugen87 6 سال پیش
والد
کامیت
8b8fa76d48

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

@@ -107,6 +107,7 @@
 					<ul>
 						<li>AnaglyphEffect</li>
 						<li>AsciiEffect</li>
+						<li>ParallaxBarrierEffect</li>
 						<li>StereoEffect</li>
 					</ul>
 				</li>

+ 12 - 0
examples/jsm/effects/ParallaxBarrierEffect.d.ts

@@ -0,0 +1,12 @@
+import {
+  Camera,
+  Scene,
+  WebGLRenderer
+} from '../../../src/Three';
+
+export class ParallaxBarrierEffect {
+  constructor(renderer: WebGLRenderer);
+
+  render(scene: Scene, camera: Camera): void;
+  setSize(width: number, height: number): void;
+}

+ 118 - 0
examples/jsm/effects/ParallaxBarrierEffect.js

@@ -0,0 +1,118 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author marklundin / http://mark-lundin.com/
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+import {
+	LinearFilter,
+	Mesh,
+	NearestFilter,
+	OrthographicCamera,
+	PlaneBufferGeometry,
+	RGBAFormat,
+	Scene,
+	ShaderMaterial,
+	StereoCamera,
+	WebGLRenderTarget
+} from "../../../build/three.module.js";
+
+var ParallaxBarrierEffect = function ( renderer ) {
+
+	var _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+
+	var _scene = new Scene();
+
+	var _stereo = new StereoCamera();
+
+	var _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
+
+	var _renderTargetL = new WebGLRenderTarget( 512, 512, _params );
+	var _renderTargetR = new WebGLRenderTarget( 512, 512, _params );
+
+	var _material = new ShaderMaterial( {
+
+		uniforms: {
+
+			"mapLeft": { value: _renderTargetL.texture },
+			"mapRight": { value: _renderTargetR.texture }
+
+		},
+
+		vertexShader: [
+
+			"varying vec2 vUv;",
+
+			"void main() {",
+
+			"	vUv = vec2( uv.x, uv.y );",
+			"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+			"}"
+
+		].join( "\n" ),
+
+		fragmentShader: [
+
+			"uniform sampler2D mapLeft;",
+			"uniform sampler2D mapRight;",
+			"varying vec2 vUv;",
+
+			"void main() {",
+
+			"	vec2 uv = vUv;",
+
+			"	if ( ( mod( gl_FragCoord.y, 2.0 ) ) > 1.00 ) {",
+
+			"		gl_FragColor = texture2D( mapLeft, uv );",
+
+			"	} else {",
+
+			"		gl_FragColor = texture2D( mapRight, uv );",
+
+			"	}",
+
+			"}"
+
+		].join( "\n" )
+
+	} );
+
+	var mesh = new Mesh( new PlaneBufferGeometry( 2, 2 ), _material );
+	_scene.add( mesh );
+
+	this.setSize = function ( width, height ) {
+
+		renderer.setSize( width, height );
+
+		var pixelRatio = renderer.getPixelRatio();
+
+		_renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
+		_renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
+
+	};
+
+	this.render = function ( scene, camera ) {
+
+		scene.updateMatrixWorld();
+
+		if ( camera.parent === null ) camera.updateMatrixWorld();
+
+		_stereo.update( camera );
+
+		renderer.setRenderTarget( _renderTargetL );
+		renderer.clear();
+		renderer.render( scene, _stereo.cameraL );
+
+		renderer.setRenderTarget( _renderTargetR );
+		renderer.clear();
+		renderer.render( scene, _stereo.cameraR );
+
+		renderer.setRenderTarget( null );
+		renderer.render( _scene, _camera );
+
+	};
+
+};
+
+export { ParallaxBarrierEffect };

+ 1 - 0
utils/modularize.js

@@ -30,6 +30,7 @@ var files = [
 
 	{ path: 'effects/AnaglyphEffect.js', dependencies: [], ignoreList: [] },
 	{ path: 'effects/AsciiEffect.js', dependencies: [], ignoreList: [] },
+	{ path: 'effects/ParallaxBarrierEffect.js', dependencies: [], ignoreList: [] },
 	{ path: 'effects/StereoEffect.js', dependencies: [], ignoreList: [] },
 
 	{ path: 'exporters/GLTFExporter.js', dependencies: [], ignoreList: [ 'AnimationClip', 'Camera', 'Geometry', 'Material', 'Mesh', 'Object3D', 'RGBFormat', 'Scenes', 'ShaderMaterial', 'VertexColors' ] },