fix: WebGLMultipleRenderTargets is removed in r172. (#309)

Author: codergigachad

src/compat.js

@@ -0,0 +1,81 @@
+import * as THREE from 'three'
+
+const version = /* @__PURE__ */ (() => parseInt(THREE.REVISION.replace(/\D+/g, '')))()
+
+// NOTE: WebGLMultipleRenderTargets is removed since r172, so we implement it ourselves.
+// https://github.com/mrdoob/three.js/pull/26427
+export const WebGLMultipleRenderTargets =
+  version >= 162
+    ? class extends THREE.WebGLRenderTarget {
+        constructor(width = 1, height = 1, count = 1, options = {}) {
+          super(width, height, { ...options, count })
+
+          this.isWebGLMultipleRenderTargets = true
+        }
+
+        get texture() {
+          return this.textures
+        }
+      }
+    : class extends THREE.WebGLRenderTarget {
+        constructor(width = 1, height = 1, count = 1, options = {}) {
+          super(width, height, options)
+
+          this.isWebGLMultipleRenderTargets = true
+
+          const texture = this.texture
+
+          this.texture = []
+
+          for (let i = 0; i < count; i++) {
+            this.texture[i] = texture.clone()
+            this.texture[i].isRenderTargetTexture = true
+          }
+        }
+
+        setSize(width, height, depth = 1) {
+          if (this.width !== width || this.height !== height || this.depth !== depth) {
+            this.width = width
+            this.height = height
+            this.depth = depth
+
+            for (let i = 0, il = this.texture.length; i < il; i++) {
+              this.texture[i].image.width = width
+              this.texture[i].image.height = height
+              this.texture[i].image.depth = depth
+            }
+
+            this.dispose()
+          }
+
+          this.viewport.set(0, 0, width, height)
+          this.scissor.set(0, 0, width, height)
+        }
+
+        copy(source) {
+          this.dispose()
+
+          this.width = source.width
+          this.height = source.height
+          this.depth = source.depth
+
+          this.scissor.copy(source.scissor)
+          this.scissorTest = source.scissorTest
+
+          this.viewport.copy(source.viewport)
+
+          this.depthBuffer = source.depthBuffer
+          this.stencilBuffer = source.stencilBuffer
+
+          if (source.depthTexture !== null) this.depthTexture = source.depthTexture.clone()
+
+          this.texture.length = 0
+
+          for (let i = 0, il = source.texture.length; i < il; i++) {
+            this.texture[i] = source.texture[i].clone()
+            this.texture[i].isRenderTargetTexture = true
+          }
+
+          return this
+        }
+      }

src/effects/N8AO/N8AOPostPass.js

@@ -7,6 +7,7 @@ import { EffectCompositer } from './EffectCompositer'
 import { PoissionBlur } from './PoissionBlur'
 import { DepthDownSample } from './DepthDownSample'
 import BlueNoise from './BlueNoise'
+import { WebGLMultipleRenderTargets } from '../../compat'
 
 const bluenoiseBits = Buffer.from(BlueNoise, 'base64')
 
@@ -190,7 +191,7 @@ class N8AOPostPass extends Pass {
                                format: THREE.RedFormat,
                                type: THREE.FloatType
                            });*/
-        new THREE.WebGLMultipleRenderTargets(this.width / 2, this.height / 2, 2)
+        new WebGLMultipleRenderTargets(this.width / 2, this.height / 2, 2)
       this.depthDownsampleTarget.texture[0].format = THREE.RedFormat
       this.depthDownsampleTarget.texture[0].type = THREE.FloatType
       this.depthDownsampleTarget.texture[0].minFilter = THREE.NearestFilter

src/effects/SSR/screen-space-reflections.js

@@ -12,7 +12,6 @@ import {
   WebGLRenderTarget,
   LinearFilter,
   HalfFloatType,
-  WebGLMultipleRenderTargets,
   ShaderChunk,
   Color,
   Quaternion,
@@ -27,6 +26,7 @@ import {
   PMREMGenerator,
   Texture,
 } from 'three'
+import { WebGLMultipleRenderTargets } from '../../compat'
 
 const boxBlur = /* glsl */ `
   uniform float blur;