webvr js meetup initial commit
This commit is contained in:
Senad Uka
188
node_modules/three/examples/js/cameras/CinematicCamera.js
generated
vendored
Normal file
188
node_modules/three/examples/js/cameras/CinematicCamera.js
generated
vendored
Normal file
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* @author mrdoob / http://mrdoob.com/
|
||||
* @author greggman / http://games.greggman.com/
|
||||
* @author zz85 / http://www.lab4games.net/zz85/blog
|
||||
* @author kaypiKun
|
||||
*/
|
||||
|
||||
THREE.CinematicCamera = function( fov, aspect, near, far ) {
|
||||
|
||||
THREE.PerspectiveCamera.call( this, fov, aspect, near, far );
|
||||
|
||||
this.type = "CinematicCamera";
|
||||
|
||||
this.postprocessing = { enabled : true };
|
||||
this.shaderSettings = {
|
||||
rings: 3,
|
||||
samples: 4
|
||||
};
|
||||
|
||||
this.material_depth = new THREE.MeshDepthMaterial();
|
||||
|
||||
// In case of cinematicCamera, having a default lens set is important
|
||||
this.setLens();
|
||||
|
||||
this.initPostProcessing();
|
||||
|
||||
};
|
||||
|
||||
THREE.CinematicCamera.prototype = Object.create( THREE.PerspectiveCamera.prototype );
|
||||
THREE.CinematicCamera.prototype.constructor = THREE.CinematicCamera;
|
||||
|
||||
|
||||
// providing fnumber and coc(Circle of Confusion) as extra arguments
|
||||
THREE.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;
|
||||
|
||||
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;
|
||||
|
||||
this.fNumber = fNumber;
|
||||
this.coc = coc;
|
||||
|
||||
// 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 );
|
||||
|
||||
};
|
||||
|
||||
THREE.CinematicCamera.prototype.linearize = function ( depth ) {
|
||||
|
||||
var zfar = this.far;
|
||||
var znear = this.near;
|
||||
return - zfar * znear / ( depth * ( zfar - znear ) - zfar );
|
||||
|
||||
};
|
||||
|
||||
THREE.CinematicCamera.prototype.smoothstep = function ( near, far, depth ) {
|
||||
|
||||
var x = this.saturate( ( depth - near ) / ( far - near ) );
|
||||
return x * x * ( 3 - 2 * x );
|
||||
|
||||
};
|
||||
|
||||
THREE.CinematicCamera.prototype.saturate = function ( x ) {
|
||||
|
||||
return Math.max( 0, Math.min( 1, x ) );
|
||||
|
||||
};
|
||||
|
||||
// function for focusing at a distance from the camera
|
||||
THREE.CinematicCamera.prototype.focusAt = function ( focusDistance ) {
|
||||
|
||||
if ( focusDistance === undefined ) focusDistance = 20;
|
||||
|
||||
var focalLength = this.getFocalLength();
|
||||
|
||||
// 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 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;
|
||||
|
||||
// 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.ldistance = this.linearize( 1 - this.sdistance );
|
||||
|
||||
this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = this.ldistance;
|
||||
|
||||
};
|
||||
|
||||
THREE.CinematicCamera.prototype.initPostProcessing = function () {
|
||||
|
||||
if ( this.postprocessing.enabled ) {
|
||||
|
||||
this.postprocessing.scene = new THREE.Scene();
|
||||
|
||||
this.postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
|
||||
|
||||
this.postprocessing.scene.add( this.postprocessing.camera );
|
||||
|
||||
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
|
||||
this.postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
|
||||
this.postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
|
||||
|
||||
var bokeh_shader = THREE.BokehShader;
|
||||
|
||||
this.postprocessing.bokeh_uniforms = THREE.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[ "manualdof" ].value = 0;
|
||||
this.postprocessing.bokeh_uniforms[ "shaderFocus" ].value = 0;
|
||||
|
||||
this.postprocessing.bokeh_uniforms[ "fstop" ].value = 2.8;
|
||||
|
||||
this.postprocessing.bokeh_uniforms[ "showFocus" ].value = 1;
|
||||
|
||||
this.postprocessing.bokeh_uniforms[ "focalDepth" ].value = 0.1;
|
||||
|
||||
//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[ "textureWidth" ].value = window.innerWidth;
|
||||
|
||||
this.postprocessing.bokeh_uniforms[ "textureHeight" ].value = window.innerHeight;
|
||||
|
||||
this.postprocessing.materialBokeh = new THREE.ShaderMaterial( {
|
||||
uniforms: this.postprocessing.bokeh_uniforms,
|
||||
vertexShader: bokeh_shader.vertexShader,
|
||||
fragmentShader: bokeh_shader.fragmentShader,
|
||||
defines: {
|
||||
RINGS: this.shaderSettings.rings,
|
||||
SAMPLES: this.shaderSettings.samples
|
||||
}
|
||||
} );
|
||||
|
||||
this.postprocessing.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight ), this.postprocessing.materialBokeh );
|
||||
this.postprocessing.quad.position.z = - 500;
|
||||
this.postprocessing.scene.add( this.postprocessing.quad );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
THREE.CinematicCamera.prototype.renderCinematic = function ( scene, renderer ) {
|
||||
|
||||
if ( this.postprocessing.enabled ) {
|
||||
|
||||
renderer.clear();
|
||||
|
||||
// Render scene into texture
|
||||
|
||||
scene.overrideMaterial = null;
|
||||
renderer.render( scene, camera, this.postprocessing.rtTextureColor, true );
|
||||
|
||||
// Render depth into texture
|
||||
|
||||
scene.overrideMaterial = this.material_depth;
|
||||
renderer.render( scene, camera, this.postprocessing.rtTextureDepth, true );
|
||||
|
||||
// Render bokeh composite
|
||||
|
||||
renderer.render( this.postprocessing.scene, this.postprocessing.camera );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
230
node_modules/three/examples/js/cameras/CombinedCamera.js
generated
vendored
Normal file
230
node_modules/three/examples/js/cameras/CombinedCamera.js
generated
vendored
Normal file
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* @author zz85 / http://twitter.com/blurspline / http://www.lab4games.net/zz85/blog
|
||||
*
|
||||
* A general perpose camera, for setting FOV, Lens Focal Length,
|
||||
* and switching between perspective and orthographic views easily.
|
||||
* Use this only if you do not wish to manage
|
||||
* both a Orthographic and Perspective Camera
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
THREE.CombinedCamera = function ( width, height, fov, near, far, orthoNear, orthoFar ) {
|
||||
|
||||
THREE.Camera.call( this );
|
||||
|
||||
this.fov = fov;
|
||||
|
||||
this.left = - width / 2;
|
||||
this.right = width / 2;
|
||||
this.top = height / 2;
|
||||
this.bottom = - height / 2;
|
||||
|
||||
// We could also handle the projectionMatrix internally, but just wanted to test nested camera objects
|
||||
|
||||
this.cameraO = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, orthoNear, orthoFar );
|
||||
this.cameraP = new THREE.PerspectiveCamera( fov, width / height, near, far );
|
||||
|
||||
this.zoom = 1;
|
||||
|
||||
this.toPerspective();
|
||||
|
||||
};
|
||||
|
||||
THREE.CombinedCamera.prototype = Object.create( THREE.Camera.prototype );
|
||||
THREE.CombinedCamera.prototype.constructor = THREE.CombinedCamera;
|
||||
|
||||
THREE.CombinedCamera.prototype.toPerspective = function () {
|
||||
|
||||
// Switches to the Perspective Camera
|
||||
|
||||
this.near = this.cameraP.near;
|
||||
this.far = this.cameraP.far;
|
||||
|
||||
this.cameraP.fov = this.fov / this.zoom ;
|
||||
|
||||
this.cameraP.updateProjectionMatrix();
|
||||
|
||||
this.projectionMatrix = this.cameraP.projectionMatrix;
|
||||
|
||||
this.inPerspectiveMode = true;
|
||||
this.inOrthographicMode = false;
|
||||
|
||||
};
|
||||
|
||||
THREE.CombinedCamera.prototype.toOrthographic = function () {
|
||||
|
||||
// Switches to the Orthographic camera estimating viewport from Perspective
|
||||
|
||||
var fov = this.fov;
|
||||
var aspect = this.cameraP.aspect;
|
||||
var near = this.cameraP.near;
|
||||
var far = this.cameraP.far;
|
||||
|
||||
// The size that we set is the mid plane of the viewing frustum
|
||||
|
||||
var hyperfocus = ( near + far ) / 2;
|
||||
|
||||
var halfHeight = Math.tan( fov * Math.PI / 180 / 2 ) * hyperfocus;
|
||||
var halfWidth = halfHeight * aspect;
|
||||
|
||||
halfHeight /= this.zoom;
|
||||
halfWidth /= this.zoom;
|
||||
|
||||
this.cameraO.left = - halfWidth;
|
||||
this.cameraO.right = halfWidth;
|
||||
this.cameraO.top = halfHeight;
|
||||
this.cameraO.bottom = - halfHeight;
|
||||
|
||||
// this.cameraO.left = -farHalfWidth;
|
||||
// this.cameraO.right = farHalfWidth;
|
||||
// this.cameraO.top = farHalfHeight;
|
||||
// this.cameraO.bottom = -farHalfHeight;
|
||||
|
||||
// this.cameraO.left = this.left / this.zoom;
|
||||
// this.cameraO.right = this.right / this.zoom;
|
||||
// this.cameraO.top = this.top / this.zoom;
|
||||
// this.cameraO.bottom = this.bottom / this.zoom;
|
||||
|
||||
this.cameraO.updateProjectionMatrix();
|
||||
|
||||
this.near = this.cameraO.near;
|
||||
this.far = this.cameraO.far;
|
||||
this.projectionMatrix = this.cameraO.projectionMatrix;
|
||||
|
||||
this.inPerspectiveMode = false;
|
||||
this.inOrthographicMode = true;
|
||||
|
||||
};
|
||||
|
||||
|
||||
THREE.CombinedCamera.prototype.setSize = function( width, height ) {
|
||||
|
||||
this.cameraP.aspect = width / height;
|
||||
this.left = - width / 2;
|
||||
this.right = width / 2;
|
||||
this.top = height / 2;
|
||||
this.bottom = - height / 2;
|
||||
|
||||
};
|
||||
|
||||
|
||||
THREE.CombinedCamera.prototype.setFov = function( fov ) {
|
||||
|
||||
this.fov = fov;
|
||||
|
||||
if ( this.inPerspectiveMode ) {
|
||||
|
||||
this.toPerspective();
|
||||
|
||||
} else {
|
||||
|
||||
this.toOrthographic();
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// For maintaining similar API with PerspectiveCamera
|
||||
|
||||
THREE.CombinedCamera.prototype.updateProjectionMatrix = function() {
|
||||
|
||||
if ( this.inPerspectiveMode ) {
|
||||
|
||||
this.toPerspective();
|
||||
|
||||
} else {
|
||||
|
||||
this.toPerspective();
|
||||
this.toOrthographic();
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
* Uses Focal Length (in mm) to estimate and set FOV
|
||||
* 35mm (full frame) camera is used if frame size is not specified;
|
||||
* Formula based on http://www.bobatkins.com/photography/technical/field_of_view.html
|
||||
*/
|
||||
THREE.CombinedCamera.prototype.setLens = function ( focalLength, filmGauge ) {
|
||||
|
||||
if ( filmGauge === undefined ) filmGauge = 35;
|
||||
|
||||
var vExtentSlope = 0.5 * filmGauge /
|
||||
( focalLength * Math.max( this.cameraP.aspect, 1 ) );
|
||||
|
||||
var fov = THREE.Math.RAD2DEG * 2 * Math.atan( vExtentSlope );
|
||||
|
||||
this.setFov( fov );
|
||||
|
||||
return fov;
|
||||
|
||||
};
|
||||
|
||||
|
||||
THREE.CombinedCamera.prototype.setZoom = function( zoom ) {
|
||||
|
||||
this.zoom = zoom;
|
||||
|
||||
if ( this.inPerspectiveMode ) {
|
||||
|
||||
this.toPerspective();
|
||||
|
||||
} else {
|
||||
|
||||
this.toOrthographic();
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
THREE.CombinedCamera.prototype.toFrontView = function() {
|
||||
|
||||
this.rotation.x = 0;
|
||||
this.rotation.y = 0;
|
||||
this.rotation.z = 0;
|
||||
|
||||
// should we be modifing the matrix instead?
|
||||
|
||||
};
|
||||
|
||||
THREE.CombinedCamera.prototype.toBackView = function() {
|
||||
|
||||
this.rotation.x = 0;
|
||||
this.rotation.y = Math.PI;
|
||||
this.rotation.z = 0;
|
||||
|
||||
};
|
||||
|
||||
THREE.CombinedCamera.prototype.toLeftView = function() {
|
||||
|
||||
this.rotation.x = 0;
|
||||
this.rotation.y = - Math.PI / 2;
|
||||
this.rotation.z = 0;
|
||||
|
||||
};
|
||||
|
||||
THREE.CombinedCamera.prototype.toRightView = function() {
|
||||
|
||||
this.rotation.x = 0;
|
||||
this.rotation.y = Math.PI / 2;
|
||||
this.rotation.z = 0;
|
||||
|
||||
};
|
||||
|
||||
THREE.CombinedCamera.prototype.toTopView = function() {
|
||||
|
||||
this.rotation.x = - Math.PI / 2;
|
||||
this.rotation.y = 0;
|
||||
this.rotation.z = 0;
|
||||
|
||||
};
|
||||
|
||||
THREE.CombinedCamera.prototype.toBottomView = function() {
|
||||
|
||||
this.rotation.x = Math.PI / 2;
|
||||
this.rotation.y = 0;
|
||||
this.rotation.z = 0;
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user