Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PerspectiveCamera and CinematicCamera: Convert to ES6 class. #21426

Closed
wants to merge 12 commits into from
Closed

PerspectiveCamera and CinematicCamera: Convert to ES6 class. #21426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ec70f9a
Merge pull request #2 from mrdoob/dev
beginor Feb 26, 2021
9b3fc22
refact to use es6
beginor Mar 4, 2021
96c1af5
refact to es6
beginor Mar 4, 2021
e7922c9
fix build
beginor Mar 4, 2021
42c1ca1
fix lint
beginor Mar 4, 2021
f5de667
fix static methods.
beginor Mar 4, 2021
95752f3
revert EventDispatcher.js since it is converted by someone else
beginor Mar 5, 2021
821810a
revert PropertyBindings.js since it is converted by someone else
beginor Mar 5, 2021
dde4bac
revert Camera.js and PerspectiveCamera.js, since it break the test.
beginor Mar 5, 2021
ec66ffb
PerspectiveCamera: Convert to ES6 class
beginor Mar 7, 2021
12db7bc
move isPerspectiveCamera to prototype and use super.copy and super.to…
beginor Mar 7, 2021
f84f35d
CinematicCamera: Convert to ES6 classe.
beginor Mar 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
246 changes: 123 additions & 123 deletions examples/jsm/cameras/CinematicCamera.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,205 +13,205 @@ import {
import { BokehShader } from '../shaders/BokehShader2.js';
import { BokehDepthShader } from '../shaders/BokehShader2.js';

var CinematicCamera = function ( fov, aspect, near, far ) {
class CinematicCamera extends PerspectiveCamera {

PerspectiveCamera.call( this, fov, aspect, near, far );
constructor( fov, aspect, near, far ) {

this.type = 'CinematicCamera';
super( fov, aspect, near, far );

this.postprocessing = { enabled: true };
this.shaderSettings = {
rings: 3,
samples: 4
};
this.type = 'CinematicCamera';

var depthShader = BokehDepthShader;
this.postprocessing = { enabled: true };
this.shaderSettings = {
rings: 3,
samples: 4
};

this.materialDepth = new ShaderMaterial( {
uniforms: depthShader.uniforms,
vertexShader: depthShader.vertexShader,
fragmentShader: depthShader.fragmentShader
} );
var depthShader = BokehDepthShader;

this.materialDepth.uniforms[ 'mNear' ].value = near;
this.materialDepth.uniforms[ 'mFar' ].value = far;
this.materialDepth = new ShaderMaterial( {
uniforms: depthShader.uniforms,
vertexShader: depthShader.vertexShader,
fragmentShader: depthShader.fragmentShader
} );

// In case of cinematicCamera, having a default lens set is important
this.setLens();
this.materialDepth.uniforms[ 'mNear' ].value = near;
this.materialDepth.uniforms[ 'mFar' ].value = far;

this.initPostProcessing();
// In case of cinematicCamera, having a default lens set is important
this.setLens();

};
this.initPostProcessing();

CinematicCamera.prototype = Object.create( PerspectiveCamera.prototype );
CinematicCamera.prototype.constructor = CinematicCamera;
}

// providing fnumber and coc(Circle of Confusion) as extra arguments
setLens( focalLength, filmGauge, fNumber, coc ) {

// providing fnumber and coc(Circle of Confusion) as extra arguments
CinematicCamera.prototype.setLens = function ( focalLength, filmGauge, fNumber, coc ) {
// In case of cinematicCamera, having a default lens set is important
if ( focalLength === undefined ) focalLength = 35;
if ( filmGauge !== undefined ) this.filmGauge = filmGauge;

// In case of cinematicCamera, having a default lens set is important
if ( focalLength === undefined ) focalLength = 35;
if ( filmGauge !== undefined ) this.filmGauge = filmGauge;
this.setFocalLength( focalLength );

this.setFocalLength( focalLength );
// if fnumber and coc are not provided, cinematicCamera tries to act as a basic PerspectiveCamera
if ( fNumber === undefined ) fNumber = 8;
if ( coc === undefined ) coc = 0.019;

// if fnumber and coc are not provided, cinematicCamera tries to act as a basic PerspectiveCamera
if ( fNumber === undefined ) fNumber = 8;
if ( coc === undefined ) coc = 0.019;
this.fNumber = fNumber;
this.coc = coc;

this.fNumber = fNumber;
this.coc = coc;
// fNumber is focalLength by aperture
this.aperture = focalLength / this.fNumber;

// fNumber is focalLength by aperture
this.aperture = focalLength / this.fNumber;
// hyperFocal is required to calculate depthOfField when a lens tries to focus at a distance with given fNumber and focalLength
this.hyperFocal = ( focalLength * focalLength ) / ( this.aperture * this.coc );

// hyperFocal is required to calculate depthOfField when a lens tries to focus at a distance with given fNumber and focalLength
this.hyperFocal = ( focalLength * focalLength ) / ( this.aperture * this.coc );
}

};
linearize( depth ) {

CinematicCamera.prototype.linearize = function ( depth ) {
var zfar = this.far;
var znear = this.near;
return - zfar * znear / ( depth * ( zfar - znear ) - zfar );

var zfar = this.far;
var znear = this.near;
return - zfar * znear / ( depth * ( zfar - znear ) - zfar );
}

};
smoothstep( near, far, depth ) {

CinematicCamera.prototype.smoothstep = function ( near, far, depth ) {
var x = this.saturate( ( depth - near ) / ( far - near ) );
return x * x * ( 3 - 2 * x );

var x = this.saturate( ( depth - near ) / ( far - near ) );
return x * x * ( 3 - 2 * x );
}

};
saturate( x ) {

CinematicCamera.prototype.saturate = function ( x ) {
return Math.max( 0, Math.min( 1, x ) );

return Math.max( 0, Math.min( 1, x ) );
}

};
// function for focusing at a distance from the camera
focusAt( focusDistance ) {

// function for focusing at a distance from the camera
CinematicCamera.prototype.focusAt = function ( focusDistance ) {
if ( focusDistance === undefined ) focusDistance = 20;

if ( focusDistance === undefined ) focusDistance = 20;
var focalLength = this.getFocalLength();

var focalLength = this.getFocalLength();
// distance from the camera (normal to frustrum) to focus on
this.focus = focusDistance;

// distance from the camera (normal to frustrum) to focus on
this.focus = focusDistance;
// the nearest point from the camera which is in focus (unused)
this.nearPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal + ( this.focus - focalLength ) );

// the nearest point from the camera which is in focus (unused)
this.nearPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal + ( this.focus - focalLength ) );
// the farthest point from the camera which is in focus (unused)
this.farPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal - ( this.focus - focalLength ) );

// the farthest point from the camera which is in focus (unused)
this.farPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal - ( this.focus - focalLength ) );
// the gap or width of the space in which is everything is in focus (unused)
this.depthOfField = this.farPoint - this.nearPoint;

// the gap or width of the space in which is everything is in focus (unused)
this.depthOfField = this.farPoint - this.nearPoint;
// Considering minimum distance of focus for a standard lens (unused)
if ( this.depthOfField < 0 ) this.depthOfField = 0;

// Considering minimum distance of focus for a standard lens (unused)
if ( this.depthOfField < 0 ) this.depthOfField = 0;
this.sdistance = this.smoothstep( this.near, this.far, this.focus );

this.sdistance = this.smoothstep( this.near, this.far, this.focus );
this.ldistance = this.linearize( 1 - this.sdistance );

this.ldistance = this.linearize( 1 - this.sdistance );
this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = this.ldistance;

this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = this.ldistance;
}

};
initPostProcessing() {

CinematicCamera.prototype.initPostProcessing = function () {
if ( this.postprocessing.enabled ) {

if ( this.postprocessing.enabled ) {
this.postprocessing.scene = new Scene();

this.postprocessing.scene = new Scene();
this.postprocessing.camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );

this.postprocessing.camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
this.postprocessing.scene.add( this.postprocessing.camera );

this.postprocessing.scene.add( this.postprocessing.camera );
var pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBFormat };
this.postprocessing.rtTextureDepth = new WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
this.postprocessing.rtTextureColor = new WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );

var pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBFormat };
this.postprocessing.rtTextureDepth = new WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
this.postprocessing.rtTextureColor = new WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
var bokeh_shader = BokehShader;

var bokeh_shader = BokehShader;
this.postprocessing.bokeh_uniforms = UniformsUtils.clone( bokeh_shader.uniforms );

this.postprocessing.bokeh_uniforms = UniformsUtils.clone( bokeh_shader.uniforms );
this.postprocessing.bokeh_uniforms[ 'tColor' ].value = this.postprocessing.rtTextureColor.texture;
this.postprocessing.bokeh_uniforms[ 'tDepth' ].value = this.postprocessing.rtTextureDepth.texture;

this.postprocessing.bokeh_uniforms[ 'tColor' ].value = this.postprocessing.rtTextureColor.texture;
this.postprocessing.bokeh_uniforms[ 'tDepth' ].value = this.postprocessing.rtTextureDepth.texture;
this.postprocessing.bokeh_uniforms[ 'manualdof' ].value = 0;
this.postprocessing.bokeh_uniforms[ 'shaderFocus' ].value = 0;

this.postprocessing.bokeh_uniforms[ 'manualdof' ].value = 0;
this.postprocessing.bokeh_uniforms[ 'shaderFocus' ].value = 0;
this.postprocessing.bokeh_uniforms[ 'fstop' ].value = 2.8;

this.postprocessing.bokeh_uniforms[ 'fstop' ].value = 2.8;
this.postprocessing.bokeh_uniforms[ 'showFocus' ].value = 1;

this.postprocessing.bokeh_uniforms[ 'showFocus' ].value = 1;
this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = 0.1;

this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = 0.1;
//console.log( this.postprocessing.bokeh_uniforms[ "focalDepth" ].value );

//console.log( this.postprocessing.bokeh_uniforms[ "focalDepth" ].value );
this.postprocessing.bokeh_uniforms[ 'znear' ].value = this.near;
this.postprocessing.bokeh_uniforms[ 'zfar' ].value = this.near;

this.postprocessing.bokeh_uniforms[ 'znear' ].value = this.near;
this.postprocessing.bokeh_uniforms[ 'zfar' ].value = this.near;

this.postprocessing.bokeh_uniforms[ 'textureWidth' ].value = window.innerWidth;

this.postprocessing.bokeh_uniforms[ 'textureWidth' ].value = window.innerWidth;
this.postprocessing.bokeh_uniforms[ 'textureHeight' ].value = window.innerHeight;

this.postprocessing.bokeh_uniforms[ 'textureHeight' ].value = window.innerHeight;
this.postprocessing.materialBokeh = new ShaderMaterial( {
uniforms: this.postprocessing.bokeh_uniforms,
vertexShader: bokeh_shader.vertexShader,
fragmentShader: bokeh_shader.fragmentShader,
defines: {
RINGS: this.shaderSettings.rings,
SAMPLES: this.shaderSettings.samples,
DEPTH_PACKING: 1
}
} );

this.postprocessing.materialBokeh = new ShaderMaterial( {
uniforms: this.postprocessing.bokeh_uniforms,
vertexShader: bokeh_shader.vertexShader,
fragmentShader: bokeh_shader.fragmentShader,
defines: {
RINGS: this.shaderSettings.rings,
SAMPLES: this.shaderSettings.samples,
DEPTH_PACKING: 1
}
} );
this.postprocessing.quad = new Mesh( new PlaneGeometry( window.innerWidth, window.innerHeight ), this.postprocessing.materialBokeh );
this.postprocessing.quad.position.z = - 500;
this.postprocessing.scene.add( this.postprocessing.quad );

this.postprocessing.quad = new Mesh( new PlaneGeometry( window.innerWidth, window.innerHeight ), this.postprocessing.materialBokeh );
this.postprocessing.quad.position.z = - 500;
this.postprocessing.scene.add( this.postprocessing.quad );
}

}

};
renderCinematic( scene, renderer ) {

CinematicCamera.prototype.renderCinematic = function ( scene, renderer ) {
if ( this.postprocessing.enabled ) {

if ( this.postprocessing.enabled ) {
var currentRenderTarget = renderer.getRenderTarget();

var currentRenderTarget = renderer.getRenderTarget();
renderer.clear();

renderer.clear();
// Render scene into texture

// Render scene into texture
scene.overrideMaterial = null;
renderer.setRenderTarget( this.postprocessing.rtTextureColor );
renderer.clear();
renderer.render( scene, this );

scene.overrideMaterial = null;
renderer.setRenderTarget( this.postprocessing.rtTextureColor );
renderer.clear();
renderer.render( scene, this );
// Render depth into texture

// Render depth into texture
scene.overrideMaterial = this.materialDepth;
renderer.setRenderTarget( this.postprocessing.rtTextureDepth );
renderer.clear();
renderer.render( scene, this );

scene.overrideMaterial = this.materialDepth;
renderer.setRenderTarget( this.postprocessing.rtTextureDepth );
renderer.clear();
renderer.render( scene, this );
// Render bokeh composite

// Render bokeh composite
renderer.setRenderTarget( null );
renderer.render( this.postprocessing.scene, this.postprocessing.camera );

renderer.setRenderTarget( null );
renderer.render( this.postprocessing.scene, this.postprocessing.camera );
renderer.setRenderTarget( currentRenderTarget );

renderer.setRenderTarget( currentRenderTarget );
}

}

};
}

export { CinematicCamera };
16 changes: 7 additions & 9 deletions src/cameras/ArrayCamera.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import { PerspectiveCamera } from './PerspectiveCamera.js';

function ArrayCamera( array = [] ) {
class ArrayCamera extends PerspectiveCamera {

PerspectiveCamera.call( this );
constructor( array = [] ) {

this.cameras = array;
super();

}

ArrayCamera.prototype = Object.assign( Object.create( PerspectiveCamera.prototype ), {
this.cameras = array;

constructor: ArrayCamera,
}

isArrayCamera: true
}

} );
ArrayCamera.prototype.isArrayCamera = true;


export { ArrayCamera };
Loading