Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 29a54796 编写于 作者: Z zz85
浏览文件
操作

Merge remote-tracking branch 'alteredq/dev' into experimental

上级 a15e0776 aac91430
展开全部 隐藏空白更改
内联 并排
Showing with 6085 addition and 3865 deletion
README.md
浏览文件 @ 29a54796
此差异已折叠。
build/Three.js
浏览文件 @ 29a54796
此差异已折叠。
build/custom/ThreeCanvas.js
浏览文件 @ 29a54796
此差异已折叠。
build/custom/ThreeDOM.js
浏览文件 @ 29a54796
此差异已折叠。
build/custom/ThreeExtras.js
浏览文件 @ 29a54796
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
build/custom/ThreeSVG.js
浏览文件 @ 29a54796
此差异已折叠。
build/custom/ThreeWebGL.js
浏览文件 @ 29a54796
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
examples/js/ShaderExtras.js
浏览文件 @ 29a54796
此差异已折叠。
examples/js/postprocessing/BloomPass.js
浏览文件 @ 29a54796
......@@ -18,7 +18,7 @@ THREE.BloomPass = function( strength, kernelSize, sigma, resolution ) {
// screen material
var screenShader = THREE.ShaderUtils.lib[ "screen" ];
var screenShader = THREE.ShaderExtras[ "screen" ];
this.screenUniforms = THREE.UniformsUtils.clone( screenShader.uniforms );
......@@ -36,12 +36,12 @@ THREE.BloomPass = function( strength, kernelSize, sigma, resolution ) {
// convolution material
var convolutionShader = THREE.ShaderUtils.lib[ "convolution" ];
var convolutionShader = THREE.ShaderExtras[ "convolution" ];
this.convolutionUniforms = THREE.UniformsUtils.clone( convolutionShader.uniforms );
this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurx;
this.convolutionUniforms[ "cKernel" ].value = THREE.ShaderUtils.buildKernel( sigma );
this.convolutionUniforms[ "cKernel" ].value = THREE.ShaderExtras.buildKernel( sigma );
this.materialConvolution = new THREE.MeshShaderMaterial( {
......@@ -51,17 +51,21 @@ THREE.BloomPass = function( strength, kernelSize, sigma, resolution ) {
} );
this.needsSwap = false;
};
THREE.BloomPass.prototype = {
render: function ( renderer, renderTarget, delta ) {
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST );
// Render quad with blured scene into texture (convolution pass 1)
THREE.EffectComposer.quad.materials[ 0 ] = this.materialConvolution;
this.convolutionUniforms[ "tDiffuse" ].texture = renderTarget;
this.convolutionUniforms[ "tDiffuse" ].texture = readBuffer;
this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX;
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, this.renderTargetX, true );
......@@ -79,7 +83,9 @@ THREE.BloomPass.prototype = {
this.screenUniforms[ "tDiffuse" ].texture = this.renderTargetY;
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, renderTarget, false );
if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, readBuffer, false );
}
......
examples/js/postprocessing/DotScreenPass.js
浏览文件 @ 29a54796
......@@ -4,7 +4,7 @@
THREE.DotScreenPass = function( center, angle, scale ) {
var shader = THREE.ShaderUtils.lib[ "dotscreen" ];
var shader = THREE.ShaderExtras[ "dotscreen" ];
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
......@@ -23,15 +23,16 @@ THREE.DotScreenPass = function( center, angle, scale ) {
} );
this.renderToScreen = false;
this.needsSwap = true;
};
THREE.DotScreenPass.prototype = {
render: function ( renderer, renderTarget, delta ) {
render: function ( renderer, writeBuffer, readBuffer, delta ) {
this.uniforms[ "tDiffuse" ].texture = renderTarget;
this.uniforms[ "tSize" ].value.set( renderTarget.width, renderTarget.height );
this.uniforms[ "tDiffuse" ].texture = readBuffer;
this.uniforms[ "tSize" ].value.set( readBuffer.width, readBuffer.height );
THREE.EffectComposer.quad.materials[ 0 ] = this.material;
......@@ -41,7 +42,7 @@ THREE.DotScreenPass.prototype = {
} else {
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, renderTarget, false );
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, writeBuffer, false );
}
......
examples/js/postprocessing/EffectComposer.js
浏览文件 @ 29a54796
......@@ -5,21 +5,37 @@
THREE.EffectComposer = function( renderer, renderTarget ) {
this.renderer = renderer;
this.renderTarget = renderTarget;
if ( this.renderTarget === undefined ) {
this.renderTarget1 = renderTarget;
if ( this.renderTarget1 === undefined ) {
this.renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBufer: false };
this.renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, this.renderTargetParameters );
this.renderTarget1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, this.renderTargetParameters );
}
this.renderTarget2 = this.renderTarget1.clone();
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
this.passes = [];
this.copyPass = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
};
THREE.EffectComposer.prototype = {
swapBuffers: function() {
var tmp = this.readBuffer;
this.readBuffer = this.writeBuffer;
this.writeBuffer = tmp;
},
addPass: function ( pass ) {
this.passes.push( pass );
......@@ -28,24 +44,66 @@ THREE.EffectComposer.prototype = {
render: function ( delta ) {
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
var maskActive = false;
var i, il = this.passes.length;
for ( i = 0; i < il; i ++ ) {
this.passes[ i ].render( this.renderer, this.renderTarget, delta );
this.passes[ i ].render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );
if ( this.passes[ i ].needsSwap ) {
if ( maskActive ) {
var context = this.renderer.context;
context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );
context.stencilFunc( context.EQUAL, 1, 0xffffffff );
}
this.swapBuffers();
}
if ( this.passes[ i ] instanceof THREE.MaskPass ) {
maskActive = true;
}
if ( this.passes[ i ] instanceof THREE.ClearMaskPass ) {
maskActive = false;
}
}
},
reset: function () {
reset: function ( renderTarget ) {
this.renderTarget1 = renderTarget;
if ( this.renderTargetParameters ) {
if ( this.renderTarget1 === undefined ) {
this.renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, this.renderTargetParameters );
this.renderTarget1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, this.renderTargetParameters );
}
this.renderTarget2 = this.renderTarget1.clone();
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
THREE.EffectComposer.quad.scale.set( window.innerWidth, window.innerHeight, 1 );
THREE.EffectComposer.camera.left = window.innerWidth / - 2;
......@@ -55,7 +113,6 @@ THREE.EffectComposer.prototype = {
THREE.EffectComposer.camera.updateProjectionMatrix();
}
};
......
examples/js/postprocessing/FilmPass.js
浏览文件 @ 29a54796
......@@ -4,7 +4,7 @@
THREE.FilmPass = function( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {
var shader = THREE.ShaderUtils.lib[ "film" ];
var shader = THREE.ShaderExtras[ "film" ];
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
......@@ -22,14 +22,15 @@ THREE.FilmPass = function( noiseIntensity, scanlinesIntensity, scanlinesCount, g
if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
this.renderToScreen = false;
this.needsSwap = true;
};
THREE.FilmPass.prototype = {
render: function ( renderer, renderTarget, delta ) {
render: function ( renderer, writeBuffer, readBuffer, delta ) {
this.uniforms[ "tDiffuse" ].texture = renderTarget;
this.uniforms[ "tDiffuse" ].texture = readBuffer;
this.uniforms[ "time" ].value += delta;
THREE.EffectComposer.quad.materials[ 0 ] = this.material;
......@@ -40,7 +41,7 @@ THREE.FilmPass.prototype = {
} else {
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, renderTarget, false );
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, writeBuffer, false );
}
......
examples/js/postprocessing/MaskPass.js 0 → 100644
浏览文件 @ 29a54796
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.MaskPass = function ( scene, camera ) {
this.scene = scene;
this.camera = camera;
this.clear = true;
this.needsSwap = false;
};
THREE.MaskPass.prototype = {
render: function ( renderer, writeBuffer, readBuffer, delta ) {
var context = renderer.context;
// don't update color or depth
context.colorMask( false, false, false, false );
context.depthMask( false );
// set up stencil
context.enable( context.STENCIL_TEST );
context.stencilOp( context.REPLACE, context.REPLACE, context.REPLACE );
context.stencilFunc( context.ALWAYS, 1, 0xffffffff );
// draw into the stencil buffer
renderer.render( this.scene, this.camera, readBuffer, this.clear );
renderer.render( this.scene, this.camera, writeBuffer, this.clear );
// re-enable update of color and depth
context.colorMask( true, true, true, true );
context.depthMask( true );
// only render where stencil is set to 1
context.stencilFunc( context.EQUAL, 1, 0xffffffff ); // draw if == 1
context.stencilOp( context.KEEP, context.KEEP, context.KEEP );
}
};
THREE.ClearMaskPass = function () {
};
THREE.ClearMaskPass.prototype = {
render: function ( renderer, writeBuffer, readBuffer, delta ) {
var context = renderer.context;
context.disable( context.STENCIL_TEST );
}
};
examples/js/postprocessing/RenderPass.js
浏览文件 @ 29a54796
......@@ -2,20 +2,26 @@
* @author alteredq / http://alteredqualia.com/
*/
THREE.RenderPass = function ( scene, camera ) {
THREE.RenderPass = function ( scene, camera, overrideMaterial ) {
this.scene = scene;
this.camera = camera;
this.overrideMaterial = overrideMaterial;
this.clear = true;
this.needsSwap = false;
};
THREE.RenderPass.prototype = {
render: function ( renderer, renderTarget, delta ) {
render: function ( renderer, writeBuffer, readBuffer, delta ) {
renderer.render( this.scene, this.camera, renderTarget, this.clear );
this.scene.overrideMaterial = this.overrideMaterial;
renderer.render( this.scene, this.camera, readBuffer, this.clear );
this.scene.overrideMaterial = null;
}
......
examples/js/postprocessing/SepiaPass.js → examples/js/postprocessing/ShaderPass.js
浏览文件 @ 29a54796
......@@ -2,12 +2,11 @@
* @author alteredq / http://alteredqualia.com/
*/
THREE.SepiaPass = function( amount ) {
THREE.ShaderPass = function( shader, textureID ) {
var shader = THREE.ShaderUtils.lib[ "sepia" ];
this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
this.uniforms[ "amount" ].value = ( amount !== undefined ) ? amount : 1.0;
this.material = new THREE.MeshShaderMaterial( {
......@@ -18,14 +17,15 @@ THREE.SepiaPass = function( amount ) {
} );
this.renderToScreen = false;
this.needsSwap = true;
};
THREE.SepiaPass.prototype = {
THREE.ShaderPass.prototype = {
render: function ( renderer, renderTarget, delta ) {
render: function ( renderer, writeBuffer, readBuffer, delta ) {
this.uniforms[ "tDiffuse" ].texture = renderTarget;
this.uniforms[ this.textureID ].texture = readBuffer;
THREE.EffectComposer.quad.materials[ 0 ] = this.material;
......@@ -35,7 +35,7 @@ THREE.SepiaPass.prototype = {
} else {
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, renderTarget, false );
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, writeBuffer, false );
}
......
examples/js/postprocessing/ScreenPass.js → examples/js/postprocessing/TexturePass.js
浏览文件 @ 29a54796
......@@ -2,12 +2,14 @@
* @author alteredq / http://alteredqualia.com/
*/
THREE.ScreenPass = function( opacity ) {
THREE.TexturePass = function( texture, opacity ) {
var shader = THREE.ShaderUtils.lib[ "screen" ];
var shader = THREE.ShaderExtras[ "screen" ];
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
this.uniforms[ "opacity" ].value = ( opacity !== undefined ) ? opacity : 1.0;
this.uniforms[ "tDiffuse" ].texture = texture;
this.material = new THREE.MeshShaderMaterial( {
......@@ -17,17 +19,17 @@ THREE.ScreenPass = function( opacity ) {
} );
};
this.needsSwap = false;
THREE.ScreenPass.prototype = {
};
render: function ( renderer, renderTarget, delta ) {
THREE.TexturePass.prototype = {
this.uniforms[ "tDiffuse" ].texture = renderTarget;
render: function ( renderer, writeBuffer, readBuffer, delta ) {
THREE.EffectComposer.quad.materials[ 0 ] = this.material;
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera );
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, readBuffer );
}
......
examples/js/postprocessing/VignettePass.js 已删除 100644 → 0
浏览文件 @ a15e0776
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.VignettePass = function( offset, darkness ) {
var shader = THREE.ShaderUtils.lib[ "vignette" ];
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
if ( offset !== undefined ) this.uniforms[ "offset"].value = offset;
if ( darkness !== undefined ) this.uniforms[ "darkness"].value = darkness;
this.material = new THREE.MeshShaderMaterial( {
uniforms: this.uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
} );
this.renderToScreen = false;
};
THREE.VignettePass.prototype = {
render: function ( renderer, renderTarget, delta ) {
this.uniforms[ "tDiffuse" ].texture = renderTarget;
THREE.EffectComposer.quad.materials[ 0 ] = this.material;
if ( this.renderToScreen ) {
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera );
} else {
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, renderTarget, false );
}
}
};
examples/webgl_collada.html
浏览文件 @ 29a54796
......@@ -21,7 +21,6 @@
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="../src/extras/loaders/ColladaLoader.js"></script>
<script type="text/javascript">
......
examples/webgl_flycamera_earth.html
浏览文件 @ 29a54796
......@@ -33,7 +33,11 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/FilmPass.js"></script>
......
examples/webgl_geometry_text.html
浏览文件 @ 29a54796
......@@ -41,6 +41,15 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
<script type="text/javascript" src="js/postprocessing/FilmPass.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
......@@ -68,6 +77,8 @@
var camera, scene, renderer;
var composer;
var textMesh1, textMesh2, textGeo, faceMaterial, textMaterialFront, textMaterialSide, parent;
var firstLetter = true;
......@@ -148,11 +159,15 @@
permalink = document.getElementById( "permalink" );
// CAMERA
camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
camera.position.y = 400;
camera.position.z = 700;
camera.target.position.y = 100;
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
......@@ -222,6 +237,8 @@
plane.position.y = 100;
scene.addChild( plane );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
......@@ -229,11 +246,15 @@
container.appendChild( renderer.domElement );
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
//container.appendChild( stats.domElement );
// EVENTS
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
......@@ -315,9 +336,23 @@
}, false );
initPostprocessing();
// POSTPROCESSING
renderer.autoClear = false;
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 0.25 );
var effectFilm = new THREE.FilmPass( 0.5, 0.125, 2048, false );
effectFilm.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectFilm );
}
//
......@@ -561,76 +596,6 @@
//
function initPostprocessing() {
postprocessing.scene = new THREE.Scene();
postprocessing.camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
postprocessing.camera.position.z = 100;
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
postprocessing.rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
postprocessing.rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
postprocessing.rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
var screen_shader = THREE.ShaderUtils.lib["screen"];
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
screen_uniforms["opacity"].value = 1.0;
postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertexShader: screen_shader.vertexShader,
fragmentShader: screen_shader.fragmentShader,
blending: THREE.AdditiveBlending,
transparent: true
} );
var convolution_shader = THREE.ShaderUtils.lib["convolution"];
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
postprocessing.blury = new THREE.Vector2( 0.0, 0.001953125 );
convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
uniforms: convolution_uniforms,
vertexShader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
fragmentShader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragmentShader
} );
var film_shader = THREE.ShaderUtils.lib["film"];
var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
film_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
postprocessing.materialFilm = new THREE.MeshShaderMaterial( { uniforms: film_uniforms, vertexShader: film_shader.vertexShader, fragmentShader: film_shader.fragmentShader } );
postprocessing.materialFilm.uniforms.grayscale.value = 0;
postprocessing.materialFilm.uniforms.nIntensity.value = 0.15;
postprocessing.materialFilm.uniforms.sIntensity.value = 0.25;
postprocessing.materialFilm.uniforms.sCount.value = 2048;
//postprocessing.materialFilm.uniforms.nIntensity.value = 0;
//postprocessing.materialFilm.uniforms.sIntensity.value = 0;
postprocessing.materialScreen.uniforms.opacity.value = glow;
postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
postprocessing.quad.position.z = - 500;
postprocessing.scene.addObject( postprocessing.quad );
}
//
function animate() {
requestAnimationFrame( animate );
......@@ -652,49 +617,14 @@
parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
if ( postprocessing.enabled ) {
renderer.clear();
// Render scene into texture
renderer.clear();
renderer.render( scene, camera, postprocessing.rtTexture1, true );
// Render quad with blured scene into texture (convolution pass 1)
postprocessing.quad.materials[ 0 ] = postprocessing.materialConvolution;
postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture2, true );
// Render quad with blured scene into texture (convolution pass 2)
postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture2;
postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blury;
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture3, true );
// Render original scene with superimposed blur to texture
postprocessing.quad.materials[ 0 ] = postprocessing.materialScreen;
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
// Render to screen
postprocessing.materialFilm.uniforms.time.value += 0.01;
postprocessing.quad.materials[ 0 ] = postprocessing.materialFilm;
if ( postprocessing.enabled ) {
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
renderer.render( postprocessing.scene, postprocessing.camera );
composer.render( 0.05 );
} else {
renderer.clear();
renderer.render( scene, camera );
}
......
examples/webgl_interactive_draggablecubes.html 0 → 100644
浏览文件 @ 29a54796
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js webgl - draggable cubes</title>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var container, stats;
var camera, scene, projector, renderer;
var objects = [], plane;
var mouse = new THREE.Vector2(),
offset = new THREE.Vector3(),
INTERSECTED, SELECTED;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - draggable cubes';
container.appendChild( info );
camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.z = 1000;
scene = new THREE.Scene();
var light = new THREE.SpotLight( 0xffffff, 2 );
light.position.set( 0, 500, 2000 );
light.castShadow = true;
scene.addLight( light );
var geometry = new THREE.CubeGeometry( 40, 40, 40 );
for ( var i = 0; i < 200; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
object.position.x = Math.random() * 1000 - 500;
object.position.y = Math.random() * 600 - 300;
object.position.z = Math.random() * 800 - 400;
object.rotation.x = ( Math.random() * 360 ) * Math.PI / 180;
object.rotation.y = ( Math.random() * 360 ) * Math.PI / 180;
object.rotation.z = ( Math.random() * 360 ) * Math.PI / 180;
object.scale.x = Math.random() * 2 + 1;
object.scale.y = Math.random() * 2 + 1;
object.scale.z = Math.random() * 2 + 1;
object.castShadow = true;
object.receiveShadow = true;
scene.addObject( object );
objects.push( object );
}
plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.5, wireframe: true } ) );
plane.visible = false;
scene.addObject( plane );
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.sortObjects = false;
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowCameraNear = 3;
renderer.shadowCameraFar = camera.far;
renderer.shadowCameraFov = 30;
renderer.shadowMapBias = 0.00389;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
}
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
//
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
if ( SELECTED ) {
var intersects = ray.intersectObject( plane );
SELECTED.position.copy( intersects[ 0 ].point.subSelf( offset ) );
return;
}
var intersects = ray.intersectObjects( objects );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
if ( INTERSECTED ) INTERSECTED.materials[ 0 ].color.setHex( INTERSECTED.currentHex );
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentHex = INTERSECTED.materials[ 0 ].color.getHex();
plane.position.copy( INTERSECTED.position );
}
container.style.cursor = 'pointer';
} else {
if ( INTERSECTED ) INTERSECTED.materials[ 0 ].color.setHex( INTERSECTED.currentHex );
INTERSECTED = null;
container.style.cursor = 'auto';
}
}
function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( objects );
if ( intersects.length > 0 ) {
SELECTED = intersects[ 0 ].object;
var intersects = ray.intersectObject( plane );
offset.copy( intersects[ 0 ].point ).subSelf( plane.position );
container.style.cursor = 'move';
}
}
function onDocumentMouseUp( event ) {
event.preventDefault();
plane.position.copy( INTERSECTED.position );
SELECTED = null;
container.style.cursor = 'auto';
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
examples/webgl_lines_colors.html
浏览文件 @ 29a54796
......@@ -45,9 +45,12 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ScreenPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
......@@ -153,7 +156,9 @@
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 1.3 );
var effectScreen = new THREE.ScreenPass();
var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
effectScreen.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
......
examples/webgl_lines_splines.html
浏览文件 @ 29a54796
......@@ -53,8 +53,6 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var postprocessing = false;
var mouseX = 0, mouseY = 0,
windowHalfX = window.innerWidth / 2,
......@@ -62,8 +60,6 @@
camera, scene, renderer, material;
var cameraOrtho, sceneScreen, rtTexture1, rtTexture2, rtTexture3, materialScreen, materialConvolution, blurx, blury, quadScreen;
init();
animate();
......@@ -81,7 +77,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
container.appendChild( renderer.domElement );
var geometry = new THREE.Geometry(),
......@@ -93,14 +89,14 @@
n_sub = 6;
var position, index;
var spline = new THREE.Spline( points );
for ( i = 0; i < points.length * n_sub; i ++ ) {
index = i / ( points.length * n_sub );
position = spline.getPoint( index );
geometry.vertices[ i ] = new THREE.Vertex( new THREE.Vector3( position.x, position.y, position.z ) );
colors[ i ] = new THREE.Color( 0xffffff );
......@@ -112,8 +108,8 @@
colors3[ i ] = new THREE.Color( 0xffffff );
colors3[ i ].setHSV( i / ( points.length * n_sub ), 1.0, 1.0 );
}
geometry2.vertices = geometry3.vertices = geometry.vertices;
......@@ -133,7 +129,7 @@
material.vertexColors = true;
for ( i = 0; i < parameters.length; ++i ) {
for ( i = 0; i < parameters.length; ++ i ) {
p = parameters[ i ];
line = new THREE.Line( p[ 3 ], p[ 0 ] );
......@@ -145,57 +141,6 @@
}
// postprocessing
cameraOrtho = new THREE.Camera();
cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
cameraOrtho.position.z = 100;
sceneScreen = new THREE.Scene();
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter };
rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
var screen_shader = THREE.ShaderUtils.lib["screen"];
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
screen_uniforms["tDiffuse"].texture = rtTexture1;
screen_uniforms["opacity"].value = 1.0;
materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertexShader: screen_shader.vertexShader,
fragmentShader: screen_shader.fragmentShader,
blending: THREE.AdditiveBlending
} );
var convolution_shader = THREE.ShaderUtils.lib["convolution"];
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
blurx = new THREE.Vector2( 0.001953125, 0.0 ),
blury = new THREE.Vector2( 0.0, 0.001953125 );
convolution_uniforms["tDiffuse"].texture = rtTexture1;
convolution_uniforms["uImageIncrement"].value = blurx;
convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
materialConvolution = new THREE.MeshShaderMaterial( {
uniforms: convolution_uniforms,
vertexShader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
fragmentShader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragmentShader
} );
var plane = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight );
quadScreen = new THREE.Mesh( plane, materialConvolution );
quadScreen.position.z = -100;
sceneScreen.addObject( quadScreen );
stats = new Stats();
stats.domElement.style.position = 'absolute';
......@@ -249,6 +194,7 @@
}
return vec;
}
//
......@@ -279,6 +225,7 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
......@@ -294,60 +241,16 @@
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
camera.updateMatrix();
var time = new Date().getTime() * 0.0005;
for( var i = 0; i<scene.objects.length; i++ ) {
scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
}
renderer.clear();
if ( postprocessing ) {
// Render scene into texture
renderer.render( scene, camera, rtTexture1 );
// Render quad with blured scene into texture (convolution pass 1)
quadScreen.materials = [ materialConvolution ];
materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
materialConvolution.uniforms.uImageIncrement.value = blurx;
renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
// Render quad with blured scene into texture (convolution pass 2)
materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
materialConvolution.uniforms.uImageIncrement.value = blury;
renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
// Render original scene with superimposed blur to texture
quadScreen.materials = [ materialScreen ];
materialScreen.uniforms.tDiffuse.texture = rtTexture3;
materialScreen.uniforms.opacity.value = 1.3;
renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
// Render to screen
materialScreen.uniforms.tDiffuse.texture = rtTexture1;
renderer.render( sceneScreen, cameraOrtho );
for( var i = 0; i < scene.objects.length; i ++ ) {
} else {
renderer.render( scene, camera );
scene.objects[ i ].rotation.y = time * ( i % 2 ? 1 : -1);
}
renderer.render( scene, camera );
}
......
examples/webgl_materials.html
浏览文件 @ 29a54796
......@@ -75,7 +75,7 @@
materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ) );
materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ) );
materials.push( new THREE.MeshNormalMaterial( ) );
materials.push( new THREE.MeshBasicMaterial( { color: 0x665500, blending: THREE.AdditiveBlending } ) );
materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, transparent: true, blending: THREE.AdditiveBlending } ) );
//materials.push( new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ) );
materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.SmoothShading } ) );
......
examples/webgl_materials_shaders.html
浏览文件 @ 29a54796
......@@ -16,7 +16,6 @@
h1 { }
a { color:skyblue }
canvas { pointer-events:none; z-index:10; }
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
#d { text-align:center; margin:1em 0 -19.7em 0; z-index:0; position:relative; display:block }
.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
.inactive { background:#999; color:#eee }
......@@ -39,8 +38,6 @@
<p>Blinn-Phong shader only works in WebGL, canvas has only diffuse materials.
</div>
<pre id="log"></pre>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
......@@ -69,8 +66,8 @@
var render_canvas = 1, render_gl = 1;
var has_gl = 0;
var bcanvas = document.getElementById("rcanvas");
var bwebgl = document.getElementById("rwebgl");
var bcanvas = document.getElementById( "rcanvas" );
var bwebgl = document.getElementById( "rwebgl" );
init();
animate();
......@@ -82,16 +79,14 @@
function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
mesh = new THREE.Mesh( geometry, material );
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
mesh.rotation.x = rx;
mesh.rotation.y = ry;
mesh.rotation.z = rz;
mesh.scale.set( scale, scale, scale );
mesh.position.set( x, y, z );
mesh.rotation.set( rx, ry, rz );
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
scene.addObject( mesh );
}
......@@ -112,28 +107,24 @@
scene.addLight( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 2;
directionalLight.position.set( 1, 1, 2 );
directionalLight.position.normalize();
scene.addLight( directionalLight );
pointLight = new THREE.PointLight( 0xffffff );
pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 0;
scene.addLight( pointLight );
// light representation
sphere = new THREE.SphereGeometry( 100, 16, 8 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
lightMesh.scale.set( 0.05, 0.05, 0.05 );
lightMesh.position = pointLight.position;
lightMesh.overdraw = true;
lightMesh.updateMatrix();
scene.addObject( lightMesh );
// material samples
sphere = new THREE.SphereGeometry( 100, 32, 32 );
var y1 = 0, y2 = - 200;
......@@ -159,16 +150,22 @@
addMesh( sphere, 1, 600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x5500ff, specular: 0x555555, shininess: 30 } ) );
addMesh( sphere, 1, 600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x5500ff } ) );
addToruses( new THREE.TorusGeometry( 100, 20, 32, 32 ) );
//
if ( render_gl ) {
try {
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
webglRenderer.domElement.style.position = "relative";
container.appendChild( webglRenderer.domElement );
has_gl = 1;
}
catch (e) {
} catch (e) {
}
}
......@@ -181,6 +178,7 @@
}
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
......@@ -191,27 +189,21 @@
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
var loader = new THREE.JSONLoader();
loader.load( { model: "obj/torus/Torus_slim.js", callback: function( geometry ) { createScene( geometry ) } } );
//var loader = new THREE.BinaryLoader();
//loader.load( { model: "obj/torus/Torus_bin.js", callback: function( geometry ) { createScene( geometry ) } } );
document.addEventListener('mousemove', onDocumentMouseMove, false);
}
function createScene( geometry ) {
function addToruses( geometry ) {
var s = 80, t = s + 20, y = 200;
var s = 0.85, t = s + 100, y = 200, rx = 0;
addMesh( geometry, s, -6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x000000, specular: 0x333333, shininess: 10 } ) );
addMesh( geometry, s, -4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x888888, specular: 0x333333, shininess: 10 } ) );
addMesh( geometry, s, -2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xff5500, shininess: 10 } ) );
addMesh( geometry, s, 0, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xffaa00, shininess: 10 } ) );
addMesh( geometry, s, 2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x55ff00, shininess: 10 } ) );
addMesh( geometry, s, 4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x0055ff, shininess: 10 } ) );
addMesh( geometry, s, 6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x5500ff, shininess: 10 } ) );
addMesh( geometry, s, -6*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x000000, specular: 0x333333, shininess: 10 } ) );
addMesh( geometry, s, -4*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x888888, specular: 0x333333, shininess: 10 } ) );
addMesh( geometry, s, -2*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xff5500, shininess: 10 } ) );
addMesh( geometry, s, 0, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xffaa00, shininess: 10 } ) );
addMesh( geometry, s, 2*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x55ff00, shininess: 10 } ) );
addMesh( geometry, s, 4*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x0055ff, shininess: 10 } ) );
addMesh( geometry, s, 6*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x5500ff, shininess: 10 } ) );
}
......@@ -240,24 +232,15 @@
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
lightMesh.position.x = 700*Math.cos( timer );
lightMesh.position.z = 700*Math.sin( timer );
lightMesh.updateMatrix();
lightMesh.position.x = 700 * Math.cos( timer );
lightMesh.position.z = 700 * Math.sin( timer );
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
}
function log(text) {
var e = document.getElementById("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
function toggleCanvas() {
render_canvas = !render_canvas;
......
examples/webgl_materials_texture_filters.html
浏览文件 @ 29a54796
......@@ -109,6 +109,7 @@
context.fillStyle = "#444";
context.fillRect( 0, 0, 128, 128 );
context.fillStyle = "#fff";
context.fillRect( 0, 0, 64, 64);
context.fillRect( 64, 64, 64, 64 );
......@@ -117,36 +118,25 @@
materialCanvas = new THREE.MeshBasicMaterial( { map: textureCanvas } );
textureCanvas.needsUpdate = true;
textureCanvas.repeat.set( 1000, 1000 );
var textureCanvas2 = new THREE.Texture( imageCanvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping, THREE.NearestFilter, THREE.NearestFilter );
materialCanvas2 = new THREE.MeshBasicMaterial( { color:0xffccaa, map: textureCanvas2 } );
materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
textureCanvas2.needsUpdate = true;
textureCanvas2.repeat.set( 1000, 1000 );
var i, j, uvs, geometryRepeat = new THREE.PlaneGeometry( 100, 100, 1, 1 );
for ( i = 0; i < geometryRepeat.faceVertexUvs[ 0 ].length; i ++ ) {
uvs = geometryRepeat.faceVertexUvs[ 0 ][ i ];
for ( j = 0; j < uvs.length; j ++ ) {
uvs[ j ].u *= 1000;
uvs[ j ].v *= 1000;
}
}
var geometry = new THREE.PlaneGeometry( 100, 100 );
var meshCanvas = new THREE.Mesh( geometryRepeat, materialCanvas );
var meshCanvas = new THREE.Mesh( geometry, materialCanvas );
meshCanvas.rotation.x = Math.PI / 2;
meshCanvas.scale.x = meshCanvas.scale.y = meshCanvas.scale.z = 1000;
meshCanvas.scale.set( 1000, 1000, 1000 );
meshCanvas.doubleSided = true;
var meshCanvas2 = new THREE.Mesh( geometryRepeat, materialCanvas2 );
var meshCanvas2 = new THREE.Mesh( geometry, materialCanvas2 );
meshCanvas2.rotation.x = Math.PI / 2;
meshCanvas2.scale.x = meshCanvas2.scale.y = meshCanvas2.scale.z = 1000;
meshCanvas2.scale.set( 1000, 1000, 1000 );
meshCanvas2.doubleSided = true;
......@@ -160,7 +150,7 @@
scene.addObject( meshCanvas );
scene2.addObject( meshCanvas2 );
var geometry = new THREE.PlaneGeometry( 100, 100, 1, 1 ),
var geometry = new THREE.PlaneGeometry( 100, 100 ),
mesh = new THREE.Mesh( geometry, materialPainting ),
mesh2 = new THREE.Mesh( geometry, materialPainting2 );
......@@ -174,15 +164,14 @@
zscene.addObject( zmesh );
var meshFrame = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
var meshFrame = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 5 } ) );
meshFrame.position.z = -0.5;
meshFrame.scale.x = 1.1 * image.width / 100;
meshFrame.scale.y = 1.1 * image.height / 100;
zscene.addObject( meshFrame );
var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.9 } ) );
var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.9, transparent: true } ) );
meshShadow.position.z = - 1.1 * image.height/2;
meshShadow.scale.x = 1.1 * image.width / 100;
......@@ -202,8 +191,8 @@
var texturePainting = THREE.ImageUtils.loadTexture( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", THREE.UVMapping, callbackPainting ),
texturePainting2 = new THREE.Texture(),
materialPainting = new THREE.MeshBasicMaterial( { color:0xffffff, map: texturePainting } ),
materialPainting2 = new THREE.MeshBasicMaterial( { color:0xffccaa, map: texturePainting2 } );
materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } ),
materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter;
texturePainting.minFilter = texturePainting.magFilter = THREE.LinearFilter;
......@@ -211,12 +200,12 @@
renderer = new THREE.WebGLRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
container.appendChild( renderer.domElement );
renderer.setClearColor( scene.fog.color, 1 );
renderer.autoClear = false;
renderer.domElement.style.position = "relative";
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
......
examples/webgl_materials_video.html
浏览文件 @ 29a54796
......@@ -38,6 +38,14 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
......@@ -57,14 +65,14 @@
var video, texture, material, mesh;
var composer;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var postprocessing = { enabled: true };
var cube_count,
meshes = [],
......@@ -163,7 +171,6 @@
}
initPostprocessing();
renderer.autoClear = false;
stats = new Stats();
......@@ -173,6 +180,20 @@
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
// postprocessing
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 1.3 );
var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
effectScreen.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectScreen );
}
function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
......@@ -195,58 +216,6 @@
}
function initPostprocessing() {
postprocessing.scene = new THREE.Scene();
postprocessing.camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
postprocessing.camera.position.z = 100;
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
postprocessing.rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
postprocessing.rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
postprocessing.rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
var screen_shader = THREE.ShaderUtils.lib["screen"];
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
screen_uniforms["opacity"].value = 1.0;
postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertexShader: screen_shader.vertexShader,
fragmentShader: screen_shader.fragmentShader,
blending: THREE.AdditiveBlending,
transparent: true
} );
var convolution_shader = THREE.ShaderUtils.lib["convolution"];
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
postprocessing.blury = new THREE.Vector2( 0.0, 0.001953125 );
convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
uniforms: convolution_uniforms,
vertexShader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
fragmentShader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragmentShader
} );
postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
postprocessing.quad.position.z = -500;
postprocessing.scene.addObject( postprocessing.quad );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
......@@ -319,51 +288,11 @@
}
counter++;
counter ++;
renderer.clear();
composer.render();
if ( postprocessing.enabled ) {
// Render scene into texture
renderer.render( scene, camera, postprocessing.rtTexture1, true );
// Render quad with blured scene into texture (convolution pass 1)
postprocessing.quad.materials = [ postprocessing.materialConvolution ];
postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture2, true );
// Render quad with blured scene into texture (convolution pass 2)
postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture2;
postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blury;
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture3, true );
// Render original scene with superimposed blur to texture
postprocessing.quad.materials = [ postprocessing.materialScreen ];
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
postprocessing.materialScreen.uniforms.opacity.value = 1.3;
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
// Render to screen
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
renderer.render( postprocessing.scene, postprocessing.camera );
} else {
renderer.render( scene, camera );
}
}
......
examples/webgl_particles_dynamic.html
浏览文件 @ 29a54796
......@@ -41,6 +41,15 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/FilmPass.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
......@@ -65,8 +74,7 @@
var total = 0, totaln = 0;
var postprocessing1 = {};
var postprocessing2 = {};
var composer, effectFocus;
init();
animate();
......@@ -88,9 +96,6 @@
directionalLight.position.normalize();
scene.addLight( directionalLight );
initPostprocessingBloom( postprocessing1 );
initPostprocessingFocus( postprocessing2 );
aloader = new THREE.JSONLoader( );
bloader = new THREE.BinaryLoader( true );
......@@ -130,6 +135,8 @@
} } );
//
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.autoClear = false;
......@@ -138,11 +145,15 @@
renderer.setClearColor( scene.fog.color, 1 );
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
//container.appendChild( stats.domElement );
//
parent = new THREE.Object3D();
scene.addObject( parent );
......@@ -154,8 +165,50 @@
totaln += 1;
total += grid.geometry.vertices.length;
// postprocessing
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 0.75 );
var effectFilm = new THREE.FilmPass( 0.5, 0.5, 1448, false );
effectFocus = new THREE.ShaderPass( THREE.ShaderExtras[ "focus" ] );
effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth;
effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight;
effectFocus.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectFilm );
composer.addPass( effectFocus );
//
window.addEventListener( 'resize', onWindowResize, false );
}
//
function onWindowResize( event ) {
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
composer.reset();
effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth;
effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight;
}
//
function createMesh( originalGeometry, scene, scale, x, y, z, color, dynamic ) {
var i, c;
......@@ -234,177 +287,10 @@
dynamic: dynamic,
bb: geometry.boundingBox } );
console.log( total, totaln );
//console.log( total, totaln );
}
function initPostprocessingFocus( effect ) {
effect.type = "focus";
effect.scene = new THREE.Scene();
effect.camera = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
effect.camera.position.z = 100;
effect.texture = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
var heatUniforms = {
"map": { type: "t", value:0, texture: effect.texture },
"screenWidth": { type: "f", value: SCREEN_WIDTH },
"screenHeight": { type: "f", value: SCREEN_HEIGHT },
"sampleDistance": { type: "f", value: 0.94 },
"waveFactor": { type: "f", value: 0.00125 }
};
effect.materialHeat = new THREE.MeshShaderMaterial( {
uniforms: heatUniforms,
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform float screenWidth;",
"uniform float screenHeight;",
"uniform float sampleDistance;",
"uniform float waveFactor;",
"uniform sampler2D map;",
"varying vec2 vUv;",
"void main() {",
"vec4 color, org, tmp, add;",
"float sample_dist, f;",
"vec2 vin;",
"vec2 uv = vUv;",
"add += color = org = texture2D( map, uv );",
"vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );",
"sample_dist = dot( vin, vin ) * 2.0;",
"f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;",
"vec2 sampleSize = vec2( 1.0 / screenWidth, 1.0 / screenHeight ) * vec2(f);",
"add += tmp = texture2D( map, uv + vec2(0.111964, 0.993712) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.846724, 0.532032) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.943883, -0.330279) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.330279, -0.943883) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(-0.532032, -0.846724) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(-0.993712, -0.111964) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(-0.707107, 0.707107) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"color = color * vec4( 2.0 ) - ( add / vec4( 8.0 ) );",
"color = color + ( add / vec4(8.0) - color ) * ( vec4(1.0) - vec4(sample_dist * 0.5) );",
"gl_FragColor = vec4( color.rgb * color.rgb * vec3( 0.95 ) + color.rgb, 1.0 );",
"}"
].join("\n")
} );
effect.quad = new THREE.Mesh( new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT ), effect.materialHeat );
effect.quad.position.z = -500;
effect.scene.addObject( effect.quad );
}
function initPostprocessingBloom( effect ) {
effect.type = "bloomnoise";
effect.scene = new THREE.Scene();
effect.camera = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
effect.camera.position.z = 100;
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
effect.rtTexture1 = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, pars );
effect.rtTexture2 = new THREE.WebGLRenderTarget( 256, 512, pars );
effect.rtTexture3 = new THREE.WebGLRenderTarget( 512, 256, pars );
var screen_shader = THREE.ShaderUtils.lib["screen"];
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
screen_uniforms["tDiffuse"].texture = effect.rtTexture3;
screen_uniforms["opacity"].value = 0.75;
effect.materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertexShader: screen_shader.vertexShader,
fragmentShader: screen_shader.fragmentShader,
blending: THREE.AdditiveBlending,
transparent: true
} );
var convolution_shader = THREE.ShaderUtils.lib["convolution"];
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
effect.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
effect.blury = new THREE.Vector2( 0.0, 0.001953125 );
convolution_uniforms["tDiffuse"].texture = effect.rtTexture1;
convolution_uniforms["uImageIncrement"].value = effect.blurx;
convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
effect.materialConvolution = new THREE.MeshShaderMaterial( {
uniforms: convolution_uniforms,
vertexShader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
fragmentShader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragmentShader
} );
var film_shader = THREE.ShaderUtils.lib["film"];
var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
film_uniforms["tDiffuse"].texture = effect.rtTexture1;
effect.materialFilm = new THREE.MeshShaderMaterial( { uniforms: film_uniforms, vertexShader: film_shader.vertexShader, fragmentShader: film_shader.fragmentShader } );
effect.materialFilm.uniforms.grayscale.value = 0;
effect.materialFilm.uniforms.nIntensity.value = 0.5;
effect.materialFilm.uniforms.sIntensity.value = 0.5;
effect.materialFilm.uniforms.sCount.value = 1448;
effect.quad = new THREE.Mesh( new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT ), effect.materialConvolution );
effect.quad.position.z = -500;
effect.scene.addObject( effect.quad );
}
var j, jl, cm, data, vertices, vertices_tmp, vl, d, vt,
time, oldTime, delta;
......@@ -414,7 +300,7 @@
requestAnimationFrame( animate );
render();
//stats.update();
stats.update();
}
......@@ -589,46 +475,7 @@
}
renderer.clear();
// BLOOM
// Render scene into texture
renderer.render( scene, camera, postprocessing1.rtTexture1, true );
// Render quad with blured scene into texture (convolution pass 1)
postprocessing1.quad.materials[ 0 ] = postprocessing1.materialConvolution;
postprocessing1.materialConvolution.uniforms.tDiffuse.texture = postprocessing1.rtTexture1;
postprocessing1.materialConvolution.uniforms.uImageIncrement.value = postprocessing1.blurx;
renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture2, true );
// Render quad with blured scene into texture (convolution pass 2)
postprocessing1.materialConvolution.uniforms.tDiffuse.texture = postprocessing1.rtTexture2;
postprocessing1.materialConvolution.uniforms.uImageIncrement.value = postprocessing1.blury;
renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture3, true );
// Render original scene with superimposed blur to texture
postprocessing1.quad.materials[ 0 ] = postprocessing1.materialScreen;
renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture1, false );
// NOISE + SCANLINES
postprocessing1.materialFilm.uniforms.time.value += 0.01;
postprocessing1.quad.materials[ 0 ] = postprocessing1.materialFilm;
renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing2.texture, true );
// FOCUS
renderer.render( postprocessing2.scene, postprocessing2.camera );
composer.render( 0.01 );
}
......
examples/webgl_performance.html
浏览文件 @ 29a54796
......@@ -70,6 +70,8 @@
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
//mesh.frustumCulled = false;
scene.addObject( mesh );
}
......
examples/webgl_postprocessing.html
浏览文件 @ 29a54796
......@@ -11,7 +11,7 @@
text-align:center;
font-weight: bold;
background-color: #fff;
background-color: #000;
margin: 0px;
overflow: hidden;
}
......@@ -20,7 +20,7 @@
color:#fff;
background-color: rgba( 0, 0, 0, 0.5 );
position: relative;
margin: 0 auto -2em;
margin: 0 auto -2.1em;
top: 0px;
width: 550px;
padding: 5px;
......@@ -41,14 +41,17 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
<script type="text/javascript" src="js/postprocessing/FilmPass.js"></script>
<script type="text/javascript" src="js/postprocessing/SepiaPass.js"></script>
<script type="text/javascript" src="js/postprocessing/DotScreenPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ScreenPass.js"></script>
<script type="text/javascript" src="js/postprocessing/VignettePass.js"></script>
<script type="text/javascript" src="js/postprocessing/TexturePass.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
......@@ -64,6 +67,7 @@
void main() {
//gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
//gl_FragColor = vec4( 0.4, 0.4, 0.4, 1.0 );
gl_FragColor = vec4( 0.2, 0.4, 0.5, 1.0 );
}
......@@ -99,7 +103,9 @@
var halfWidth = window.innerWidth / 2;
var halfHeight = window.innerHeight / 2;
var rtTexture, materialColor, material2D, quadBG1, quadBG2;
var materialColor, material2D, quadBG, quadMask, renderScene;
var rtParameters;
var delta = 0.01;
......@@ -144,15 +150,27 @@
var plane = new THREE.PlaneGeometry( 1, 1 );
quadBG1 = new THREE.Mesh( plane, materialColor );
quadBG1.position.z = -500;
quadBG1.scale.set( window.innerWidth, window.innerHeight, 1 );
sceneBG.addObject( quadBG1 );
quadBG = new THREE.Mesh( plane, materialColor );
quadBG.position.z = -500;
quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
sceneBG.addObject( quadBG );
//
var sceneMask = new THREE.Scene();
var plane = new THREE.PlaneGeometry( 1, 1 );
quadMask = new THREE.Mesh( plane, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
quadMask.position.z = -300;
quadMask.scale.set( window.innerWidth / 2, window.innerHeight/2, 1 );
sceneMask.addObject( quadMask );
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColorHex( 0x000000, 1 );
renderer.autoClear = false;
container.appendChild( renderer.domElement );
......@@ -166,18 +184,39 @@
//
var effectBloom = new THREE.BloomPass( 0.75 );
var effectFilm = new THREE.FilmPass( 0.75, 0.025, 648, false );
var shaderBleach = THREE.ShaderExtras[ "bleachbypass" ];
var shaderSepia = THREE.ShaderExtras[ "sepia" ];
var shaderVignette = THREE.ShaderExtras[ "vignette" ];
var shaderScreen = THREE.ShaderExtras[ "screen" ];
var effectBleach = new THREE.ShaderPass( shaderBleach );
var effectSepia = new THREE.ShaderPass( shaderSepia );
var effectVignette = new THREE.ShaderPass( shaderVignette );
var effectScreen = new THREE.ShaderPass( shaderScreen );
effectBleach.uniforms[ "opacity" ].value = 0.95;
effectSepia.uniforms[ "amount" ].value = 0.9;
effectVignette.uniforms[ "offset" ].value = 0.95;
effectVignette.uniforms[ "darkness" ].value = 1.6;
var effectBloom = new THREE.BloomPass( 0.5 );
var effectFilm = new THREE.FilmPass( 0.5, 0.025, 648, false );
var effectFilmBW = new THREE.FilmPass( 0.35, 0.5, 2048, true );
var effectSepia = new THREE.SepiaPass( 1.0 );
var effectScreen = new THREE.ScreenPass();
var effectDotScreen = new THREE.DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.4 );
var effectVignette = new THREE.VignettePass( 0.95, 1.6 );
var effectFilmBW2 = new THREE.FilmPass( 0.05, 0.5, 2048, true );
var effectDotScreen = new THREE.DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.6 );
//var renderMask = new THREE.MaskPass( sceneMask, cameraOrtho );
var renderMask = new THREE.MaskPass( sceneModel, cameraPerspective );
var clearMask = new THREE.ClearMaskPass();
//effectFilm.renderToScreen = true;
//effectFilmBW.renderToScreen = true;
//effectDotScreen.renderToScreen = true;
//effectBleach.renderToScreen = true;
effectVignette.renderToScreen = true;
//effectScreen.renderToScreen = true;
//
......@@ -193,64 +232,62 @@
//
scene2D = new THREE.Scene();
var shader = THREE.ShaderUtils.lib[ "screen" ];
renderScene = new THREE.TexturePass( composerScene.renderTarget );
material2D = new THREE.MeshShaderMaterial( {
rtParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBufer: true };
uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
} );
material2D.uniforms[ "tDiffuse" ].texture = composerScene.renderTarget;
quadBG2 = new THREE.Mesh( plane, material2D );
quadBG2.position.z = -500;
quadBG2.scale.set( window.innerWidth, window.innerHeight, 1 );
scene2D.addObject( quadBG2 );
var renderScene = new THREE.RenderPass( scene2D, cameraOrtho );
var rtWidth = window.innerWidth / 2;
var rtHeight = window.innerHeight / 2;
//
composer1 = new THREE.EffectComposer( renderer );
composer1 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
composer1.addPass( renderScene );
composer1.addPass( effectBloom );
//composer1.addPass( renderMask );
composer1.addPass( effectFilmBW );
//composer1.addPass( clearMask );
composer1.addPass( effectVignette );
//
composer2 = new THREE.EffectComposer( renderer );
composer2 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
composer2.addPass( renderScene );
composer2.addPass( renderMask );
composer2.addPass( effectDotScreen );
composer2.addPass( clearMask );
composer2.addPass( effectFilmBW2 );
composer2.addPass( effectVignette );
//
composer3 = new THREE.EffectComposer( renderer );
composer3 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
composer3.addPass( renderScene );
//composer3.addPass( renderMask );
composer3.addPass( effectSepia );
composer3.addPass( effectFilm );
//composer3.addPass( clearMask );
composer3.addPass( effectVignette );
//
composer4 = new THREE.EffectComposer( renderer );
composer4 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
composer4.addPass( renderScene );
//composer4.addPass( renderMask );
composer4.addPass( effectBloom );
composer4.addPass( effectFilm );
composer4.addPass( effectBleach );
//composer4.addPass( clearMask );
composer4.addPass( effectVignette );
//
onWindowResize();
//onWindowResize();
renderScene.uniforms[ "tDiffuse" ].texture = composerScene.renderTarget2;
window.addEventListener( 'resize', onWindowResize, false );
......@@ -275,15 +312,15 @@
composerScene.reset();
composer1.reset();
composer2.reset();
composer3.reset();
composer4.reset();
composer1.reset( new THREE.WebGLRenderTarget( halfWidth, halfHeight, rtParameters ) );
composer2.reset( new THREE.WebGLRenderTarget( halfWidth, halfHeight, rtParameters ) );
composer3.reset( new THREE.WebGLRenderTarget( halfWidth, halfHeight, rtParameters ) );
composer4.reset( new THREE.WebGLRenderTarget( halfWidth, halfHeight, rtParameters ) );
material2D.uniforms[ "tDiffuse" ].texture = composerScene.renderTarget;
renderScene.uniforms[ "tDiffuse" ].texture = composerScene.renderTarget2;
quadBG1.scale.set( window.innerWidth, window.innerHeight, 1 );
quadBG2.scale.set( window.innerWidth, window.innerHeight, 1 );
quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
quadMask.scale.set( window.innerWidth / 2, window.innerHeight / 2, 1 );
}
......
examples/webgl_postprocessing_dof.html
浏览文件 @ 29a54796
......@@ -241,7 +241,7 @@
postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
var bokeh_shader = ShaderExtras[ "bokeh" ];
var bokeh_shader = THREE.ShaderExtras[ "bokeh" ];
postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
......
examples/webgl_ribbons.html
浏览文件 @ 29a54796
......@@ -33,9 +33,12 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ScreenPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
......@@ -198,7 +201,9 @@
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 1.0 );
var effectScreen = new THREE.ScreenPass();
var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
effectScreen.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
......
examples/webgl_sandbox.html
浏览文件 @ 29a54796
......@@ -139,6 +139,8 @@
<script type="text/javascript" src="../src/extras/renderers/AnaglyphWebGLRenderer.js"></script>
<script type="text/javascript" src="../src/extras/renderers/CrosseyedWebGLRenderer.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
......@@ -173,9 +175,9 @@
var geometry = new THREE.SphereGeometry( 50, 32, 16 );
var uniforms = THREE.ShaderUtils.lib[ 'basic' ].uniforms;
var vertexShader = THREE.ShaderUtils.lib[ 'basic' ].vertexShader;
var fragmentShader = THREE.ShaderUtils.lib[ 'basic' ].fragmentShader;
var uniforms = THREE.ShaderExtras[ 'basic' ].uniforms;
var vertexShader = THREE.ShaderExtras[ 'basic' ].vertexShader;
var fragmentShader = THREE.ShaderExtras[ 'basic' ].fragmentShader;
var texture = new THREE.Texture( generateTexture( 0, 0.5, 1 ), new THREE.UVMapping() );
var texture2 = new THREE.Texture( generateTexture( 0, 1, 0 ), new THREE.SphericalReflectionMapping() );
......
examples/webgl_shader_lava.html
浏览文件 @ 29a54796
......@@ -37,7 +37,11 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
<script type="text/javascript" src="js/postprocessing/FilmPass.js"></script>
......
examples/webgl_shadowmap.html
浏览文件 @ 29a54796
......@@ -32,6 +32,8 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
......@@ -138,7 +140,7 @@
cameraOrtho = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10, 1000 );
cameraOrtho.position.z = 10;
var shader = THREE.ShaderUtils.lib[ "screen" ];
var shader = THREE.ShaderExtras[ "screen" ];
var uniforms = new THREE.UniformsUtils.clone( shader.uniforms );
hudMaterial = new THREE.MeshShaderMaterial( { vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, uniforms: uniforms } );
......
examples/webgl_test_memory.html 0 → 100644
浏览文件 @ 29a54796
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - webgl</title>
<meta charset="utf-8">
<style type="text/css">
body {
background:#fff;
padding:0;
margin:0;
overflow:hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript">
var container;
var camera, scene, renderer;
init();
setInterval( render, 1000 / 60 );
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 200;
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function createImage() {
var canvas = document.createElement( 'canvas' );
canvas.width = 256;
canvas.height = 256;
var context = canvas.getContext( '2d' );
context.fillStyle = 'rgb(' + Math.floor( Math.random() * 256 ) + ',' + Math.floor( Math.random() * 256 ) + ',' + Math.floor( Math.random() * 256 ) + ')';
context.fillRect( 0, 0, 256, 256 );
return canvas;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var geometry = new THREE.SphereGeometry( 50, Math.random() * 64, Math.random() * 32 );
var texture = new THREE.Texture( createImage() );
texture.needsUpdate = true;
var material = new THREE.MeshBasicMaterial( { map: texture, wireframe: true } )
var mesh = new THREE.Mesh( geometry, material );
scene.addObject( mesh );
renderer.render( scene, camera );
scene.removeObject( mesh );
renderer.deallocateObject( mesh );
renderer.deallocateTexture( texture );
}
</script>
</body>
</html>
src/core/Geometry.js
浏览文件 @ 29a54796
......@@ -7,7 +7,7 @@
THREE.Geometry = function () {
this.id = "Geometry" + THREE.GeometryIdCounter ++;
this.id = THREE.GeometryCount ++;
this.vertices = [];
this.colors = []; // one-to-one vertex colors, used in ParticleSystem, Line and Ribbon
......@@ -510,4 +510,4 @@ THREE.Geometry.prototype = {
};
THREE.GeometryIdCounter = 0;
THREE.GeometryCount = 0;
src/core/Object3D.js
浏览文件 @ 29a54796
......@@ -6,6 +6,9 @@
THREE.Object3D = function() {
this.id = THREE.Object3DCount ++;
this.name = "";
this.parent = undefined;
this.children = [];
......@@ -43,9 +46,9 @@ THREE.Object3D = function() {
this.castShadow = false;
this.receiveShadow = false;
this._vector = new THREE.Vector3();
this.frustumCulled = true;
this.name = "";
this._vector = new THREE.Vector3();
};
......@@ -233,3 +236,5 @@ THREE.Object3D.prototype = {
}
};
THREE.Object3DCount = 0;
src/core/Projector.js 0 → 100644
浏览文件 @ 29a54796
/**
* @author mr.doob / http://mrdoob.com/
* @author supereggbert / http://www.paulbrunt.co.uk/
* @author julianwa / https://github.com/julianwa
*/
THREE.Projector = function() {
var _object, _objectCount, _objectPool = [],
_vertex, _vertexCount, _vertexPool = [],
_face, _face3Count, _face3Pool = [], _face4Count, _face4Pool = [],
_line, _lineCount, _linePool = [],
_particle, _particleCount, _particlePool = [],
_objectList = [], _renderList = [],
_vector3 = new THREE.Vector4(),
_vector4 = new THREE.Vector4(),
_projScreenMatrix = new THREE.Matrix4(),
_projScreenObjectMatrix = new THREE.Matrix4(),
_frustum = [
new THREE.Vector4(),
new THREE.Vector4(),
new THREE.Vector4(),
new THREE.Vector4(),
new THREE.Vector4(),
new THREE.Vector4()
],
_clippedVertex1PositionScreen = new THREE.Vector4(),
_clippedVertex2PositionScreen = new THREE.Vector4(),
_face3VertexNormals;
this.projectVector = function ( vector, camera ) {
_projScreenMatrix.multiply( camera.projectionMatrix, camera.matrixWorldInverse );
_projScreenMatrix.multiplyVector3( vector );
return vector;
};
this.unprojectVector = function ( vector, camera ) {
_projScreenMatrix.multiply( camera.matrixWorld, THREE.Matrix4.makeInvert( camera.projectionMatrix ) );
_projScreenMatrix.multiplyVector3( vector );
return vector;
};
this.projectObjects = function ( scene, camera, sort ) {
var o, ol, objects, object, matrix;
_objectList.length = 0;
_objectCount = 0;
objects = scene.objects;
for ( o = 0, ol = objects.length; o < ol; o ++ ) {
object = objects[ o ];
if ( !object.visible || ( object instanceof THREE.Mesh && ( object.frustumCulled && !isInFrustum( object ) ) ) ) continue;
_object = getNextObjectInPool();
_vector3.copy( object.position );
_projScreenMatrix.multiplyVector3( _vector3 );
_object.object = object;
_object.z = _vector3.z;
_objectList.push( _object );
}
sort && _objectList.sort( painterSort );
return _objectList;
};
// TODO: Rename to projectElements?
this.projectScene = function ( scene, camera, sort ) {
var near = camera.near, far = camera.far,
o, ol, v, vl, f, fl, n, nl, c, cl, u, ul, objects, object,
objectMatrix, objectMatrixRotation, objectMaterials, objectOverdraw,
geometry, vertices, vertex, vertexPositionScreen,
faces, face, faceVertexNormals, normal, faceVertexUvs, uvs,
v1, v2, v3, v4;
_renderList.length = 0;
_face3Count = 0;
_face4Count = 0;
_lineCount = 0;
_particleCount = 0;
camera.matrixAutoUpdate && camera.update( undefined, true );
scene.update( undefined, false, camera );
_projScreenMatrix.multiply( camera.projectionMatrix, camera.matrixWorldInverse );
computeFrustum( _projScreenMatrix );
objects = this.projectObjects( scene, camera, true );
for ( o = 0, ol = objects.length; o < ol; o++ ) {
object = objects[ o ].object;
if ( !object.visible ) continue;
objectMatrix = object.matrixWorld;
objectMatrixRotation = object.matrixRotationWorld;
objectMaterials = object.materials;
objectOverdraw = object.overdraw;
_vertexCount = 0;
if ( object instanceof THREE.Mesh ) {
geometry = object.geometry;
vertices = geometry.vertices;
faces = geometry.faces;
faceVertexUvs = geometry.faceVertexUvs;
for ( v = 0, vl = vertices.length; v < vl; v ++ ) {
_vertex = getNextVertexInPool();
_vertex.positionWorld.copy( vertices[ v ].position );
objectMatrix.multiplyVector3( _vertex.positionWorld );
_vertex.positionScreen.copy( _vertex.positionWorld );
_projScreenMatrix.multiplyVector4( _vertex.positionScreen );
_vertex.positionScreen.x /= _vertex.positionScreen.w;
_vertex.positionScreen.y /= _vertex.positionScreen.w;
_vertex.visible = _vertex.positionScreen.z > near && _vertex.positionScreen.z < far;
}
for ( f = 0, fl = faces.length; f < fl; f ++ ) {
face = faces[ f ];
if ( face instanceof THREE.Face3 ) {
v1 = _vertexPool[ face.a ];
v2 = _vertexPool[ face.b ];
v3 = _vertexPool[ face.c ];
if ( v1.visible && v2.visible && v3.visible &&
( object.doubleSided || ( object.flipSided !=
( v3.positionScreen.x - v1.positionScreen.x ) * ( v2.positionScreen.y - v1.positionScreen.y ) -
( v3.positionScreen.y - v1.positionScreen.y ) * ( v2.positionScreen.x - v1.positionScreen.x ) < 0 ) ) ) {
_face = getNextFace3InPool();
_face.v1.copy( v1 );
_face.v2.copy( v2 );
_face.v3.copy( v3 );
} else {
continue;
}
} else if ( face instanceof THREE.Face4 ) {
v1 = _vertexPool[ face.a ];
v2 = _vertexPool[ face.b ];
v3 = _vertexPool[ face.c ];
v4 = _vertexPool[ face.d ];
if ( v1.visible && v2.visible && v3.visible && v4.visible &&
( object.doubleSided || ( object.flipSided !=
( ( v4.positionScreen.x - v1.positionScreen.x ) * ( v2.positionScreen.y - v1.positionScreen.y ) -
( v4.positionScreen.y - v1.positionScreen.y ) * ( v2.positionScreen.x - v1.positionScreen.x ) < 0 ||
( v2.positionScreen.x - v3.positionScreen.x ) * ( v4.positionScreen.y - v3.positionScreen.y ) -
( v2.positionScreen.y - v3.positionScreen.y ) * ( v4.positionScreen.x - v3.positionScreen.x ) < 0 ) ) ) ) {
_face = getNextFace4InPool();
_face.v1.copy( v1 );
_face.v2.copy( v2 );
_face.v3.copy( v3 );
_face.v4.copy( v4 );
} else {
continue;
}
}
_face.normalWorld.copy( face.normal );
objectMatrixRotation.multiplyVector3( _face.normalWorld );
_face.centroidWorld.copy( face.centroid );
objectMatrix.multiplyVector3( _face.centroidWorld );
_face.centroidScreen.copy( _face.centroidWorld );
_projScreenMatrix.multiplyVector3( _face.centroidScreen );
faceVertexNormals = face.vertexNormals;
for ( n = 0, nl = faceVertexNormals.length; n < nl; n ++ ) {
normal = _face.vertexNormalsWorld[ n ];
normal.copy( faceVertexNormals[ n ] );
objectMatrixRotation.multiplyVector3( normal );
}
for ( c = 0, cl = faceVertexUvs.length; c < cl; c ++ ) {
uvs = faceVertexUvs[ c ][ f ];
if ( !uvs ) continue;
for ( u = 0, ul = uvs.length; u < ul; u ++ ) {
_face.uvs[ c ][ u ] = uvs[ u ];
}
}
_face.meshMaterials = objectMaterials;
_face.faceMaterials = face.materials;
_face.overdraw = objectOverdraw;
_face.z = _face.centroidScreen.z;
_renderList.push( _face );
}
} else if ( object instanceof THREE.Line ) {
_projScreenObjectMatrix.multiply( _projScreenMatrix, objectMatrix );
vertices = object.geometry.vertices;
v1 = getNextVertexInPool();
v1.positionScreen.copy( vertices[ 0 ].position );
_projScreenObjectMatrix.multiplyVector4( v1.positionScreen );
for ( v = 1, vl = vertices.length; v < vl; v++ ) {
v1 = getNextVertexInPool();
v1.positionScreen.copy( vertices[ v ].position );
_projScreenObjectMatrix.multiplyVector4( v1.positionScreen );
v2 = _vertexPool[ _vertexCount - 2 ];
_clippedVertex1PositionScreen.copy( v1.positionScreen );
_clippedVertex2PositionScreen.copy( v2.positionScreen );
if ( clipLine( _clippedVertex1PositionScreen, _clippedVertex2PositionScreen ) ) {
// Perform the perspective divide
_clippedVertex1PositionScreen.multiplyScalar( 1 / _clippedVertex1PositionScreen.w );
_clippedVertex2PositionScreen.multiplyScalar( 1 / _clippedVertex2PositionScreen.w );
_line = getNextLineInPool();
_line.v1.positionScreen.copy( _clippedVertex1PositionScreen );
_line.v2.positionScreen.copy( _clippedVertex2PositionScreen );
_line.z = Math.max( _clippedVertex1PositionScreen.z, _clippedVertex2PositionScreen.z );
_line.materials = object.materials;
_renderList.push( _line );
}
}
} else if ( object instanceof THREE.Particle ) {
_vector4.set( object.matrixWorld.n14, object.matrixWorld.n24, object.matrixWorld.n34, 1 );
_projScreenMatrix.multiplyVector4( _vector4 );
_vector4.z /= _vector4.w;
if ( _vector4.z > 0 && _vector4.z < 1 ) {
_particle = getNextParticleInPool();
_particle.x = _vector4.x / _vector4.w;
_particle.y = _vector4.y / _vector4.w;
_particle.z = _vector4.z;
_particle.rotation = object.rotation.z;
_particle.scale.x = object.scale.x * Math.abs( _particle.x - ( _vector4.x + camera.projectionMatrix.n11 ) / ( _vector4.w + camera.projectionMatrix.n14 ) );
_particle.scale.y = object.scale.y * Math.abs( _particle.y - ( _vector4.y + camera.projectionMatrix.n22 ) / ( _vector4.w + camera.projectionMatrix.n24 ) );
_particle.materials = object.materials;
_renderList.push( _particle );
}
}
}
sort && _renderList.sort( painterSort );
return _renderList;
};
// Pools
function getNextObjectInPool() {
var object = _objectPool[ _objectCount ] = _objectPool[ _objectCount ] || new THREE.RenderableObject();
_objectCount ++;
return object;
}
function getNextVertexInPool() {
var vertex = _vertexPool[ _vertexCount ] = _vertexPool[ _vertexCount ] || new THREE.RenderableVertex();
_vertexCount ++;
return vertex;
}
function getNextFace3InPool() {
var face = _face3Pool[ _face3Count ] = _face3Pool[ _face3Count ] || new THREE.RenderableFace3();
_face3Count ++;
return face;
}
function getNextFace4InPool() {
var face = _face4Pool[ _face4Count ] = _face4Pool[ _face4Count ] || new THREE.RenderableFace4();
_face4Count ++;
return face;
}
function getNextLineInPool() {
var line = _linePool[ _lineCount ] = _linePool[ _lineCount ] || new THREE.RenderableLine();
_lineCount ++;
return line;
}
function getNextParticleInPool() {
var particle = _particlePool[ _particleCount ] = _particlePool[ _particleCount ] || new THREE.RenderableParticle();
_particleCount ++;
return particle;
}
//
function painterSort( a, b ) {
return b.z - a.z;
}
function computeFrustum( m ) {
_frustum[ 0 ].set( m.n41 - m.n11, m.n42 - m.n12, m.n43 - m.n13, m.n44 - m.n14 );
_frustum[ 1 ].set( m.n41 + m.n11, m.n42 + m.n12, m.n43 + m.n13, m.n44 + m.n14 );
_frustum[ 2 ].set( m.n41 + m.n21, m.n42 + m.n22, m.n43 + m.n23, m.n44 + m.n24 );
_frustum[ 3 ].set( m.n41 - m.n21, m.n42 - m.n22, m.n43 - m.n23, m.n44 - m.n24 );
_frustum[ 4 ].set( m.n41 - m.n31, m.n42 - m.n32, m.n43 - m.n33, m.n44 - m.n34 );
_frustum[ 5 ].set( m.n41 + m.n31, m.n42 + m.n32, m.n43 + m.n33, m.n44 + m.n34 );
for ( var i = 0; i < 6; i ++ ) {
var plane = _frustum[ i ];
plane.divideScalar( Math.sqrt( plane.x * plane.x + plane.y * plane.y + plane.z * plane.z ) );
}
}
function isInFrustum( object ) {
var distance, matrix = object.matrixWorld,
radius = - object.geometry.boundingSphere.radius * Math.max( object.scale.x, Math.max( object.scale.y, object.scale.z ) );
for ( var i = 0; i < 6; i ++ ) {
distance = _frustum[ i ].x * matrix.n14 + _frustum[ i ].y * matrix.n24 + _frustum[ i ].z * matrix.n34 + _frustum[ i ].w;
if ( distance <= radius ) return false;
}
return true;
};
function clipLine( s1, s2 ) {
var alpha1 = 0, alpha2 = 1,
// Calculate the boundary coordinate of each vertex for the near and far clip planes,
// Z = -1 and Z = +1, respectively.
bc1near = s1.z + s1.w,
bc2near = s2.z + s2.w,
bc1far = - s1.z + s1.w,
bc2far = - s2.z + s2.w;
if ( bc1near >= 0 && bc2near >= 0 && bc1far >= 0 && bc2far >= 0 ) {
// Both vertices lie entirely within all clip planes.
return true;
} else if ( ( bc1near < 0 && bc2near < 0) || (bc1far < 0 && bc2far < 0 ) ) {
// Both vertices lie entirely outside one of the clip planes.
return false;
} else {
// The line segment spans at least one clip plane.
if ( bc1near < 0 ) {
// v1 lies outside the near plane, v2 inside
alpha1 = Math.max( alpha1, bc1near / ( bc1near - bc2near ) );
} else if ( bc2near < 0 ) {
// v2 lies outside the near plane, v1 inside
alpha2 = Math.min( alpha2, bc1near / ( bc1near - bc2near ) );
}
if ( bc1far < 0 ) {
// v1 lies outside the far plane, v2 inside
alpha1 = Math.max( alpha1, bc1far / ( bc1far - bc2far ) );
} else if ( bc2far < 0 ) {
// v2 lies outside the far plane, v2 inside
alpha2 = Math.min( alpha2, bc1far / ( bc1far - bc2far ) );
}
if ( alpha2 < alpha1 ) {
// The line segment spans two boundaries, but is outside both of them.
// (This can't happen when we're only clipping against just near/far but good
// to leave the check here for future usage if other clip planes are added.)
return false;
} else {
// Update the s1 and s2 vertices to match the clipped line segment.
s1.lerpSelf( s2, alpha1 );
s2.lerpSelf( s1, 1 - alpha2 );
return true;
}
}
}
};
src/extras/ShaderUtils.js
浏览文件 @ 29a54796
......@@ -2,14 +2,12 @@
* @author alteredq / http://alteredqualia.com/
* @author mr.doob / http://mrdoob.com/
*
* ShaderUtils currently contains
* ShaderUtils currently contains:
*
* fresnel
* normal
* cube
* convolution
* film
* screen
* basic
*
*/
if ( THREE.WebGLRenderer ) {
......@@ -304,9 +302,11 @@ THREE.ShaderUtils = {
"void main() {",
"vec4 mPosition = objectMatrix * vec4( position, 1.0 );",
"vViewPosition = cameraPosition - mPosition.xyz;",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"vViewPosition = -mvPosition.xyz;",
"vNormal = normalize( normalMatrix * normal );",
// tangent and binormal vectors
......@@ -400,454 +400,8 @@ THREE.ShaderUtils = {
].join("\n")
},
/* ------------------------------------------------------------------------
// Convolution shader
// - ported from o3d sample to WebGL / GLSL
// http://o3d.googlecode.com/svn/trunk/samples/convolution.html
------------------------------------------------------------------------ */
'convolution': {
uniforms: {
"tDiffuse" : { type: "t", value: 0, texture: null },
"uImageIncrement" : { type: "v2", value: new THREE.Vector2( 0.001953125, 0.0 ) },
"cKernel" : { type: "fv1", value: [] }
},
vertexShader: [
"varying vec2 vUv;",
"uniform vec2 uImageIncrement;",
//"#define KERNEL_SIZE 25.0",
"void main(void) {",
"vUv = uv - ((KERNEL_SIZE - 1.0) / 2.0) * uImageIncrement;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"varying vec2 vUv;",
"uniform sampler2D tDiffuse;",
"uniform vec2 uImageIncrement;",
//"#define KERNEL_SIZE 25",
"uniform float cKernel[KERNEL_SIZE];",
"void main(void) {",
"vec2 imageCoord = vUv;",
"vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );",
"for( int i=0; i<KERNEL_SIZE; ++i ) {",
"sum += texture2D( tDiffuse, imageCoord ) * cKernel[i];",
"imageCoord += uImageIncrement;",
"}",
"gl_FragColor = sum;",
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Film grain & scanlines shader
// - ported from HLSL to WebGL / GLSL
// http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
// Screen Space Static Postprocessor
//
// Produces an analogue noise overlay similar to a film grain / TV static
//
// Original implementation and noise algorithm
// Pat 'Hawthorne' Shearon
//
// Optimized scanlines + noise version with intensity scaling
// Georg 'Leviathan' Steinrohder
// This version is provided under a Creative Commons Attribution 3.0 License
// http://creativecommons.org/licenses/by/3.0/
------------------------------------------------------------------------- */
'film': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
time: { type: "f", value: 0.0 },
nIntensity: { type: "f", value: 0.5 },
sIntensity: { type: "f", value: 0.05 },
sCount: { type: "f", value: 4096 },
grayscale: { type: "i", value: 1 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"varying vec2 vUv;",
"uniform sampler2D tDiffuse;",
// control parameter
"uniform float time;",
"uniform bool grayscale;",
// noise effect intensity value (0 = no effect, 1 = full effect)
"uniform float nIntensity;",
// scanlines effect intensity value (0 = no effect, 1 = full effect)
"uniform float sIntensity;",
// scanlines effect count value (0 = no effect, 4096 = full effect)
"uniform float sCount;",
"void main() {",
// sample the source
"vec4 cTextureScreen = texture2D( tDiffuse, vUv );",
// make some noise
"float x = vUv.x * vUv.y * time * 1000.0;",
"x = mod( x, 13.0 ) * mod( x, 123.0 );",
"float dx = mod( x, 0.01 );",
// add noise
"vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );",
// get us a sine and cosine
"vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );",
// add scanlines
"cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;",
// interpolate between source and result by intensity
"cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );",
// convert to grayscale if desired
"if( grayscale ) {",
"cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );",
"}",
"gl_FragColor = vec4( cResult, cTextureScreen.a );",
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Sepia tone shader
// - based on glfx.js sepia shader
// https://github.com/evanw/glfx.js
------------------------------------------------------------------------- */
'sepia': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
amount: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform float amount;",
"varying vec2 vUv;",
"uniform sampler2D tDiffuse;",
"void main() {",
"vec4 color = texture2D( tDiffuse, vUv );",
"vec3 c = color.rgb;",
"color.r = dot( c, vec3( 1.0 - 0.607 * amount, 0.769 * amount, 0.189 * amount ) );",
"color.g = dot( c, vec3( 0.349 * amount, 1.0 - 0.314 * amount, 0.168 * amount ) );",
"color.b = dot( c, vec3( 0.272 * amount, 0.534 * amount, 1.0 - 0.869 * amount ) );",
"gl_FragColor = vec4( min( vec3( 1.0 ), color.rgb ), color.a );",
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Dot screen shader
// - based on glfx.js sepia shader
// https://github.com/evanw/glfx.js
------------------------------------------------------------------------- */
'dotscreen': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
tSize: { type: "v2", value: new THREE.Vector2( 256, 256 ) },
center: { type: "v2", value: new THREE.Vector2( 0.5, 0.5 ) },
angle: { type: "f", value: 1.57 },
scale: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform vec2 center;",
"uniform float angle;",
"uniform float scale;",
"uniform vec2 tSize;",
"varying vec2 vUv;",
"uniform sampler2D tDiffuse;",
"float pattern() {",
"float s = sin( angle ), c = cos( angle );",
"vec2 tex = vUv * tSize - center;",
"vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;",
"return ( sin( point.x ) * sin( point.y ) ) * 4.0;",
"}",
"void main() {",
"vec4 color = texture2D( tDiffuse, vUv );",
"float average = ( color.r + color.g + color.b ) / 3.0;",
"gl_FragColor = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );",
"}"
].join("\n")
},
/* ------------------------------------------------------------------------------------------------
// Vignette shader
// - based on PaintEffect postprocess from ro.me
// http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js
------------------------------------------------------------------------------------------------ */
'vignette': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
offset: { type: "f", value: 1.0 },
darkness: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform float offset;",
"uniform float darkness;",
"varying vec2 vUv;",
"uniform sampler2D tDiffuse;",
"void main() {",
// Eskil's vignette
"vec4 texel = texture2D( tDiffuse, vUv );",
"vec2 uv = ( vUv - vec2( 0.5 ) ) * vec2( offset );",
"gl_FragColor = vec4( mix( texel.rgb, vec3( 1.0 - darkness ), dot( uv, uv ) ), texel.a );",
/*
// alternative version from glfx.js
// this one makes more "dusty" look (as opposed to "burned")
"vec4 color = texture2D( tDiffuse, vUv );",
"float dist = distance( vUv, vec2( 0.5 ) );",
"color.rgb *= smoothstep( 0.8, offset * 0.799, dist *( darkness + offset ) );",
"gl_FragColor = color;",
*/
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Full-screen textured quad shader
------------------------------------------------------------------------- */
'screen': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
opacity: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"varying vec2 vUv;",
"uniform sampler2D tDiffuse;",
"uniform float opacity;",
"void main() {",
"vec4 texel = texture2D( tDiffuse, vUv );",
"gl_FragColor = opacity * texel;",
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Simple test shader
------------------------------------------------------------------------- */
'basic': {
uniforms: {},
vertexShader: [
"void main() {",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"void main() {",
"gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );",
"}"
].join("\n")
}
},
buildKernel: function( sigma ) {
// We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize anyway.
function gauss( x, sigma ) {
return Math.exp( - ( x * x ) / ( 2.0 * sigma * sigma ) );
}
var i, values, sum, halfWidth, kMaxKernelSize = 25, kernelSize = 2 * Math.ceil( sigma * 3.0 ) + 1;
if ( kernelSize > kMaxKernelSize ) kernelSize = kMaxKernelSize;
halfWidth = ( kernelSize - 1 ) * 0.5
values = new Array( kernelSize );
sum = 0.0;
for ( i = 0; i < kernelSize; ++i ) {
values[ i ] = gauss( i - halfWidth, sigma );
sum += values[ i ];
}
// normalize the kernel
for ( i = 0; i < kernelSize; ++i ) values[ i ] /= sum;
return values;
}
};
......
src/extras/loaders/BinaryLoader.js
浏览文件 @ 29a54796
此差异已折叠。
src/extras/loaders/ColladaLoader.js
浏览文件 @ 29a54796
此差异已折叠。
src/extras/loaders/JSONLoader.js
浏览文件 @ 29a54796
......@@ -405,4 +405,4 @@ THREE.JSONLoader.prototype.createModel = function ( json, callback, texture_path
callback( geometry );
}
};
src/extras/loaders/Loader.js
浏览文件 @ 29a54796
......@@ -55,7 +55,7 @@ THREE.Loader.prototype = {
},
extractUrlbase: function( url ) {
extractUrlbase: function ( url ) {
var chunks = url.split( "/" );
chunks.pop();
......@@ -63,11 +63,11 @@ THREE.Loader.prototype = {
},
init_materials: function( scope, materials, texture_path ) {
init_materials: function ( scope, materials, texture_path ) {
scope.materials = [];
for ( var i = 0; i < materials.length; ++i ) {
for ( var i = 0; i < materials.length; ++ i ) {
scope.materials[ i ] = [ THREE.Loader.prototype.createMaterial( materials[ i ], texture_path ) ];
......@@ -75,7 +75,7 @@ THREE.Loader.prototype = {
},
hasNormals: function( scope ) {
hasNormals: function ( scope ) {
var m, i, il = scope.materials.length;
......@@ -136,7 +136,7 @@ THREE.Loader.prototype = {
}
function create_texture( where, name, sourceFile, repeat, offset, wrap ) {
function create_texture ( where, name, sourceFile, repeat, offset, wrap ) {
var texture = document.createElement( 'canvas' );
......@@ -174,7 +174,7 @@ THREE.Loader.prototype = {
}
function rgb2hex( rgb ) {
function rgb2hex ( rgb ) {
return ( rgb[ 0 ] * 255 << 16 ) + ( rgb[ 1 ] * 255 << 8 ) + rgb[ 2 ] * 255;
......@@ -367,7 +367,7 @@ THREE.Loader.prototype = {
return material;
},
constructor : THREE.Loader
};
src/extras/loaders/UTF8Loader.js
浏览文件 @ 29a54796
此差异已折叠。
src/renderers/Projector.js
浏览文件 @ 29a54796
......@@ -12,6 +12,8 @@ THREE.Projector = function() {
_line, _lineCount, _linePool = [],
_particle, _particleCount, _particlePool = [],
_objectList = [], _renderList = [],
_vector3 = new THREE.Vector4(),
_vector4 = new THREE.Vector4(),
_projScreenMatrix = new THREE.Matrix4(),
......@@ -52,9 +54,9 @@ THREE.Projector = function() {
this.projectObjects = function ( scene, camera, sort ) {
var renderList = [],
o, ol, objects, object, matrix;
var o, ol, objects, object, matrix;
_objectList.length = 0;
_objectCount = 0;
objects = scene.objects;
......@@ -63,7 +65,7 @@ THREE.Projector = function() {
object = objects[ o ];
if ( !object.visible || ( object instanceof THREE.Mesh && !isInFrustum( object ) ) ) continue;
if ( !object.visible || ( object instanceof THREE.Mesh && !( object.frustumCulled && isInFrustum( object ) ) ) ) continue;
_object = getNextObjectInPool();
......@@ -73,13 +75,13 @@ THREE.Projector = function() {
_object.object = object;
_object.z = _vector3.z;
renderList.push( _object );
_objectList.push( _object );
}
sort && renderList.sort( painterSort );
sort && _objectList.sort( painterSort );
return renderList;
return _objectList;
};
......@@ -87,13 +89,15 @@ THREE.Projector = function() {
this.projectScene = function ( scene, camera, sort ) {
var renderList = [], near = camera.near, far = camera.far,
var near = camera.near, far = camera.far,
o, ol, v, vl, f, fl, n, nl, c, cl, u, ul, objects, object,
objectMatrix, objectMatrixRotation, objectMaterials, objectOverdraw,
geometry, vertices, vertex, vertexPositionScreen,
faces, face, faceVertexNormals, normal, faceVertexUvs, uvs,
v1, v2, v3, v4;
_renderList.length = 0;
_face3Count = 0;
_face4Count = 0;
_lineCount = 0;
......@@ -241,7 +245,7 @@ THREE.Projector = function() {
_face.z = _face.centroidScreen.z;
renderList.push( _face );
_renderList.push( _face );
}
......@@ -280,7 +284,7 @@ THREE.Projector = function() {
_line.materials = object.materials;
renderList.push( _line );
_renderList.push( _line );
}
}
......@@ -306,7 +310,7 @@ THREE.Projector = function() {
_particle.materials = object.materials;
renderList.push( _particle );
_renderList.push( _particle );
}
......@@ -314,9 +318,9 @@ THREE.Projector = function() {
}
sort && renderList.sort( painterSort );
sort && _renderList.sort( painterSort );
return renderList;
return _renderList;
};
......
src/renderers/WebGLRenderTarget.js
浏览文件 @ 29a54796
......@@ -25,3 +25,26 @@ THREE.WebGLRenderTarget = function ( width, height, options ) {
this.stencilBuffer = options.stencilBuffer !== undefined ? options.stencilBuffer : true;
};
THREE.WebGLRenderTarget.prototype.clone = function() {
var tmp = new THREE.WebGLRenderTarget( this.width, this.height );
tmp.wrapS = this.wrapS;
tmp.wrapT = this.wrapT;
tmp.magFilter = this.magFilter;
tmp.minFilter = this.minFilter;
tmp.offset.copy( this.offset );
tmp.repeat.copy( this.repeat );
tmp.format = this.format;
tmp.type = this.type;
tmp.depthBuffer = this.depthBuffer;
tmp.stencilBuffer = this.stencilBuffer;
return tmp;
};
src/renderers/WebGLRenderer.js
浏览文件 @ 29a54796
此差异已折叠。
src/renderers/WebGLShaders.js
浏览文件 @ 29a54796
......@@ -1428,7 +1428,7 @@ THREE.ShaderLib = {
"#endif",
"vViewPosition = cameraPosition - mPosition.xyz;",
"vViewPosition = -mvPosition.xyz;",
"vec3 transformedNormal = normalize( normalMatrix * normal );",
"vNormal = transformedNormal;",
......
src/textures/DataTexture.js
浏览文件 @ 29a54796
......@@ -15,17 +15,13 @@ THREE.DataTexture = function ( data, width, height, format, mapping, wrapS, wrap
THREE.DataTexture.prototype = new THREE.Texture();
THREE.DataTexture.prototype.constructor = THREE.DataTexture;
THREE.DataTexture.prototype = {
THREE.DataTexture.prototype.clone = function () {
clone: function () {
var clonedTexture = new THREE.DataTexture( this.data.slice( 0 ), this.mapping, this.wrapS, this.wrapT, this.magFilter, this.minFilter );
var clonedTexture = new THREE.DataTexture( this.data.slice( 0 ), this.mapping, this.wrapS, this.wrapT, this.magFilter, this.minFilter );
clonedTexture.offset.copy( this.offset );
clonedTexture.repeat.copy( this.repeat );
clonedTexture.offset.copy( this.offset );
clonedTexture.repeat.copy( this.repeat );
return clonedTexture;
}
return clonedTexture;
};
utils/build.py
浏览文件 @ 29a54796
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或