提交 d9e2faf6 编写于 作者: K kaypikun

added CinematicCamera in examples/js/cameras; changed light in...

added CinematicCamera in examples/js/cameras; changed light in webgl_camera_cinematic; removed builds from three.js
上级 2321132b
......@@ -17120,193 +17120,6 @@ THREE.PerspectiveCamera.prototype.toJSON = function ( meta ) {
};
// File:src/cameras/CinematicCamera.js
/**
* @author mrdoob / http://mrdoob.com/
* @author greggman / http://games.greggman.com/
* @author zz85 / http://www.lab4games.net/zz85/blog
* @author kaypiKun
*/
//Inheriting PerspectiveCamera
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, frameHeight, fNumber, coc ) {
//In case of cinematicCamera, having a default lens set is important
if ( focalLength === undefined ) focalLength = 35;
THREE.PerspectiveCamera.prototype.setLens.call( this, focalLength, frameHeight );
//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.focalLength = focalLength;
this.fNumber = fNumber;
this.coc = coc;
//fNumber is focalLength by aperture
this.aperture = this.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 = (this.focalLength*this.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;
//distance from the camera (normal to frustrum) to focus on (unused)
this.focusDistance = focusDistance;
//the nearest point from the camera which is in focus (unused)
this.nearPoint = (this.hyperFocal*this.focusDistance)/(this.hyperFocal+(this.focusDistance-this.focalLength));
//the farthest point from the camera which is in focus (unused)
this.farPoint = (this.hyperFocal*this.focusDistance)/(this.hyperFocal-(this.focusDistance-this.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.focusDistance);
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.camera.position= this.position;
this.postprocessing.camera.rotation= this.rotation;
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;
this.postprocessing.bokeh_uniforms[ "tDepth" ].value = this.postprocessing.rtTextureDepth;
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 );
}
}
// File:src/lights/Light.js
/**
......
......@@ -19,8 +19,7 @@
<script src="js/shaders/BokehShader2.js"></script>
<!--<script src="../src/cameras/PerspectiveCamera.js"></script>-->
<!--<script src="../src/cameras/CinematicCamera.js"></script>-->
<script src="js/cameras/CinematicCamera.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src='js/libs/dat.gui.min.js'></script>
......@@ -56,9 +55,9 @@
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0xffffff, 0.03 ) );
scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );
var light = new THREE.DirectionalLight( 0xffffff, 1 );
var light = new THREE.DirectionalLight( 0xffffff, 0.35 );
light.position.set( 1, 1, 1 ).normalize();
scene.add( light );
......
......@@ -61,7 +61,6 @@
"src/cameras/CubeCamera.js",
"src/cameras/OrthographicCamera.js",
"src/cameras/PerspectiveCamera.js",
"src/cameras/CinematicCamera.js",
"src/lights/Light.js",
"src/lights/LightShadow.js",
"src/lights/AmbientLight.js",
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册