Skip to content

Commit 5f84432

Browse files
Mugen87Mugen87
authored
Examples: Convert effects to ES6. (#21610)
1 parent ac847a8 commit 5f84432

File tree

13 files changed

+4530
-3679
lines changed

13 files changed

+4530
-3679
lines changed

‎examples/js/effects/AnaglyphEffect.js‎

Lines changed: 66 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,96 @@
11
( function () {
22

3-
var AnaglyphEffect = function ( renderer, width, height ) {
3+
class AnaglyphEffect {
44

5-
// Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
6-
this.colorMatrixLeft = new THREE.Matrix3().fromArray( [ 0.456100, - 0.0400822, - 0.0152161, 0.500484, - 0.0378246, - 0.0205971, 0.176381, - 0.0157589, - 0.00546856 ] );
7-
this.colorMatrixRight = new THREE.Matrix3().fromArray( [ - 0.0434706, 0.378476, - 0.0721527, - 0.0879388, 0.73364, - 0.112961, - 0.00155529, - 0.0184503, 1.2264 ] );
5+
constructor( renderer, width = 512, height = 512 ) {
86

9-
var _camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
7+
// Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
8+
this.colorMatrixLeft = new THREE.Matrix3().fromArray( [ 0.456100, - 0.0400822, - 0.0152161, 0.500484, - 0.0378246, - 0.0205971, 0.176381, - 0.0157589, - 0.00546856 ] );
9+
this.colorMatrixRight = new THREE.Matrix3().fromArray( [ - 0.0434706, 0.378476, - 0.0721527, - 0.0879388, 0.73364, - 0.112961, - 0.00155529, - 0.0184503, 1.2264 ] );
1010

11-
var _scene = new THREE.Scene();
11+
const _camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
1212

13-
var _stereo = new THREE.StereoCamera();
13+
const _scene = new THREE.Scene();
1414

15-
var _params = {
16-
minFilter: THREE.LinearFilter,
17-
magFilter: THREE.NearestFilter,
18-
format: THREE.RGBAFormat
19-
};
20-
if ( width === undefined ) width = 512;
21-
if ( height === undefined ) height = 512;
15+
const _stereo = new THREE.StereoCamera();
2216

23-
var _renderTargetL = new THREE.WebGLRenderTarget( width, height, _params );
17+
const _params = {
18+
minFilter: THREE.LinearFilter,
19+
magFilter: THREE.NearestFilter,
20+
format: THREE.RGBAFormat
21+
};
2422

25-
var _renderTargetR = new THREE.WebGLRenderTarget( width, height, _params );
23+
const _renderTargetL = new THREE.WebGLRenderTarget( width, height, _params );
2624

27-
var _material = new THREE.ShaderMaterial( {
28-
uniforms: {
29-
'mapLeft': {
30-
value: _renderTargetL.texture
31-
},
32-
'mapRight': {
33-
value: _renderTargetR.texture
34-
},
35-
'colorMatrixLeft': {
36-
value: this.colorMatrixLeft
25+
const _renderTargetR = new THREE.WebGLRenderTarget( width, height, _params );
26+
27+
const _material = new THREE.ShaderMaterial( {
28+
uniforms: {
29+
'mapLeft': {
30+
value: _renderTargetL.texture
31+
},
32+
'mapRight': {
33+
value: _renderTargetR.texture
34+
},
35+
'colorMatrixLeft': {
36+
value: this.colorMatrixLeft
37+
},
38+
'colorMatrixRight': {
39+
value: this.colorMatrixRight
40+
}
3741
},
38-
'colorMatrixRight': {
39-
value: this.colorMatrixRight
40-
}
41-
},
42-
vertexShader: [ 'varying vec2 vUv;', 'void main() {', ' vUv = vec2( uv.x, uv.y );', ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
43-
fragmentShader: [ 'uniform sampler2D mapLeft;', 'uniform sampler2D mapRight;', 'varying vec2 vUv;', 'uniform mat3 colorMatrixLeft;', 'uniform mat3 colorMatrixRight;', // These functions implement sRGB linearization and gamma correction
44-
'float lin( float c ) {', ' return c <= 0.04045 ? c * 0.0773993808 :', ' pow( c * 0.9478672986 + 0.0521327014, 2.4 );', '}', 'vec4 lin( vec4 c ) {', ' return vec4( lin( c.r ), lin( c.g ), lin( c.b ), c.a );', '}', 'float dev( float c ) {', ' return c <= 0.0031308 ? c * 12.92', ' : pow( c, 0.41666 ) * 1.055 - 0.055;', '}', 'void main() {', ' vec2 uv = vUv;', ' vec4 colorL = lin( texture2D( mapLeft, uv ) );', ' vec4 colorR = lin( texture2D( mapRight, uv ) );', ' vec3 color = clamp(', ' colorMatrixLeft * colorL.rgb +', ' colorMatrixRight * colorR.rgb, 0., 1. );', ' gl_FragColor = vec4(', ' dev( color.r ), dev( color.g ), dev( color.b ),', ' max( colorL.a, colorR.a ) );', '}' ].join( '\n' )
45-
} );
42+
vertexShader: [ 'varying vec2 vUv;', 'void main() {', ' vUv = vec2( uv.x, uv.y );', ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
43+
fragmentShader: [ 'uniform sampler2D mapLeft;', 'uniform sampler2D mapRight;', 'varying vec2 vUv;', 'uniform mat3 colorMatrixLeft;', 'uniform mat3 colorMatrixRight;', // These functions implement sRGB linearization and gamma correction
44+
'float lin( float c ) {', ' return c <= 0.04045 ? c * 0.0773993808 :', ' pow( c * 0.9478672986 + 0.0521327014, 2.4 );', '}', 'vec4 lin( vec4 c ) {', ' return vec4( lin( c.r ), lin( c.g ), lin( c.b ), c.a );', '}', 'float dev( float c ) {', ' return c <= 0.0031308 ? c * 12.92', ' : pow( c, 0.41666 ) * 1.055 - 0.055;', '}', 'void main() {', ' vec2 uv = vUv;', ' vec4 colorL = lin( texture2D( mapLeft, uv ) );', ' vec4 colorR = lin( texture2D( mapRight, uv ) );', ' vec3 color = clamp(', ' colorMatrixLeft * colorL.rgb +', ' colorMatrixRight * colorR.rgb, 0., 1. );', ' gl_FragColor = vec4(', ' dev( color.r ), dev( color.g ), dev( color.b ),', ' max( colorL.a, colorR.a ) );', '}' ].join( '\n' )
45+
} );
46+
47+
const _mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), _material );
4648

47-
var _mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), _material );
49+
_scene.add( _mesh );
4850

49-
_scene.add( _mesh );
51+
this.setSize = function ( width, height ) {
5052

51-
this.setSize = function ( width, height ) {
53+
renderer.setSize( width, height );
54+
const pixelRatio = renderer.getPixelRatio();
5255

53-
renderer.setSize( width, height );
54-
var pixelRatio = renderer.getPixelRatio();
56+
_renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
5557

56-
_renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
58+
_renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
5759

58-
_renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
60+
};
5961

60-
};
62+
this.render = function ( scene, camera ) {
6163

62-
this.render = function ( scene, camera ) {
64+
const currentRenderTarget = renderer.getRenderTarget();
65+
scene.updateMatrixWorld();
66+
if ( camera.parent === null ) camera.updateMatrixWorld();
6367

64-
var currentRenderTarget = renderer.getRenderTarget();
65-
scene.updateMatrixWorld();
66-
if ( camera.parent === null ) camera.updateMatrixWorld();
68+
_stereo.update( camera );
6769

68-
_stereo.update( camera );
70+
renderer.setRenderTarget( _renderTargetL );
71+
renderer.clear();
72+
renderer.render( scene, _stereo.cameraL );
73+
renderer.setRenderTarget( _renderTargetR );
74+
renderer.clear();
75+
renderer.render( scene, _stereo.cameraR );
76+
renderer.setRenderTarget( null );
77+
renderer.render( _scene, _camera );
78+
renderer.setRenderTarget( currentRenderTarget );
6979

70-
renderer.setRenderTarget( _renderTargetL );
71-
renderer.clear();
72-
renderer.render( scene, _stereo.cameraL );
73-
renderer.setRenderTarget( _renderTargetR );
74-
renderer.clear();
75-
renderer.render( scene, _stereo.cameraR );
76-
renderer.setRenderTarget( null );
77-
renderer.render( _scene, _camera );
78-
renderer.setRenderTarget( currentRenderTarget );
80+
};
7981

80-
};
82+
this.dispose = function () {
8183

82-
this.dispose = function () {
84+
if ( _renderTargetL ) _renderTargetL.dispose();
85+
if ( _renderTargetR ) _renderTargetR.dispose();
86+
if ( _mesh ) _mesh.geometry.dispose();
87+
if ( _material ) _material.dispose();
8388

84-
if ( _renderTargetL ) _renderTargetL.dispose();
85-
if ( _renderTargetR ) _renderTargetR.dispose();
86-
if ( _mesh ) _mesh.geometry.dispose();
87-
if ( _material ) _material.dispose();
89+
};
8890

89-
};
91+
}
9092

91-
};
93+
}
9294

9395
THREE.AnaglyphEffect = AnaglyphEffect;
9496

0 commit comments

Comments
 (0)