ParallaxBarrierPassNode.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. import { NodeMaterial } from 'three/webgpu';
  2. import { nodeObject, Fn, vec4, uv, If, mod, screenCoordinate } from 'three/tsl';
  3. import StereoCompositePassNode from './StereoCompositePassNode.js';
  4. /**
  5. * A render pass node that creates a parallax barrier effect.
  6. *
  7. * @augments StereoCompositePassNode
  8. * @three_import import { parallaxBarrierPass } from 'three/addons/tsl/display/ParallaxBarrierPassNode.js';
  9. */
  10. class ParallaxBarrierPassNode extends StereoCompositePassNode {
  11. static get type() {
  12. return 'ParallaxBarrierPassNode';
  13. }
  14. /**
  15. * Constructs a new parallax barrier pass node.
  16. *
  17. * @param {Scene} scene - The scene to render.
  18. * @param {Camera} camera - The camera to render the scene with.
  19. */
  20. constructor( scene, camera ) {
  21. super( scene, camera );
  22. /**
  23. * This flag can be used for type testing.
  24. *
  25. * @type {boolean}
  26. * @readonly
  27. * @default true
  28. */
  29. this.isParallaxBarrierPassNode = true;
  30. }
  31. /**
  32. * This method is used to setup the effect's TSL code.
  33. *
  34. * @param {NodeBuilder} builder - The current node builder.
  35. * @return {PassTextureNode}
  36. */
  37. setup( builder ) {
  38. const uvNode = uv();
  39. const parallaxBarrier = Fn( () => {
  40. const color = vec4().toVar();
  41. If( mod( screenCoordinate.y, 2 ).greaterThan( 1 ), () => {
  42. color.assign( this._mapLeft.sample( uvNode ) );
  43. } ).Else( () => {
  44. color.assign( this._mapRight.sample( uvNode ) );
  45. } );
  46. return color;
  47. } );
  48. const material = this._material || ( this._material = new NodeMaterial() );
  49. material.fragmentNode = parallaxBarrier().context( builder.getSharedContext() );
  50. material.needsUpdate = true;
  51. return super.setup( builder );
  52. }
  53. }
  54. export default ParallaxBarrierPassNode;
  55. /**
  56. * TSL function for creating an parallax barrier pass node.
  57. *
  58. * @tsl
  59. * @function
  60. * @param {Scene} scene - The scene to render.
  61. * @param {Camera} camera - The camera to render the scene with.
  62. * @returns {ParallaxBarrierPassNode}
  63. */
  64. export const parallaxBarrierPass = ( scene, camera ) => nodeObject( new ParallaxBarrierPassNode( scene, camera ) );