StereoCompositePassNode.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. import { RenderTarget, StereoCamera, HalfFloatType, LinearFilter, NearestFilter, Vector2, PassNode, QuadMesh, RendererUtils } from 'three/webgpu';
  2. import { texture } from 'three/tsl';
  3. const _size = /*@__PURE__*/ new Vector2();
  4. const _quadMesh = /*@__PURE__*/ new QuadMesh();
  5. let _rendererState;
  6. /**
  7. * A special (abstract) render pass node that renders the scene
  8. * as a stereoscopic image. Unlike {@link StereoPassNode}, this
  9. * node merges the image for the left and right eye
  10. * into a single one. That is required for effects like
  11. * anaglyph or parallax barrier.
  12. *
  13. * @abstract
  14. * @augments PassNode
  15. * @three_import import { StereoCompositePassNode } from 'three/addons/tsl/display/StereoCompositePassNode.js';
  16. */
  17. class StereoCompositePassNode extends PassNode {
  18. static get type() {
  19. return 'StereoCompositePassNode';
  20. }
  21. /**
  22. * Constructs a new stereo composite pass node.
  23. *
  24. * @param {Scene} scene - The scene to render.
  25. * @param {Camera} camera - The camera to render the scene with.
  26. */
  27. constructor( scene, camera ) {
  28. super( PassNode.COLOR, scene, camera );
  29. /**
  30. * This flag can be used for type testing.
  31. *
  32. * @type {boolean}
  33. * @readonly
  34. * @default true
  35. */
  36. this.isStereoCompositePassNode = true;
  37. /**
  38. * The internal stereo camera that is used to render the scene.
  39. *
  40. * @type {StereoCamera}
  41. */
  42. this.stereo = new StereoCamera();
  43. const _params = { minFilter: LinearFilter, magFilter: NearestFilter, type: HalfFloatType };
  44. /**
  45. * The render target for rendering the left eye's view.
  46. *
  47. * @type {RenderTarget}
  48. */
  49. this._renderTargetL = new RenderTarget( 1, 1, _params );
  50. /**
  51. * The render target for rendering the right eye's view.
  52. *
  53. * @type {RenderTarget}
  54. */
  55. this._renderTargetR = new RenderTarget( 1, 1, _params );
  56. /**
  57. * A texture node representing the left's eye view.
  58. *
  59. * @type {TextureNode}
  60. */
  61. this._mapLeft = texture( this._renderTargetL.texture );
  62. /**
  63. * A texture node representing the right's eye view.
  64. *
  65. * @type {TextureNode}
  66. */
  67. this._mapRight = texture( this._renderTargetR.texture );
  68. /**
  69. * The node material that implements the composite. All
  70. * derived effect passes must provide an instance for rendering.
  71. *
  72. * @type {NodeMaterial}
  73. */
  74. this._material = null;
  75. }
  76. /**
  77. * Updates the internal stereo camera.
  78. *
  79. * @param {number} coordinateSystem - The current coordinate system.
  80. */
  81. updateStereoCamera( coordinateSystem ) {
  82. this.stereo.cameraL.coordinateSystem = coordinateSystem;
  83. this.stereo.cameraR.coordinateSystem = coordinateSystem;
  84. this.stereo.update( this.camera );
  85. }
  86. /**
  87. * Sets the size of the pass.
  88. *
  89. * @param {number} width - The width of the pass.
  90. * @param {number} height - The height of the pass.
  91. */
  92. setSize( width, height ) {
  93. super.setSize( width, height );
  94. this._renderTargetL.setSize( this.renderTarget.width, this.renderTarget.height );
  95. this._renderTargetR.setSize( this.renderTarget.width, this.renderTarget.height );
  96. }
  97. /**
  98. * This method is used to render the effect once per frame.
  99. *
  100. * @param {NodeFrame} frame - The current node frame.
  101. */
  102. updateBefore( frame ) {
  103. const { renderer } = frame;
  104. const { scene, stereo, renderTarget } = this;
  105. _rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
  106. //
  107. this._pixelRatio = renderer.getPixelRatio();
  108. this.updateStereoCamera( renderer.coordinateSystem );
  109. const size = renderer.getSize( _size );
  110. this.setSize( size.width, size.height );
  111. // left
  112. renderer.setRenderTarget( this._renderTargetL );
  113. renderer.render( scene, stereo.cameraL );
  114. // right
  115. renderer.setRenderTarget( this._renderTargetR );
  116. renderer.render( scene, stereo.cameraR );
  117. // composite
  118. renderer.setRenderTarget( renderTarget );
  119. _quadMesh.material = this._material;
  120. _quadMesh.render( renderer );
  121. // restore
  122. RendererUtils.restoreRendererState( renderer, _rendererState );
  123. }
  124. /**
  125. * Frees internal resources. This method should be called
  126. * when the pass is no longer required.
  127. */
  128. dispose() {
  129. super.dispose();
  130. this._renderTargetL.dispose();
  131. this._renderTargetR.dispose();
  132. if ( this._material !== null ) {
  133. this._material.dispose();
  134. }
  135. }
  136. }
  137. export default StereoCompositePassNode;