StereoCompositePassNode.js 4.1 KB

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