fix: tree-shake effects

pmndrs · May 26, 2023 · d31e8bb · d31e8bb
1 parent e9eab93
commit d31e8bb
Show file tree

Hide file tree

Showing 7 changed files with 797 additions and 859 deletions.
diff --git a/src/effects/AnaglyphEffect.js b/src/effects/AnaglyphEffect.js
@@ -12,154 +12,136 @@ import {
   WebGLRenderTarget,
 } from 'three'
 
-const AnaglyphEffect = function (renderer, width, height) {
-  // Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
-
-  this.colorMatrixLeft = new Matrix3().fromArray([
-    0.4561,
-    -0.0400822,
-    -0.0152161,
-    0.500484,
-    -0.0378246,
-    -0.0205971,
-    0.176381,
-    -0.0157589,
-    -0.00546856,
-  ])
-
-  this.colorMatrixRight = new Matrix3().fromArray([
-    -0.0434706,
-    0.378476,
-    -0.0721527,
-    -0.0879388,
-    0.73364,
-    -0.112961,
-    -0.00155529,
-    -0.0184503,
-    1.2264,
-  ])
-
-  const _camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
-
-  const _scene = new Scene()
-
-  const _stereo = new StereoCamera()
-
-  const _params = {
-    minFilter: LinearFilter,
-    magFilter: NearestFilter,
-    format: RGBAFormat,
-  }
+class AnaglyphEffect {
+  constructor(renderer, width = 512, height = 512) {
+    // Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
 
-  if (width === undefined) width = 512
-  if (height === undefined) height = 512
+    this.colorMatrixLeft = new Matrix3().fromArray([
+      0.4561,
+      -0.0400822,
+      -0.0152161,
+      0.500484,
+      -0.0378246,
+      -0.0205971,
+      0.176381,
+      -0.0157589,
+      -0.00546856,
+    ])
 
-  const _renderTargetL = new WebGLRenderTarget(width, height, _params)
-  const _renderTargetR = new WebGLRenderTarget(width, height, _params)
+    this.colorMatrixRight = new Matrix3().fromArray([
+      -0.0434706,
+      0.378476,
+      -0.0721527,
+      -0.0879388,
+      0.73364,
+      -0.112961,
+      -0.00155529,
+      -0.0184503,
+      1.2264,
+    ])
 
-  const _material = new ShaderMaterial({
-    uniforms: {
-      mapLeft: { value: _renderTargetL.texture },
-      mapRight: { value: _renderTargetR.texture },
+    const _camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
 
-      colorMatrixLeft: { value: this.colorMatrixLeft },
-      colorMatrixRight: { value: this.colorMatrixRight },
-    },
+    const _scene = new Scene()
 
-    vertexShader: [
-      'varying vec2 vUv;',
+    const _stereo = new StereoCamera()
 
-      'void main() {',
+    const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat }
 
-      '	vUv = vec2( uv.x, uv.y );',
-      '	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+    const _renderTargetL = new WebGLRenderTarget(width, height, _params)
+    const _renderTargetR = new WebGLRenderTarget(width, height, _params)
 
-      '}',
-    ].join('\n'),
+    const _material = new ShaderMaterial({
+      uniforms: {
+        mapLeft: { value: _renderTargetL.texture },
+        mapRight: { value: _renderTargetR.texture },
 
-    fragmentShader: [
-      'uniform sampler2D mapLeft;',
-      'uniform sampler2D mapRight;',
-      'varying vec2 vUv;',
+        colorMatrixLeft: { value: this.colorMatrixLeft },
+        colorMatrixRight: { value: this.colorMatrixRight },
+      },
 
-      'uniform mat3 colorMatrixLeft;',
-      'uniform mat3 colorMatrixRight;',
+      vertexShader: [
+        'varying vec2 vUv;',
 
-      // These functions implement sRGB linearization and gamma correction
+        'void main() {',
 
-      'float lin( float c ) {',
-      '	return c <= 0.04045 ? c * 0.0773993808 :',
-      '			pow( c * 0.9478672986 + 0.0521327014, 2.4 );',
-      '}',
+        '	vUv = vec2( uv.x, uv.y );',
+        '	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
 
-      'vec4 lin( vec4 c ) {',
-      '	return vec4( lin( c.r ), lin( c.g ), lin( c.b ), c.a );',
-      '}',
+        '}',
+      ].join('\n'),
 
-      'float dev( float c ) {',
-      '	return c <= 0.0031308 ? c * 12.92',
-      '			: pow( c, 0.41666 ) * 1.055 - 0.055;',
-      '}',
+      fragmentShader: [
+        'uniform sampler2D mapLeft;',
+        'uniform sampler2D mapRight;',
+        'varying vec2 vUv;',
 
-      'void main() {',
+        'uniform mat3 colorMatrixLeft;',
+        'uniform mat3 colorMatrixRight;',
 
-      '	vec2 uv = vUv;',
+        'void main() {',
 
-      '	vec4 colorL = lin( texture2D( mapLeft, uv ) );',
-      '	vec4 colorR = lin( texture2D( mapRight, uv ) );',
+        '	vec2 uv = vUv;',
 
-      '	vec3 color = clamp(',
-      '			colorMatrixLeft * colorL.rgb +',
-      '			colorMatrixRight * colorR.rgb, 0., 1. );',
+        '	vec4 colorL = texture2D( mapLeft, uv );',
+        '	vec4 colorR = texture2D( mapRight, uv );',
 
-      '	gl_FragColor = vec4(',
-      '			dev( color.r ), dev( color.g ), dev( color.b ),',
-      '			max( colorL.a, colorR.a ) );',
+        '	vec3 color = clamp(',
+        '			colorMatrixLeft * colorL.rgb +',
+        '			colorMatrixRight * colorR.rgb, 0., 1. );',
 
-      '}',
-    ].join('\n'),
-  })
+        '	gl_FragColor = vec4(',
+        '			color.r, color.g, color.b,',
+        '			max( colorL.a, colorR.a ) );',
 
-  const _mesh = new Mesh(new PlaneGeometry(2, 2), _material)
-  _scene.add(_mesh)
+        '	#include <tonemapping_fragment>',
+        '	#include <encodings_fragment>',
 
-  this.setSize = (width, height) => {
-    renderer.setSize(width, height)
+        '}',
+      ].join('\n'),
+    })
 
-    const pixelRatio = renderer.getPixelRatio()
+    const _mesh = new Mesh(new PlaneGeometry(2, 2), _material)
+    _scene.add(_mesh)
 
-    _renderTargetL.setSize(width * pixelRatio, height * pixelRatio)
-    _renderTargetR.setSize(width * pixelRatio, height * pixelRatio)
-  }
+    this.setSize = function (width, height) {
+      renderer.setSize(width, height)
 
-  this.render = (scene, camera) => {
-    const currentRenderTarget = renderer.getRenderTarget()
+      const pixelRatio = renderer.getPixelRatio()
 
-    scene.updateMatrixWorld()
+      _renderTargetL.setSize(width * pixelRatio, height * pixelRatio)
+      _renderTargetR.setSize(width * pixelRatio, height * pixelRatio)
+    }
 
-    if (camera.parent === null) camera.updateMatrixWorld()
+    this.render = function (scene, camera) {
+      const currentRenderTarget = renderer.getRenderTarget()
 
-    _stereo.update(camera)
+      if (scene.matrixWorldAutoUpdate === true) scene.updateMatrixWorld()
 
-    renderer.setRenderTarget(_renderTargetL)
-    renderer.clear()
-    renderer.render(scene, _stereo.cameraL)
+      if (camera.parent === null && camera.matrixWorldAutoUpdate === true) camera.updateMatrixWorld()
 
-    renderer.setRenderTarget(_renderTargetR)
-    renderer.clear()
-    renderer.render(scene, _stereo.cameraR)
+      _stereo.update(camera)
 
-    renderer.setRenderTarget(null)
-    renderer.render(_scene, _camera)
+      renderer.setRenderTarget(_renderTargetL)
+      renderer.clear()
+      renderer.render(scene, _stereo.cameraL)
 
-    renderer.setRenderTarget(currentRenderTarget)
-  }
+      renderer.setRenderTarget(_renderTargetR)
+      renderer.clear()
+      renderer.render(scene, _stereo.cameraR)
+
+      renderer.setRenderTarget(null)
+      renderer.render(_scene, _camera)
+
+      renderer.setRenderTarget(currentRenderTarget)
+    }
 
-  this.dispose = () => {
-    if (_renderTargetL) _renderTargetL.dispose()
-    if (_renderTargetR) _renderTargetR.dispose()
-    if (_mesh) _mesh.geometry.dispose()
-    if (_material) _material.dispose()
+    this.dispose = function () {
+      _renderTargetL.dispose()
+      _renderTargetR.dispose()
+      _mesh.geometry.dispose()
+      _mesh.material.dispose()
+    }
   }
 }