depthAwareBlend.js 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. import { abs, color, float, Fn, Loop, mix, nodeObject, perspectiveDepthToViewZ, reference, textureSize, uv, vec2, vec4, viewZToOrthographicDepth, int, If, array, ivec2 } from 'three/tsl';
  2. /**
  3. * Performs a depth-aware blend between a base scene and a secondary effect (like godrays).
  4. * This function uses a Poisson disk sampling pattern to detect depth discontinuities
  5. * in the neighborhood of the current pixel. If an edge is detected, it shifts the
  6. * sampling coordinate for the blend node away from the edge to prevent light leaking/haloing.
  7. *
  8. * @param {Node} baseNode - The main scene/beauty pass texture node.
  9. * @param {Node} blendNode - The effect to be blended (e.g., Godrays, Bloom).
  10. * @param {Node} depthNode - The scene depth texture node.
  11. * @param {Camera} camera - The camera used for the scene.
  12. * @param {Object} [options={}] - Configuration for the blend effect.
  13. * @param {Node|Color} [options.blendColor=Color(0xff0000)] - The color applied to the blend node.
  14. * @param {Node<int> | number} [options.edgeRadius=2] - The search radius (in pixels) for detecting depth edges.
  15. * @param {Node<float> | number} [options.edgeStrength=2] - How far to "push" the UV away from detected edges.
  16. * @returns {Node<vec4>} The resulting blended color node.
  17. */
  18. export const depthAwareBlend = /*#__PURE__*/ Fn( ( [ baseNode, blendNode, depthNode, camera, options = {} ] ) => {
  19. const uvNode = baseNode.uvNode || uv();
  20. const cameraNear = reference( 'near', 'float', camera );
  21. const cameraFar = reference( 'far', 'float', camera );
  22. const blendColor = nodeObject( options.blendColor ) || color( 0xffffff );
  23. const edgeRadius = nodeObject( options.edgeRadius ) || int( 2 );
  24. const edgeStrength = nodeObject( options.edgeStrength ) || float( 2 );
  25. const viewZ = perspectiveDepthToViewZ( depthNode, cameraNear, cameraFar );
  26. const correctDepth = viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
  27. const pushDir = vec2( 0.0 ).toVar();
  28. const count = float( 0 ).toVar();
  29. const resolution = ivec2( textureSize( baseNode ) ).toConst();
  30. const pixelStep = vec2( 1 ).div( resolution );
  31. const poissonDisk = array( [
  32. vec2( 0.493393, 0.394269 ),
  33. vec2( 0.798547, 0.885922 ),
  34. vec2( 0.259143, 0.650754 ),
  35. vec2( 0.605322, 0.023588 ),
  36. vec2( - 0.574681, 0.137452 ),
  37. vec2( - 0.430397, - 0.638423 ),
  38. vec2( - 0.849487, - 0.366258 ),
  39. vec2( 0.170621, - 0.569941 )
  40. ] );
  41. Loop( 8, ( { i } ) => {
  42. const offset = poissonDisk.element( i ).mul( edgeRadius );
  43. const sampleUv = uvNode.add( offset.mul( pixelStep ) );
  44. const sampleDepth = depthNode.sample( sampleUv );
  45. const sampleViewZ = perspectiveDepthToViewZ( sampleDepth, cameraNear, cameraFar );
  46. const sampleLinearDepth = viewZToOrthographicDepth( sampleViewZ, cameraNear, cameraFar );
  47. If( abs( sampleLinearDepth.sub( correctDepth ) ).lessThan( float( 0.05 ).mul( correctDepth ) ), () => {
  48. pushDir.addAssign( offset );
  49. count.addAssign( 1 );
  50. } );
  51. } );
  52. count.assign( count.equal( 0 ).select( 1, count ) );
  53. pushDir.divAssign( count ).normalize();
  54. const sampleUv = pushDir.length().greaterThan( 0 ).select( uvNode.add( edgeStrength.mul( pushDir.div( resolution ) ) ), uvNode );
  55. const bestChoice = blendNode.sample( sampleUv ).r;
  56. const baseColor = baseNode.sample( uvNode );
  57. return vec4( mix( baseColor, vec4( blendColor, 1 ), bestChoice ) );
  58. } );
粤ICP备19079148号