ParallaxBarrierEffect.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import {
  2. LinearFilter,
  3. Mesh,
  4. NearestFilter,
  5. OrthographicCamera,
  6. PlaneGeometry,
  7. RGBAFormat,
  8. Scene,
  9. ShaderMaterial,
  10. StereoCamera,
  11. WebGLRenderTarget
  12. } from '../../../build/three.module.js';
  13. var ParallaxBarrierEffect = function ( renderer ) {
  14. var _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
  15. var _scene = new Scene();
  16. var _stereo = new StereoCamera();
  17. var _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
  18. var _renderTargetL = new WebGLRenderTarget( 512, 512, _params );
  19. var _renderTargetR = new WebGLRenderTarget( 512, 512, _params );
  20. var _material = new ShaderMaterial( {
  21. uniforms: {
  22. 'mapLeft': { value: _renderTargetL.texture },
  23. 'mapRight': { value: _renderTargetR.texture }
  24. },
  25. vertexShader: [
  26. 'varying vec2 vUv;',
  27. 'void main() {',
  28. ' vUv = vec2( uv.x, uv.y );',
  29. ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
  30. '}'
  31. ].join( '\n' ),
  32. fragmentShader: [
  33. 'uniform sampler2D mapLeft;',
  34. 'uniform sampler2D mapRight;',
  35. 'varying vec2 vUv;',
  36. 'void main() {',
  37. ' vec2 uv = vUv;',
  38. ' if ( ( mod( gl_FragCoord.y, 2.0 ) ) > 1.00 ) {',
  39. ' gl_FragColor = texture2D( mapLeft, uv );',
  40. ' } else {',
  41. ' gl_FragColor = texture2D( mapRight, uv );',
  42. ' }',
  43. '}'
  44. ].join( '\n' )
  45. } );
  46. var mesh = new Mesh( new PlaneGeometry( 2, 2 ), _material );
  47. _scene.add( mesh );
  48. this.setSize = function ( width, height ) {
  49. renderer.setSize( width, height );
  50. var pixelRatio = renderer.getPixelRatio();
  51. _renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
  52. _renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
  53. };
  54. this.render = function ( scene, camera ) {
  55. scene.updateMatrixWorld();
  56. if ( camera.parent === null ) camera.updateMatrixWorld();
  57. _stereo.update( camera );
  58. renderer.setRenderTarget( _renderTargetL );
  59. renderer.clear();
  60. renderer.render( scene, _stereo.cameraL );
  61. renderer.setRenderTarget( _renderTargetR );
  62. renderer.clear();
  63. renderer.render( scene, _stereo.cameraR );
  64. renderer.setRenderTarget( null );
  65. renderer.render( _scene, _camera );
  66. };
  67. };
  68. export { ParallaxBarrierEffect };