AnaglyphPassNode.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import { Matrix3, NodeMaterial } from 'three/webgpu';
  2. import { clamp, nodeObject, Fn, vec4, uv, uniform, max } from 'three/tsl';
  3. import StereoCompositePassNode from './StereoCompositePassNode.js';
  4. /**
  5. * A render pass node that creates an anaglyph effect.
  6. *
  7. * @augments StereoCompositePassNode
  8. * @three_import import { anaglyphPass } from 'three/addons/tsl/display/AnaglyphPassNode.js';
  9. */
  10. class AnaglyphPassNode extends StereoCompositePassNode {
  11. static get type() {
  12. return 'AnaglyphPassNode';
  13. }
  14. /**
  15. * Constructs a new anaglyph 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.isAnaglyphPassNode = true;
  30. // Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
  31. /**
  32. * Color matrix node for the left eye.
  33. *
  34. * @type {UniformNode<mat3>}
  35. */
  36. this._colorMatrixLeft = uniform( new Matrix3().fromArray( [
  37. 0.456100, - 0.0400822, - 0.0152161,
  38. 0.500484, - 0.0378246, - 0.0205971,
  39. 0.176381, - 0.0157589, - 0.00546856
  40. ] ) );
  41. /**
  42. * Color matrix node for the right eye.
  43. *
  44. * @type {UniformNode<mat3>}
  45. */
  46. this._colorMatrixRight = uniform( new Matrix3().fromArray( [
  47. - 0.0434706, 0.378476, - 0.0721527,
  48. - 0.0879388, 0.73364, - 0.112961,
  49. - 0.00155529, - 0.0184503, 1.2264
  50. ] ) );
  51. }
  52. /**
  53. * This method is used to setup the effect's TSL code.
  54. *
  55. * @param {NodeBuilder} builder - The current node builder.
  56. * @return {PassTextureNode}
  57. */
  58. setup( builder ) {
  59. const uvNode = uv();
  60. const anaglyph = Fn( () => {
  61. const colorL = this._mapLeft.sample( uvNode );
  62. const colorR = this._mapRight.sample( uvNode );
  63. const color = clamp( this._colorMatrixLeft.mul( colorL.rgb ).add( this._colorMatrixRight.mul( colorR.rgb ) ) );
  64. return vec4( color.rgb, max( colorL.a, colorR.a ) );
  65. } );
  66. const material = this._material || ( this._material = new NodeMaterial() );
  67. material.fragmentNode = anaglyph().context( builder.getSharedContext() );
  68. material.name = 'Anaglyph';
  69. material.needsUpdate = true;
  70. return super.setup( builder );
  71. }
  72. }
  73. export default AnaglyphPassNode;
  74. /**
  75. * TSL function for creating an anaglyph pass node.
  76. *
  77. * @tsl
  78. * @function
  79. * @param {Scene} scene - The scene to render.
  80. * @param {Camera} camera - The camera to render the scene with.
  81. * @returns {AnaglyphPassNode}
  82. */
  83. export const anaglyphPass = ( scene, camera ) => nodeObject( new AnaglyphPassNode( scene, camera ) );