EffectComposer.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. ;(function () {
  2. class EffectComposer {
  3. constructor(renderer, renderTarget) {
  4. this.renderer = renderer
  5. if (renderTarget === undefined) {
  6. const size = renderer.getSize(new THREE.Vector2())
  7. this._pixelRatio = renderer.getPixelRatio()
  8. this._width = size.width
  9. this._height = size.height
  10. renderTarget = new THREE.WebGLRenderTarget(this._width * this._pixelRatio, this._height * this._pixelRatio)
  11. renderTarget.texture.name = 'EffectComposer.rt1'
  12. } else {
  13. this._pixelRatio = 1
  14. this._width = renderTarget.width
  15. this._height = renderTarget.height
  16. }
  17. this.renderTarget1 = renderTarget
  18. this.renderTarget2 = renderTarget.clone()
  19. this.renderTarget2.texture.name = 'EffectComposer.rt2'
  20. this.writeBuffer = this.renderTarget1
  21. this.readBuffer = this.renderTarget2
  22. this.renderToScreen = true
  23. this.passes = [] // dependencies
  24. if (THREE.CopyShader === undefined) {
  25. console.error('THREE.EffectComposer relies on THREE.CopyShader')
  26. }
  27. if (THREE.ShaderPass === undefined) {
  28. console.error('THREE.EffectComposer relies on THREE.ShaderPass')
  29. }
  30. this.copyPass = new THREE.ShaderPass(THREE.CopyShader)
  31. this.clock = new THREE.Clock()
  32. }
  33. swapBuffers() {
  34. const tmp = this.readBuffer
  35. this.readBuffer = this.writeBuffer
  36. this.writeBuffer = tmp
  37. }
  38. addPass(pass) {
  39. this.passes.push(pass)
  40. pass.setSize(this._width * this._pixelRatio, this._height * this._pixelRatio)
  41. }
  42. insertPass(pass, index) {
  43. this.passes.splice(index, 0, pass)
  44. pass.setSize(this._width * this._pixelRatio, this._height * this._pixelRatio)
  45. }
  46. removePass(pass) {
  47. const index = this.passes.indexOf(pass)
  48. if (index !== -1) {
  49. this.passes.splice(index, 1)
  50. }
  51. }
  52. isLastEnabledPass(passIndex) {
  53. for (let i = passIndex + 1; i < this.passes.length; i++) {
  54. if (this.passes[i].enabled) {
  55. return false
  56. }
  57. }
  58. return true
  59. }
  60. render(deltaTime) {
  61. // deltaTime value is in seconds
  62. if (deltaTime === undefined) {
  63. deltaTime = this.clock.getDelta()
  64. }
  65. const currentRenderTarget = this.renderer.getRenderTarget()
  66. let maskActive = false
  67. for (let i = 0, il = this.passes.length; i < il; i++) {
  68. const pass = this.passes[i]
  69. if (pass.enabled === false) continue
  70. pass.renderToScreen = this.renderToScreen && this.isLastEnabledPass(i)
  71. pass.render(this.renderer, this.writeBuffer, this.readBuffer, deltaTime, maskActive)
  72. if (pass.needsSwap) {
  73. if (maskActive) {
  74. const context = this.renderer.getContext()
  75. const stencil = this.renderer.state.buffers.stencil //context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
  76. stencil.setFunc(context.NOTEQUAL, 1, 0xffffffff)
  77. this.copyPass.render(this.renderer, this.writeBuffer, this.readBuffer, deltaTime) //context.stencilFunc( context.EQUAL, 1, 0xffffffff );
  78. stencil.setFunc(context.EQUAL, 1, 0xffffffff)
  79. }
  80. this.swapBuffers()
  81. }
  82. if (THREE.MaskPass !== undefined) {
  83. if (pass instanceof THREE.MaskPass) {
  84. maskActive = true
  85. } else if (pass instanceof THREE.ClearMaskPass) {
  86. maskActive = false
  87. }
  88. }
  89. }
  90. this.renderer.setRenderTarget(currentRenderTarget)
  91. }
  92. reset(renderTarget) {
  93. if (renderTarget === undefined) {
  94. const size = this.renderer.getSize(new THREE.Vector2())
  95. this._pixelRatio = this.renderer.getPixelRatio()
  96. this._width = size.width
  97. this._height = size.height
  98. renderTarget = this.renderTarget1.clone()
  99. renderTarget.setSize(this._width * this._pixelRatio, this._height * this._pixelRatio)
  100. }
  101. this.renderTarget1.dispose()
  102. this.renderTarget2.dispose()
  103. this.renderTarget1 = renderTarget
  104. this.renderTarget2 = renderTarget.clone()
  105. this.writeBuffer = this.renderTarget1
  106. this.readBuffer = this.renderTarget2
  107. }
  108. setSize(width, height) {
  109. this._width = width
  110. this._height = height
  111. const effectiveWidth = this._width * this._pixelRatio
  112. const effectiveHeight = this._height * this._pixelRatio
  113. this.renderTarget1.setSize(effectiveWidth, effectiveHeight)
  114. this.renderTarget2.setSize(effectiveWidth, effectiveHeight)
  115. for (let i = 0; i < this.passes.length; i++) {
  116. this.passes[i].setSize(effectiveWidth, effectiveHeight)
  117. }
  118. }
  119. setPixelRatio(pixelRatio) {
  120. this._pixelRatio = pixelRatio
  121. this.setSize(this._width, this._height)
  122. }
  123. }
  124. class Pass {
  125. constructor() {
  126. // if set to true, the pass is processed by the composer
  127. this.enabled = true // if set to true, the pass indicates to swap read and write buffer after rendering
  128. this.needsSwap = true // if set to true, the pass clears its buffer before rendering
  129. this.clear = false // if set to true, the result of the pass is rendered to screen. This is set automatically by EffectComposer.
  130. this.renderToScreen = false
  131. }
  132. setSize() {}
  133. render() {
  134. console.error('THREE.Pass: .render() must be implemented in derived pass.')
  135. }
  136. } // Helper for passes that need to fill the viewport with a single quad.
  137. const _camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1) // https://github.com/mrdoob/three.js/pull/21358
  138. const _geometry = new THREE.BufferGeometry()
  139. _geometry.setAttribute('position', new THREE.Float32BufferAttribute([-1, 3, 0, -1, -1, 0, 3, -1, 0], 3))
  140. _geometry.setAttribute('uv', new THREE.Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2))
  141. class FullScreenQuad {
  142. constructor(material) {
  143. this._mesh = new THREE.Mesh(_geometry, material)
  144. }
  145. dispose() {
  146. this._mesh.geometry.dispose()
  147. }
  148. render(renderer) {
  149. renderer.render(this._mesh, _camera)
  150. }
  151. get material() {
  152. return this._mesh.material
  153. }
  154. set material(value) {
  155. this._mesh.material = value
  156. }
  157. }
  158. THREE.EffectComposer = EffectComposer
  159. THREE.FullScreenQuad = FullScreenQuad
  160. THREE.Pass = Pass
  161. })()