threepipe
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

ProgressivePlugin.ts 7.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. import {IUniform, Texture, TextureDataType, UnsignedByteType, WebGLRenderTarget} from 'three'
  2. import {IPassID, IPipelinePass} from '../../postprocessing'
  3. import {ThreeViewer} from '../../viewer'
  4. import {PipelinePassPlugin} from '../base/PipelinePassPlugin'
  5. import {uiFolderContainer, uiImage, uiInput} from 'uiconfig.js'
  6. import {ICamera, IRenderManager, IScene, IWebGLRenderer} from '../../core'
  7. import {AddBlendTexturePass} from '../../postprocessing/AddBlendTexturePass'
  8. import {getOrCall, serialize, ValOrFunc} from 'ts-browser-helpers'
  9. import {IShaderPropertiesUpdater} from '../../materials'
  10. export type ProgressivePluginEventTypes = ''
  11. export type ProgressivePluginTarget = WebGLRenderTarget
  12. /**
  13. * Progressive Plugin
  14. *
  15. * Adds a post-render pass to blend the last frame with the current frame.
  16. * This can be used to create a progressive rendering effect which is useful for progressive shadows, gi, denoising, baking, anti-aliasing, and many other effects.
  17. * @category Plugins
  18. */
  19. @uiFolderContainer('Progressive Plugin')
  20. export class ProgressivePlugin
  21. extends PipelinePassPlugin<ProgressiveBlendPass, 'progressive', ProgressivePluginEventTypes> implements IShaderPropertiesUpdater {
  22. readonly passId = 'progressive'
  23. public static readonly PluginType = 'ProgressivePlugin'
  24. protected _targets = new Map<string, ProgressivePluginTarget>()
  25. @serialize() @uiInput('Frame count') maxFrameCount: number
  26. // todo: deserialize jitter
  27. // @uiImage('Last Texture' /* {readOnly: true}*/) texture?: Texture
  28. get texture(): Texture | undefined {
  29. return this.target?.texture
  30. }
  31. get target(): ProgressivePluginTarget | undefined {
  32. return this._viewer ? this._targets.get(this._viewer.scene.renderCamera.uuid) : undefined
  33. }
  34. getTarget(camera?: ICamera) {
  35. return this._viewer ? this._targets.get((camera ? camera : this._viewer.scene.renderCamera).uuid) : undefined
  36. }
  37. get textures() {
  38. return this._viewer ? Array.from(this._targets.values()).map(t => t.texture) : []
  39. }
  40. @uiImage('Last Texture' /* {readOnly: true}*/)
  41. get mainTexture() {
  42. return this._viewer ? this.getTarget(this._viewer.scene.mainCamera)?.texture : undefined
  43. }
  44. // @onChange2(ProgressivePlugin.prototype._createTarget)
  45. // @uiDropdown('Buffer Type', threeConstMappings.TextureDataType.uiConfig)
  46. readonly bufferType: TextureDataType // cannot be changed after creation (for now)
  47. constructor(
  48. maxFrameCount = 32,
  49. bufferType: TextureDataType = UnsignedByteType,
  50. enabled = true,
  51. ) {
  52. super()
  53. this.maxFrameCount = maxFrameCount
  54. this.enabled = enabled
  55. this.bufferType = bufferType
  56. }
  57. protected _createTarget(camera?: ICamera, recreate = false) {
  58. if (!this._viewer) return
  59. camera = camera ?? this._viewer.scene.renderCamera
  60. if (recreate) this._disposeTarget(camera)
  61. if (this._targets.has(camera.uuid)) return this._targets.get(camera.uuid)
  62. const target = this._viewer.renderManager.composerTarget.clone(true) as WebGLRenderTarget
  63. target.texture.name = 'progressiveLastBuffer_' + camera.uuid
  64. // target.texture.type = this.bufferType
  65. this._targets.set(camera.uuid, target)
  66. // if (this._pass) this._pass.target = this.target
  67. return target
  68. }
  69. protected _disposeTarget(camera?: ICamera) {
  70. if (!this._viewer) return
  71. if (!camera) {
  72. this._targets.forEach((t) => this._viewer!.renderManager.disposeTarget(t))
  73. this._targets.clear()
  74. } else {
  75. const t = this._targets.get(camera.uuid)
  76. if (t) {
  77. this._viewer!.renderManager.disposeTarget(t)
  78. this._targets.delete(camera.uuid)
  79. }
  80. }
  81. }
  82. protected _createPass() {
  83. // this._createTarget(true)
  84. const pass = new ProgressiveBlendPass(this.passId, ()=>this.target ?? this._createTarget()) // todo: disposeTarget somewhere
  85. pass.dirty = () => (this._viewer?.renderManager.frameCount || 0) < this.maxFrameCount // todo use isConverged function
  86. return pass
  87. }
  88. onRemove(viewer: ThreeViewer): void {
  89. this._disposeTarget()
  90. return super.onRemove(viewer)
  91. }
  92. /**
  93. *
  94. * @param postRender - if called after rendering frame.
  95. */
  96. public isConverged(postRender = false): boolean {
  97. return (this._viewer?.renderer.frameCount || 0) >= this.maxFrameCount - 1 + (postRender ? 1 : 0)
  98. }
  99. updateShaderProperties(material: {defines: Record<string, string | number | undefined>; uniforms: {[p: string]: IUniform}}): this {
  100. if (material.uniforms.tLastFrame) material.uniforms.tLastFrame.value = this.target?.texture ?? undefined
  101. return this
  102. }
  103. /**
  104. * Get recording delta post render, For use with animations to sync with converge mode in canvas recorder. See PopmotionPlugin for usage.
  105. * @returns {number} - delta time in milliseconds, or 0 when converging, or -1 in case of not recording in converge mode
  106. */
  107. postFrameConvergedRecordingDelta(_ = 'CanvasRecorder'): number {
  108. // const recorder = this._viewer!.getPluginByType<IConvergedCanvasRecorder&IViewerPlugin>(recorderPlugin)
  109. // if (recorder && recorder.isRecording() && recorder.convergeMode)
  110. // return this.isConverged(true) ? 1. / recorder.videoFrameRate : 0
  111. return -1
  112. }
  113. }
  114. class ProgressiveBlendPass extends AddBlendTexturePass implements IPipelinePass {
  115. before = ['screen']
  116. after = ['render']
  117. required = ['render']
  118. dirty: ValOrFunc<boolean> = () => false
  119. constructor(public readonly passId: IPassID, public target?: ValOrFunc<WebGLRenderTarget|undefined>) {
  120. super()
  121. }
  122. render(renderer: IWebGLRenderer, writeBuffer: WebGLRenderTarget, readBuffer: WebGLRenderTarget, deltaTime: number, maskActive: boolean) {
  123. if (!this.enabled) return
  124. const target = getOrCall(this.target)
  125. if (!target) {
  126. console.warn('ProgressiveBlendPass: target not defined')
  127. return
  128. }
  129. if (renderer.renderManager.frameCount < 1) {
  130. this.needsSwap = false
  131. if (readBuffer?.texture)
  132. renderer.renderManager.blit(target, {
  133. source: readBuffer.texture,
  134. respectColorSpace: false,
  135. })
  136. return
  137. }
  138. this.needsSwap = true
  139. super.render(renderer, writeBuffer, readBuffer, deltaTime, maskActive)
  140. renderer.renderManager.blit(target, {
  141. source: writeBuffer.texture,
  142. respectColorSpace: false,
  143. })
  144. }
  145. beforeRender(_: IScene, _1: ICamera, renderManager: IRenderManager) {
  146. if (!this.enabled) return
  147. if (!this.target) {
  148. console.error('ProgressiveBlendPass: render target undefined')
  149. return
  150. }
  151. let f = 1. / (Math.max(renderManager.frameCount, 0) + 1)
  152. this.uniforms.weight.value.set(f, f, f, f)
  153. f = 1. - f
  154. this.uniforms.weight2.value.set(f, f, f, f)
  155. this.uniforms.tDiffuse2.value = getOrCall(this.target)?.texture
  156. this.material.uniformsNeedUpdate = true
  157. }
  158. }