ParallaxBarrierEffect.js 2.3 KB

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