ParallaxBarrierEffect.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. ( function () {
  2. class ParallaxBarrierEffect {
  3. constructor( renderer ) {
  4. const _camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
  5. const _scene = new THREE.Scene();
  6. const _stereo = new THREE.StereoCamera();
  7. const _params = {
  8. minFilter: THREE.LinearFilter,
  9. magFilter: THREE.NearestFilter,
  10. format: THREE.RGBAFormat
  11. };
  12. const _renderTargetL = new THREE.WebGLRenderTarget( 512, 512, _params );
  13. const _renderTargetR = new THREE.WebGLRenderTarget( 512, 512, _params );
  14. const _material = new THREE.ShaderMaterial( {
  15. uniforms: {
  16. 'mapLeft': {
  17. value: _renderTargetL.texture
  18. },
  19. 'mapRight': {
  20. value: _renderTargetR.texture
  21. }
  22. },
  23. vertexShader: [ 'varying vec2 vUv;', 'void main() {', ' vUv = vec2( uv.x, uv.y );', ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
  24. 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' )
  25. } );
  26. const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), _material );
  27. _scene.add( mesh );
  28. this.setSize = function ( width, height ) {
  29. renderer.setSize( width, height );
  30. const pixelRatio = renderer.getPixelRatio();
  31. _renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
  32. _renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
  33. };
  34. this.render = function ( scene, camera ) {
  35. scene.updateMatrixWorld();
  36. if ( camera.parent === null ) camera.updateMatrixWorld();
  37. _stereo.update( camera );
  38. renderer.setRenderTarget( _renderTargetL );
  39. renderer.clear();
  40. renderer.render( scene, _stereo.cameraL );
  41. renderer.setRenderTarget( _renderTargetR );
  42. renderer.clear();
  43. renderer.render( scene, _stereo.cameraR );
  44. renderer.setRenderTarget( null );
  45. renderer.render( _scene, _camera );
  46. };
  47. }
  48. }
  49. THREE.ParallaxBarrierEffect = ParallaxBarrierEffect;
  50. } )();