ParallaxBarrierEffect.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import {
  2. LinearFilter,
  3. Mesh,
  4. NearestFilter,
  5. OrthographicCamera,
  6. PlaneBufferGeometry,
  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 PlaneBufferGeometry( 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 };