DotScreenNode.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. import TempNode from '../core/TempNode.js';
  2. import { nodeObject, addNodeElement, tslFn, vec2, vec3, vec4 } from '../shadernode/ShaderNode.js';
  3. import { uniform } from '../core/UniformNode.js';
  4. import { NodeUpdateType } from '../core/constants.js';
  5. import { uv } from '../accessors/UVNode.js';
  6. import { texturePass } from './PassNode.js';
  7. import { sin, cos } from '../math/MathNode.js';
  8. import { add } from '../math/OperatorNode.js';
  9. import { Vector2, RenderTarget } from 'three';
  10. import QuadMesh from '../../objects/QuadMesh.js';
  11. const quadMesh = new QuadMesh();
  12. class DotScreenNode extends TempNode {
  13. constructor( colorNode, center = new Vector2( 0.5, 0.5 ), angle = 1.57, scale = 1 ) {
  14. super( 'vec4' );
  15. this.colorNode = colorNode;
  16. this.center = uniform( center );
  17. this.angle = uniform( angle );
  18. this.scale = uniform( scale );
  19. this._renderTarget = new RenderTarget();
  20. this._renderTarget.texture.name = 'dotScreen';
  21. this._size = uniform( new Vector2() );
  22. this._textureNode = texturePass( this, this._renderTarget.texture );
  23. this.updateBeforeType = NodeUpdateType.RENDER;
  24. }
  25. getTextureNode() {
  26. return this._textureNode;
  27. }
  28. setSize( width, height ) {
  29. this._size.value.set( width, height );
  30. this._renderTarget.setSize( width, height );
  31. }
  32. updateBefore( frame ) {
  33. const { renderer } = frame;
  34. const colorNode = this.colorNode;
  35. const map = colorNode.value;
  36. this._renderTarget.texture.type = map.type;
  37. const currentRenderTarget = renderer.getRenderTarget();
  38. const currentTexture = colorNode.value;
  39. quadMesh.material = this._material;
  40. this.setSize( map.image.width, map.image.height );
  41. // render
  42. renderer.setRenderTarget( this._renderTarget );
  43. quadMesh.render( renderer );
  44. // restore
  45. renderer.setRenderTarget( currentRenderTarget );
  46. colorNode.value = currentTexture;
  47. }
  48. setup( builder ) {
  49. const colorNode = this.colorNode;
  50. const pattern = tslFn( () => {
  51. const s = sin( this.angle );
  52. const c = cos( this.angle );
  53. const tex = uv().mul( this._size ).sub( this.center );
  54. const point = vec2( c.mul( tex.x ).sub( s.mul( tex.y ) ), s.mul( tex.x ).add( c.mul( tex.y ) ) ).mul( this.scale );
  55. return sin( point.x ).mul( sin( point.y ) ).mul( 4 );
  56. } );
  57. const dotScreen = tslFn( () => {
  58. const color = colorNode;
  59. const average = add( color.r, color.g, color.b ).div( 3 );
  60. return vec4( vec3( average.mul( 10 ).sub( 5 ).add( pattern() ) ), color.a );
  61. } );
  62. //
  63. const material = this._material || ( this._material = builder.createNodeMaterial() );
  64. material.fragmentNode = dotScreen();
  65. //
  66. const properties = builder.getNodeProperties( this );
  67. properties.textureNode = colorNode;
  68. //
  69. return this._textureNode;
  70. }
  71. }
  72. export const dotScreen = ( node, center, angle, scale ) => nodeObject( new DotScreenNode( nodeObject( node ), center, angle, scale ) );
  73. addNodeElement( 'dotScreen', dotScreen );
  74. export default DotScreenNode;