Skip to content

Commit d31e8bb

Browse files
CodyJasonBennettCodyJasonBennett
committed
fix: tree-shake effects
1 parent e9eab93 commit d31e8bb

File tree

7 files changed

+797
-859
lines changed

7 files changed

+797
-859
lines changed

‎src/effects/AnaglyphEffect.js

Lines changed: 97 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -12,154 +12,136 @@ import {
1212
WebGLRenderTarget,
1313
} from 'three'
1414

15-
const AnaglyphEffect = function (renderer, width, height) {
16-
// Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
17-
18-
this.colorMatrixLeft = new Matrix3().fromArray([
19-
0.4561,
20-
-0.0400822,
21-
-0.0152161,
22-
0.500484,
23-
-0.0378246,
24-
-0.0205971,
25-
0.176381,
26-
-0.0157589,
27-
-0.00546856,
28-
])
29-
30-
this.colorMatrixRight = new Matrix3().fromArray([
31-
-0.0434706,
32-
0.378476,
33-
-0.0721527,
34-
-0.0879388,
35-
0.73364,
36-
-0.112961,
37-
-0.00155529,
38-
-0.0184503,
39-
1.2264,
40-
])
41-
42-
const _camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
43-
44-
const _scene = new Scene()
45-
46-
const _stereo = new StereoCamera()
47-
48-
const _params = {
49-
minFilter: LinearFilter,
50-
magFilter: NearestFilter,
51-
format: RGBAFormat,
52-
}
15+
class AnaglyphEffect {
16+
constructor(renderer, width = 512, height = 512) {
17+
// Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
5318

54-
if (width === undefined) width = 512
55-
if (height === undefined) height = 512
19+
this.colorMatrixLeft = new Matrix3().fromArray([
20+
0.4561,
21+
-0.0400822,
22+
-0.0152161,
23+
0.500484,
24+
-0.0378246,
25+
-0.0205971,
26+
0.176381,
27+
-0.0157589,
28+
-0.00546856,
29+
])
5630

57-
const _renderTargetL = new WebGLRenderTarget(width, height, _params)
58-
const _renderTargetR = new WebGLRenderTarget(width, height, _params)
31+
this.colorMatrixRight = new Matrix3().fromArray([
32+
-0.0434706,
33+
0.378476,
34+
-0.0721527,
35+
-0.0879388,
36+
0.73364,
37+
-0.112961,
38+
-0.00155529,
39+
-0.0184503,
40+
1.2264,
41+
])
5942

60-
const _material = new ShaderMaterial({
61-
uniforms: {
62-
mapLeft: { value: _renderTargetL.texture },
63-
mapRight: { value: _renderTargetR.texture },
43+
const _camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
6444

65-
colorMatrixLeft: { value: this.colorMatrixLeft },
66-
colorMatrixRight: { value: this.colorMatrixRight },
67-
},
45+
const _scene = new Scene()
6846

69-
vertexShader: [
70-
'varying vec2 vUv;',
47+
const _stereo = new StereoCamera()
7148

72-
'void main() {',
49+
const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat }
7350

74-
' vUv = vec2( uv.x, uv.y );',
75-
' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
51+
const _renderTargetL = new WebGLRenderTarget(width, height, _params)
52+
const _renderTargetR = new WebGLRenderTarget(width, height, _params)
7653

77-
'}',
78-
].join('\n'),
54+
const _material = new ShaderMaterial({
55+
uniforms: {
56+
mapLeft: { value: _renderTargetL.texture },
57+
mapRight: { value: _renderTargetR.texture },
7958

80-
fragmentShader: [
81-
'uniform sampler2D mapLeft;',
82-
'uniform sampler2D mapRight;',
83-
'varying vec2 vUv;',
59+
colorMatrixLeft: { value: this.colorMatrixLeft },
60+
colorMatrixRight: { value: this.colorMatrixRight },
61+
},
8462

85-
'uniform mat3 colorMatrixLeft;',
86-
'uniform mat3 colorMatrixRight;',
63+
vertexShader: [
64+
'varying vec2 vUv;',
8765

88-
// These functions implement sRGB linearization and gamma correction
66+
'void main() {',
8967

90-
'float lin( float c ) {',
91-
' return c <= 0.04045 ? c * 0.0773993808 :',
92-
' pow( c * 0.9478672986 + 0.0521327014, 2.4 );',
93-
'}',
68+
' vUv = vec2( uv.x, uv.y );',
69+
' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
9470

95-
'vec4 lin( vec4 c ) {',
96-
' return vec4( lin( c.r ), lin( c.g ), lin( c.b ), c.a );',
97-
'}',
71+
'}',
72+
].join('\n'),
9873

99-
'float dev( float c ) {',
100-
' return c <= 0.0031308 ? c * 12.92',
101-
' : pow( c, 0.41666 ) * 1.055 - 0.055;',
102-
'}',
74+
fragmentShader: [
75+
'uniform sampler2D mapLeft;',
76+
'uniform sampler2D mapRight;',
77+
'varying vec2 vUv;',
10378

104-
'void main() {',
79+
'uniform mat3 colorMatrixLeft;',
80+
'uniform mat3 colorMatrixRight;',
10581

106-
' vec2 uv = vUv;',
82+
'void main() {',
10783

108-
' vec4 colorL = lin( texture2D( mapLeft, uv ) );',
109-
' vec4 colorR = lin( texture2D( mapRight, uv ) );',
84+
' vec2 uv = vUv;',
11085

111-
' vec3 color = clamp(',
112-
' colorMatrixLeft * colorL.rgb +',
113-
' colorMatrixRight * colorR.rgb, 0., 1. );',
86+
' vec4 colorL = texture2D( mapLeft, uv );',
87+
' vec4 colorR = texture2D( mapRight, uv );',
11488

115-
' gl_FragColor = vec4(',
116-
' dev( color.r ), dev( color.g ), dev( color.b ),',
117-
' max( colorL.a, colorR.a ) );',
89+
' vec3 color = clamp(',
90+
' colorMatrixLeft * colorL.rgb +',
91+
' colorMatrixRight * colorR.rgb, 0., 1. );',
11892

119-
'}',
120-
].join('\n'),
121-
})
93+
' gl_FragColor = vec4(',
94+
' color.r, color.g, color.b,',
95+
' max( colorL.a, colorR.a ) );',
12296

123-
const _mesh = new Mesh(new PlaneGeometry(2, 2), _material)
124-
_scene.add(_mesh)
97+
' #include <tonemapping_fragment>',
98+
' #include <encodings_fragment>',
12599

126-
this.setSize = (width, height) => {
127-
renderer.setSize(width, height)
100+
'}',
101+
].join('\n'),
102+
})
128103

129-
const pixelRatio = renderer.getPixelRatio()
104+
const _mesh = new Mesh(new PlaneGeometry(2, 2), _material)
105+
_scene.add(_mesh)
130106

131-
_renderTargetL.setSize(width * pixelRatio, height * pixelRatio)
132-
_renderTargetR.setSize(width * pixelRatio, height * pixelRatio)
133-
}
107+
this.setSize = function (width, height) {
108+
renderer.setSize(width, height)
134109

135-
this.render = (scene, camera) => {
136-
const currentRenderTarget = renderer.getRenderTarget()
110+
const pixelRatio = renderer.getPixelRatio()
137111

138-
scene.updateMatrixWorld()
112+
_renderTargetL.setSize(width * pixelRatio, height * pixelRatio)
113+
_renderTargetR.setSize(width * pixelRatio, height * pixelRatio)
114+
}
139115

140-
if (camera.parent === null) camera.updateMatrixWorld()
116+
this.render = function (scene, camera) {
117+
const currentRenderTarget = renderer.getRenderTarget()
141118

142-
_stereo.update(camera)
119+
if (scene.matrixWorldAutoUpdate === true) scene.updateMatrixWorld()
143120

144-
renderer.setRenderTarget(_renderTargetL)
145-
renderer.clear()
146-
renderer.render(scene, _stereo.cameraL)
121+
if (camera.parent === null && camera.matrixWorldAutoUpdate === true) camera.updateMatrixWorld()
147122

148-
renderer.setRenderTarget(_renderTargetR)
149-
renderer.clear()
150-
renderer.render(scene, _stereo.cameraR)
123+
_stereo.update(camera)
151124

152-
renderer.setRenderTarget(null)
153-
renderer.render(_scene, _camera)
125+
renderer.setRenderTarget(_renderTargetL)
126+
renderer.clear()
127+
renderer.render(scene, _stereo.cameraL)
154128

155-
renderer.setRenderTarget(currentRenderTarget)
156-
}
129+
renderer.setRenderTarget(_renderTargetR)
130+
renderer.clear()
131+
renderer.render(scene, _stereo.cameraR)
132+
133+
renderer.setRenderTarget(null)
134+
renderer.render(_scene, _camera)
135+
136+
renderer.setRenderTarget(currentRenderTarget)
137+
}
157138

158-
this.dispose = () => {
159-
if (_renderTargetL) _renderTargetL.dispose()
160-
if (_renderTargetR) _renderTargetR.dispose()
161-
if (_mesh) _mesh.geometry.dispose()
162-
if (_material) _material.dispose()
139+
this.dispose = function () {
140+
_renderTargetL.dispose()
141+
_renderTargetR.dispose()
142+
_mesh.geometry.dispose()
143+
_mesh.material.dispose()
144+
}
163145
}
164146
}
165147

0 commit comments

Comments
 (0)