提交 7207a65a 编写于 作者: M Mr.doob

WebGLRenderer: Refactored plugins.

上级 68edabb9
......@@ -129,18 +129,6 @@
<div>Default is true. If set, then Cubemaps are scaled, when they are bigger than the maximum size, to make sure that they aren't bigger than the maximum size.</div>
<h3>[property:Boolean renderPluginsPre]</h3>
<div>An array with render plugins to be applied before rendering.</div>
<div>Default is an empty array, or [].</div>
<h3>[property:Boolean renderPluginsPost]</h3>
<div>An array with render plugins to be applied after rendering.</div>
<div>Default is an empty array, or [].</div>
<h3>[property:Object info]</h3>
<div>An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:</div>
......@@ -220,12 +208,6 @@
<div>Tells the renderer to clear its color, depth or stencil drawing buffer(s).</div>
<div>Arguments default to true.</div>
<h3>[method:todo addPostPlugin]( plugin )</h3>
<div>Initialises the postprocessing plugin, and adds it to the renderPluginsPost array.</div>
<h3>[method:todo addPrePlugin]( plugin )</h3>
<div>Initialises the preprocessing plugin, and adds it to the renderPluginsPre array.</div>
<h3>[method:todo updateShadowMap]( [page:Scene scene], [page:Camera camera] )</h3>
<div>scene — an instance of [page:Scene]<br />
camera — an instance of [page:Camera]</div>
......@@ -238,8 +220,8 @@
shading — an instance of Material<br />
</div>
<div>
Render an immediate buffer. Gets called by renderImmediateObject.
</div>
Render an immediate buffer. Gets called by renderImmediateObject.
</div>
<h3>[method:todo renderBufferDirect]( [page:Camera camera], [page:Array lights], [page:Fog fog], [page:Material material], [page:Object geometryGroup], [page:Object3D object] )</h3>
......@@ -253,8 +235,8 @@
<h3>[method:todo render]( [page:Scene scene], [page:Camera camera], [page:WebGLRenderTarget renderTarget], [page:Boolean forceClear] )</h3>
<div>Render a scene using a camera.</div>
<div>The render is done to the renderTarget (if specified) or to the canvas as usual.</div>
<div>If forceClear is true, the depth, stencil and color buffers will be cleared before rendering even if the renderer's autoClear property is false.</div>
<div>Even with forceClear set to true you can prevent certain buffers being cleared by setting either the .autoClearColor, .autoClearStencil or .autoClearDepth properties to false.</div>
<div>If forceClear is true, the depth, stencil and color buffers will be cleared before rendering even if the renderer's autoClear property is false.</div>
<div>Even with forceClear set to true you can prevent certain buffers being cleared by setting either the .autoClearColor, .autoClearStencil or .autoClearDepth properties to false.</div>
<h3>[method:todo renderImmediateObject]( camera, lights, fog, material, object )</h3>
<div>Renders an immediate Object using a camera.</div>
......
......@@ -251,7 +251,6 @@
"webgl_performance_doublesided",
"webgl_performance_static",
"webgl_postprocessing",
"webgl_postprocessing2",
"webgl_postprocessing_advanced",
"webgl_postprocessing_dof",
"webgl_postprocessing_dof2",
......
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - postprocessing</title>
<meta charset="utf-8">
<style>
body {
margin: 0px;
background-color: #ffffff;
overflow: hidden;
}
div {
position: absolute;
z-index: 10;
color: #fff;
font-family: monospace;
text-align: center;
margin: 10px;
width: 100%;
}
label, input {
cursor: pointer;
}
</style>
</head>
<body>
<script src="../build/three.min.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/SSAOShader.js"></script>
<script src="js/shaders/DotScreenShader.js"></script>
<script src="js/shaders/RGBShiftShader.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<div>
<label for="ssao">Ambient Occlusion:</label><input id="ssao" checked type="checkbox" onchange="updateOptions()"/><br />
<label for="dotScreen">Dot Screen:</label><input id="dotScreen" type="checkbox" onchange="updateOptions()"/><br />
<label for="rgbShift">RGB Shift:</label><input id="rgbShift" type="checkbox" onchange="updateOptions()" /><br />
</div>
<script>
var camera, scene, renderer, composer;
var object, light;
var depthScale = 0.5;
var depthPassPlugin, depthTarget;
var ssaoEffect, dotScreenEffect, rgbShiftEffect;
init();
animate();
function updateOptions() {
ssaoEffect.enabled = document.getElementById('ssao').checked;
dotScreenEffect.enabled = document.getElementById('dotScreen').checked;
rgbShiftEffect.enabled = document.getElementById('rgbShift').checked;
}
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xf0f0f0 );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
object = new THREE.Object3D();
scene.add( object );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
for ( var i = 0; i < 100; i ++ ) {
var material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random(), shading: THREE.FlatShading } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
mesh.position.multiplyScalar( Math.random() * 400 );
mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
object.add( mesh );
}
light = new THREE.DirectionalLight( 0xffffff, 0.5 );
light.position.set( - 1, - 1, - 1 );
scene.add( light );
light = new THREE.DirectionalLight( 0xffffff, 1.5 );
light.position.set( 1, 1, 1 );
scene.add( light );
// postprocessing
composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );
depthTarget = new THREE.WebGLRenderTarget( window.innerWidth * depthScale, window.innerHeight * depthScale, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter } );
ssaoEffect = new THREE.ShaderPass( THREE.SSAOShader );
ssaoEffect.uniforms[ 'tDepth' ].value = depthTarget;
ssaoEffect.uniforms[ 'size' ].value.set( window.innerWidth * depthScale, window.innerHeight * depthScale );
ssaoEffect.uniforms[ 'cameraNear' ].value = camera.near;
ssaoEffect.uniforms[ 'cameraFar' ].value = camera.far;
composer.addPass( ssaoEffect );
dotScreenEffect = new THREE.ShaderPass( THREE.DotScreenShader );
dotScreenEffect.uniforms[ 'scale' ].value = 4;
composer.addPass( dotScreenEffect );
rgbShiftEffect = new THREE.ShaderPass( THREE.RGBShiftShader );
rgbShiftEffect.uniforms[ 'amount' ].value = 0.0015;
composer.addPass( rgbShiftEffect );
var effect = new THREE.ShaderPass( THREE.CopyShader);
effect.renderToScreen = true;
composer.addPass( effect );
//
// depth pass
depthPassPlugin = new THREE.DepthPassPlugin();
depthPassPlugin.renderTarget = depthTarget;
renderer.addPrePlugin( depthPassPlugin );
//
window.addEventListener( 'resize', onWindowResize, false );
updateOptions();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
depthTarget = new THREE.WebGLRenderTarget( window.innerWidth * depthScale, window.innerHeight * depthScale, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter } );
depthPassPlugin.renderTarget = depthTarget;
ssaoEffect.uniforms[ 'size' ].value.set( window.innerWidth * depthScale, window.innerHeight * depthScale );
ssaoEffect.uniforms[ 'tDepth' ].value = depthTarget;
}
function animate() {
requestAnimationFrame( animate );
var time = Date.now();
object.rotation.x = time * 0.0002;
object.rotation.y = time * 0.0001;
for ( var i = 0, l = object.children.length; i < l; i ++ ) {
var child = object.children[ i ];
var scale = Math.sin( child.position.x + time * 0.0005 ) * 50 + 50;
child.scale.set( scale, scale, scale );
}
depthPassPlugin.enabled = true;
renderer.autoClear = false;
renderer.render( scene, camera );
// renderer.render( scene, camera, depthTarget, true );
depthPassPlugin.enabled = false;
//
composer.render();
}
</script>
</body>
</html>
/**
* @author mikael emtinger / http://gomo.se/
*/
THREE.ShaderFlares = {
'lensFlareVertexTexture': {
vertexShader: [
"uniform lowp int renderType;",
"uniform vec3 screenPosition;",
"uniform vec2 scale;",
"uniform float rotation;",
"uniform sampler2D occlusionMap;",
"attribute vec2 position;",
"attribute vec2 uv;",
"varying vec2 vUV;",
"varying float vVisibility;",
"void main() {",
"vUV = uv;",
"vec2 pos = position;",
"if( renderType == 2 ) {",
"vec4 visibility = texture2D( occlusionMap, vec2( 0.1, 0.1 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.5, 0.1 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.9, 0.1 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.9, 0.5 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.9, 0.9 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.5, 0.9 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.1, 0.9 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.1, 0.5 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.5, 0.5 ) );",
"vVisibility = visibility.r / 9.0;",
"vVisibility *= 1.0 - visibility.g / 9.0;",
"vVisibility *= visibility.b / 9.0;",
"vVisibility *= 1.0 - visibility.a / 9.0;",
"pos.x = cos( rotation ) * position.x - sin( rotation ) * position.y;",
"pos.y = sin( rotation ) * position.x + cos( rotation ) * position.y;",
"}",
"gl_Position = vec4( ( pos * scale + screenPosition.xy ).xy, screenPosition.z, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"uniform lowp int renderType;",
"uniform sampler2D map;",
"uniform float opacity;",
"uniform vec3 color;",
"varying vec2 vUV;",
"varying float vVisibility;",
"void main() {",
// pink square
"if( renderType == 0 ) {",
"gl_FragColor = vec4( 1.0, 0.0, 1.0, 0.0 );",
// restore
"} else if( renderType == 1 ) {",
"gl_FragColor = texture2D( map, vUV );",
// flare
"} else {",
"vec4 texture = texture2D( map, vUV );",
"texture.a *= opacity * vVisibility;",
"gl_FragColor = texture;",
"gl_FragColor.rgb *= color;",
"}",
"}"
].join( "\n" )
},
'lensFlare': {
vertexShader: [
"uniform lowp int renderType;",
"uniform vec3 screenPosition;",
"uniform vec2 scale;",
"uniform float rotation;",
"attribute vec2 position;",
"attribute vec2 uv;",
"varying vec2 vUV;",
"void main() {",
"vUV = uv;",
"vec2 pos = position;",
"if( renderType == 2 ) {",
"pos.x = cos( rotation ) * position.x - sin( rotation ) * position.y;",
"pos.y = sin( rotation ) * position.x + cos( rotation ) * position.y;",
"}",
"gl_Position = vec4( ( pos * scale + screenPosition.xy ).xy, screenPosition.z, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"precision mediump float;",
"uniform lowp int renderType;",
"uniform sampler2D map;",
"uniform sampler2D occlusionMap;",
"uniform float opacity;",
"uniform vec3 color;",
"varying vec2 vUV;",
"void main() {",
// pink square
"if( renderType == 0 ) {",
"gl_FragColor = vec4( texture2D( map, vUV ).rgb, 0.0 );",
// restore
"} else if( renderType == 1 ) {",
"gl_FragColor = texture2D( map, vUV );",
// flare
"} else {",
"float visibility = texture2D( occlusionMap, vec2( 0.5, 0.1 ) ).a;",
"visibility += texture2D( occlusionMap, vec2( 0.9, 0.5 ) ).a;",
"visibility += texture2D( occlusionMap, vec2( 0.5, 0.9 ) ).a;",
"visibility += texture2D( occlusionMap, vec2( 0.1, 0.5 ) ).a;",
"visibility = ( 1.0 - visibility / 4.0 );",
"vec4 texture = texture2D( map, vUV );",
"texture.a *= opacity * visibility;",
"gl_FragColor = texture;",
"gl_FragColor.rgb *= color;",
"}",
"}"
].join( "\n" )
}
};
......@@ -35,6 +35,9 @@ THREE.WebGLRenderer = function ( parameters ) {
var opaqueObjects = [];
var transparentObjects = [];
var sprites = [];
var lensFlares = [];
// public properties
this.domElement = _canvas;
......@@ -79,11 +82,6 @@ THREE.WebGLRenderer = function ( parameters ) {
this.autoScaleCubemaps = true;
// custom render plugins
this.renderPluginsPre = [];
this.renderPluginsPost = [];
// info
this.info = {
......@@ -352,6 +350,13 @@ THREE.WebGLRenderer = function ( parameters ) {
}
// Plugins
var shadowMapPlugin = new THREE.ShadowMapPlugin( this, lights, _webglObjects, _webglObjectsImmediate );
var spritePlugin = new THREE.SpritePlugin( this, sprites );
var lensFlarePlugin = new THREE.LensFlarePlugin( this, lensFlares );
// API
this.getContext = function () {
......@@ -536,24 +541,6 @@ THREE.WebGLRenderer = function ( parameters ) {
};
// Plugins
this.addPostPlugin = function ( plugin ) {
plugin.init( this, lights, _webglObjects, _webglObjectsImmediate );
this.renderPluginsPost.push( plugin );
};
this.addPrePlugin = function ( plugin ) {
plugin.init( this, lights, _webglObjects, _webglObjectsImmediate );
this.renderPluginsPre.push( plugin );
};
// Reset
this.resetGLState = function () {
......@@ -587,7 +574,7 @@ THREE.WebGLRenderer = function ( parameters ) {
_oldDoubleSided = - 1;
_oldFlipSided = - 1;
this.shadowMapPlugin.update( scene, camera );
shadowMapPlugin.update( scene, camera );
};
......@@ -3394,6 +3381,9 @@ THREE.WebGLRenderer = function ( parameters ) {
opaqueObjects.length = 0;
transparentObjects.length = 0;
sprites.length = 0;
lensFlares.length = 0;
projectObject( scene, scene );
if ( _this.sortObjects === true ) {
......@@ -3405,7 +3395,7 @@ THREE.WebGLRenderer = function ( parameters ) {
// custom render plugins (pre pass)
renderPlugins( this.renderPluginsPre, scene, camera );
shadowMapPlugin.render( scene, camera );
//
......@@ -3472,8 +3462,8 @@ THREE.WebGLRenderer = function ( parameters ) {
// custom render plugins (post pass)
renderPlugins( this.renderPluginsPost, scene, camera );
spritePlugin.render( scene, camera );
lensFlarePlugin.render( scene, camera, _currentWidth, _currentHeight );
// Generate mipmap if we're using any kind of mipmap filtering
......@@ -3510,32 +3500,44 @@ THREE.WebGLRenderer = function ( parameters ) {
initObject( object, scene );
var webglObjects = _webglObjects[ object.id ];
if ( object instanceof THREE.Sprite ) {
if ( webglObjects && ( object.frustumCulled === false || _frustum.intersectsObject( object ) === true ) ) {
sprites.push( object );
updateObject( object, scene );
} else if ( object instanceof THREE.LensFlare ) {
for ( var i = 0, l = webglObjects.length; i < l; i ++ ) {
lensFlares.push( object );
var webglObject = webglObjects[i];
} else {
unrollBufferMaterial( webglObject );
var webglObjects = _webglObjects[ object.id ];
webglObject.render = true;
if ( webglObjects && ( object.frustumCulled === false || _frustum.intersectsObject( object ) === true ) ) {
if ( _this.sortObjects === true ) {
updateObject( object, scene );
if ( object.renderDepth !== null ) {
for ( var i = 0, l = webglObjects.length; i < l; i ++ ) {
webglObject.z = object.renderDepth;
var webglObject = webglObjects[i];
} else {
unrollBufferMaterial( webglObject );
webglObject.render = true;
if ( _this.sortObjects === true ) {
if ( object.renderDepth !== null ) {
webglObject.z = object.renderDepth;
} else {
_vector3.setFromMatrixPosition( object.matrixWorld );
_vector3.applyProjection( _projScreenMatrix );
_vector3.setFromMatrixPosition( object.matrixWorld );
_vector3.applyProjection( _projScreenMatrix );
webglObject.z = _vector3.z;
webglObject.z = _vector3.z;
}
}
......@@ -3555,18 +3557,6 @@ THREE.WebGLRenderer = function ( parameters ) {
}
function renderPlugins( plugins, scene, camera ) {
if ( plugins.length === 0 ) return;
for ( var i = 0, il = plugins.length; i < il; i ++ ) {
plugins[ i ].render( scene, camera, _currentWidth, _currentHeight );
}
}
function renderObjects( renderList, camera, lights, fog, useBlending, overrideMaterial ) {
var material;
......@@ -4090,7 +4080,7 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
// Objects updates - custom attributes check
......@@ -4104,7 +4094,7 @@ THREE.WebGLRenderer = function ( parameters ) {
return false;
};
}
function clearCustomAttributes( material ) {
......@@ -4114,7 +4104,7 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
// Objects removal
......@@ -4138,7 +4128,7 @@ THREE.WebGLRenderer = function ( parameters ) {
delete object.__webglActive;
};
}
function removeInstances( objlist, object ) {
......@@ -4152,16 +4142,10 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
// Materials
this.initMaterial = function () {
console.warn( 'THREE.WebGLRenderer: .initMaterial() has been removed.' );
};
function initMaterial( material, lights, fog, object ) {
material.addEventListener( 'dispose', onMaterialDispose );
......@@ -4398,7 +4382,7 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
function setProgram( camera, lights, fog, material, object ) {
......@@ -4643,7 +4627,7 @@ THREE.WebGLRenderer = function ( parameters ) {
return program;
};
}
// Uniforms (refresh uniforms objects)
......@@ -4738,14 +4722,14 @@ THREE.WebGLRenderer = function ( parameters ) {
uniforms.combine.value = material.combine;
uniforms.useRefract.value = material.envMap && material.envMap.mapping instanceof THREE.CubeRefractionMapping;
};
}
function refreshUniformsLine ( uniforms, material ) {
uniforms.diffuse.value = material.color;
uniforms.opacity.value = material.opacity;
};
}
function refreshUniformsDash ( uniforms, material ) {
......@@ -4753,7 +4737,7 @@ THREE.WebGLRenderer = function ( parameters ) {
uniforms.totalSize.value = material.dashSize + material.gapSize;
uniforms.scale.value = material.scale;
};
}
function refreshUniformsParticle ( uniforms, material ) {
......@@ -4764,7 +4748,7 @@ THREE.WebGLRenderer = function ( parameters ) {
uniforms.map.value = material.map;
};
}
function refreshUniformsFog ( uniforms, fog ) {
......@@ -4781,7 +4765,7 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
function refreshUniformsPhong ( uniforms, material ) {
......@@ -4807,7 +4791,7 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
function refreshUniformsLambert ( uniforms, material ) {
......@@ -4829,7 +4813,7 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
function refreshUniformsLights ( uniforms, lights ) {
......@@ -4853,7 +4837,7 @@ THREE.WebGLRenderer = function ( parameters ) {
uniforms.hemisphereLightGroundColor.value = lights.hemi.groundColors;
uniforms.hemisphereLightDirection.value = lights.hemi.positions;
};
}
// If uniforms are marked as clean, they don't need to be loaded to the GPU.
......@@ -4879,7 +4863,7 @@ THREE.WebGLRenderer = function ( parameters ) {
uniforms.hemisphereLightGroundColor.needsUpdate = boolean;
uniforms.hemisphereLightDirection.needsUpdate = boolean;
};
}
function refreshUniformsShadow ( uniforms, lights ) {
......@@ -4911,7 +4895,7 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
// Uniforms (load to GPU)
......@@ -4925,7 +4909,7 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
function getTextureUnit() {
......@@ -4941,7 +4925,7 @@ THREE.WebGLRenderer = function ( parameters ) {
return textureUnit;
};
}
function loadUniformsGeneric ( uniforms ) {
......@@ -5277,14 +5261,14 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
function setupMatrices ( object, camera ) {
object._modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
object._normalMatrix.getNormalMatrix( object._modelViewMatrix );
};
}
//
......@@ -5294,7 +5278,7 @@ THREE.WebGLRenderer = function ( parameters ) {
array[ offset + 1 ] = color.g * color.g * intensitySq;
array[ offset + 2 ] = color.b * color.b * intensitySq;
};
}
function setColorLinear( array, offset, color, intensity ) {
......@@ -5302,7 +5286,7 @@ THREE.WebGLRenderer = function ( parameters ) {
array[ offset + 1 ] = color.g * intensity;
array[ offset + 2 ] = color.b * intensity;
};
}
function setupLights ( lights ) {
......@@ -5528,7 +5512,7 @@ THREE.WebGLRenderer = function ( parameters ) {
zlights.ambient[ 1 ] = g;
zlights.ambient[ 2 ] = b;
};
}
// GL state setting
......@@ -5650,7 +5634,7 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
function setPolygonOffset ( polygonoffset, factor, units ) {
......@@ -5679,7 +5663,7 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
this.setBlending = function ( blending, blendEquation, blendSrc, blendDst ) {
......@@ -5791,7 +5775,7 @@ THREE.WebGLRenderer = function ( parameters ) {
}
};
}
this.uploadTexture = function ( texture ) {
......@@ -6459,12 +6443,24 @@ THREE.WebGLRenderer = function ( parameters ) {
}
// default plugins (order is important)
// DEPRECATED
this.initMaterial = function () {
console.warn( 'THREE.WebGLRenderer: .initMaterial() has been removed.' );
};
this.shadowMapPlugin = new THREE.ShadowMapPlugin( this );
this.addPrePlugin( this.shadowMapPlugin );
this.addPrePlugin = function () {
this.addPostPlugin( new THREE.SpritePlugin( this ) );
this.addPostPlugin( new THREE.LensFlarePlugin( this ) );
console.warn( 'THREE.WebGLRenderer: .addPrePlugin() has been removed.' );
};
this.addPostPlugin = function () {
console.warn( 'THREE.WebGLRenderer: .addPostPlugin() has been removed.' );
};
};
......@@ -3,12 +3,10 @@
* @author alteredq / http://alteredqualia.com/
*/
THREE.LensFlarePlugin = function ( renderer ) {
THREE.LensFlarePlugin = function ( renderer, flares ) {
var gl = renderer.context;
var flares = [];
var vertexBuffer, elementBuffer;
var program, attributes, uniforms;
var hasVertexTexture;
......@@ -61,16 +59,194 @@ THREE.LensFlarePlugin = function ( renderer ) {
hasVertexTexture = gl.getParameter( gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS ) > 0;
var shader;
if ( hasVertexTexture ) {
program = createProgram( THREE.ShaderFlares[ "lensFlareVertexTexture" ] );
shader = {
vertexShader: [
"uniform lowp int renderType;",
"uniform vec3 screenPosition;",
"uniform vec2 scale;",
"uniform float rotation;",
"uniform sampler2D occlusionMap;",
"attribute vec2 position;",
"attribute vec2 uv;",
"varying vec2 vUV;",
"varying float vVisibility;",
"void main() {",
"vUV = uv;",
"vec2 pos = position;",
"if( renderType == 2 ) {",
"vec4 visibility = texture2D( occlusionMap, vec2( 0.1, 0.1 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.5, 0.1 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.9, 0.1 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.9, 0.5 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.9, 0.9 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.5, 0.9 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.1, 0.9 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.1, 0.5 ) );",
"visibility += texture2D( occlusionMap, vec2( 0.5, 0.5 ) );",
"vVisibility = visibility.r / 9.0;",
"vVisibility *= 1.0 - visibility.g / 9.0;",
"vVisibility *= visibility.b / 9.0;",
"vVisibility *= 1.0 - visibility.a / 9.0;",
"pos.x = cos( rotation ) * position.x - sin( rotation ) * position.y;",
"pos.y = sin( rotation ) * position.x + cos( rotation ) * position.y;",
"}",
"gl_Position = vec4( ( pos * scale + screenPosition.xy ).xy, screenPosition.z, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"uniform lowp int renderType;",
"uniform sampler2D map;",
"uniform float opacity;",
"uniform vec3 color;",
"varying vec2 vUV;",
"varying float vVisibility;",
"void main() {",
// pink square
"if( renderType == 0 ) {",
"gl_FragColor = vec4( 1.0, 0.0, 1.0, 0.0 );",
// restore
"} else if( renderType == 1 ) {",
"gl_FragColor = texture2D( map, vUV );",
// flare
"} else {",
"vec4 texture = texture2D( map, vUV );",
"texture.a *= opacity * vVisibility;",
"gl_FragColor = texture;",
"gl_FragColor.rgb *= color;",
"}",
"}"
].join( "\n" )
};
} else {
program = createProgram( THREE.ShaderFlares[ "lensFlare" ] );
shader = {
vertexShader: [
"uniform lowp int renderType;",
"uniform vec3 screenPosition;",
"uniform vec2 scale;",
"uniform float rotation;",
"attribute vec2 position;",
"attribute vec2 uv;",
"varying vec2 vUV;",
"void main() {",
"vUV = uv;",
"vec2 pos = position;",
"if( renderType == 2 ) {",
"pos.x = cos( rotation ) * position.x - sin( rotation ) * position.y;",
"pos.y = sin( rotation ) * position.x + cos( rotation ) * position.y;",
"}",
"gl_Position = vec4( ( pos * scale + screenPosition.xy ).xy, screenPosition.z, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"precision mediump float;",
"uniform lowp int renderType;",
"uniform sampler2D map;",
"uniform sampler2D occlusionMap;",
"uniform float opacity;",
"uniform vec3 color;",
"varying vec2 vUV;",
"void main() {",
// pink square
"if( renderType == 0 ) {",
"gl_FragColor = vec4( texture2D( map, vUV ).rgb, 0.0 );",
// restore
"} else if( renderType == 1 ) {",
"gl_FragColor = texture2D( map, vUV );",
// flare
"} else {",
"float visibility = texture2D( occlusionMap, vec2( 0.5, 0.1 ) ).a;",
"visibility += texture2D( occlusionMap, vec2( 0.9, 0.5 ) ).a;",
"visibility += texture2D( occlusionMap, vec2( 0.5, 0.9 ) ).a;",
"visibility += texture2D( occlusionMap, vec2( 0.1, 0.5 ) ).a;",
"visibility = ( 1.0 - visibility / 4.0 );",
"vec4 texture = texture2D( map, vUV );",
"texture.a *= opacity * visibility;",
"gl_FragColor = texture;",
"gl_FragColor.rgb *= color;",
"}",
"}"
].join( "\n" )
};
}
program = createProgram( shader );
attributes = {
vertex: gl.getAttribLocation ( program, "position" ),
uv: gl.getAttribLocation ( program, "uv" )
......@@ -89,8 +265,6 @@ THREE.LensFlarePlugin = function ( renderer ) {
};
this.init = function () {}; // TODO: Remove
/*
* Render lens flares
* Method: renders 16x16 0xff00ff-colored points scattered over the light source area,
......@@ -99,18 +273,6 @@ THREE.LensFlarePlugin = function ( renderer ) {
this.render = function ( scene, camera, viewportWidth, viewportHeight ) {
flares.length = 0;
scene.traverseVisible( function ( child ) {
if ( child instanceof THREE.LensFlare ) {
flares.push( child );
}
} );
if ( flares.length === 0 ) return;
var tempPosition = new THREE.Vector3();
......@@ -302,6 +464,6 @@ THREE.LensFlarePlugin = function ( renderer ) {
return program;
};
}
};
......@@ -2,12 +2,11 @@
* @author alteredq / http://alteredqualia.com/
*/
THREE.ShadowMapPlugin = function () {
THREE.ShadowMapPlugin = function ( _renderer, _lights, _webglObjects, _webglObjectsImmediate ) {
var _gl,
_renderer,
_lights, _webglObjects, _webglObjectsImmediate,
_depthMaterial, _depthMaterialMorph, _depthMaterialSkin, _depthMaterialMorphSkin,
var _gl = _renderer.context;
var _depthMaterial, _depthMaterialMorph, _depthMaterialSkin, _depthMaterialMorphSkin,
_frustum = new THREE.Frustum(),
_projScreenMatrix = new THREE.Matrix4(),
......@@ -19,52 +18,43 @@ THREE.ShadowMapPlugin = function () {
_renderList = [];
this.init = function ( renderer, lights, webglObjects, webglObjectsImmediate ) {
_gl = renderer.context;
_renderer = renderer;
_lights = lights;
_webglObjects = webglObjects;
_webglObjectsImmediate = webglObjectsImmediate;
var depthShader = THREE.ShaderLib[ "depthRGBA" ];
var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );
_depthMaterial = new THREE.ShaderMaterial( {
uniforms: depthUniforms,
vertexShader: depthShader.vertexShader,
fragmentShader: depthShader.fragmentShader
} );
_depthMaterialMorph = new THREE.ShaderMaterial( {
uniforms: depthUniforms,
vertexShader: depthShader.vertexShader,
fragmentShader: depthShader.fragmentShader,
morphTargets: true
} );
_depthMaterialSkin = new THREE.ShaderMaterial( {
uniforms: depthUniforms,
vertexShader: depthShader.vertexShader,
fragmentShader: depthShader.fragmentShader,
skinning: true
} );
_depthMaterialMorphSkin = new THREE.ShaderMaterial( {
uniforms: depthUniforms,
vertexShader: depthShader.vertexShader,
fragmentShader: depthShader.fragmentShader,
morphTargets: true,
skinning: true
} );
_depthMaterial._shadowPass = true;
_depthMaterialMorph._shadowPass = true;
_depthMaterialSkin._shadowPass = true;
_depthMaterialMorphSkin._shadowPass = true;
};
// init
var depthShader = THREE.ShaderLib[ "depthRGBA" ];
var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );
_depthMaterial = new THREE.ShaderMaterial( {
uniforms: depthUniforms,
vertexShader: depthShader.vertexShader,
fragmentShader: depthShader.fragmentShader
} );
_depthMaterialMorph = new THREE.ShaderMaterial( {
uniforms: depthUniforms,
vertexShader: depthShader.vertexShader,
fragmentShader: depthShader.fragmentShader,
morphTargets: true
} );
_depthMaterialSkin = new THREE.ShaderMaterial( {
uniforms: depthUniforms,
vertexShader: depthShader.vertexShader,
fragmentShader: depthShader.fragmentShader,
skinning: true
} );
_depthMaterialMorphSkin = new THREE.ShaderMaterial( {
uniforms: depthUniforms,
vertexShader: depthShader.vertexShader,
fragmentShader: depthShader.fragmentShader,
morphTargets: true,
skinning: true
} );
_depthMaterial._shadowPass = true;
_depthMaterialMorph._shadowPass = true;
_depthMaterialSkin._shadowPass = true;
_depthMaterialMorphSkin._shadowPass = true;
this.render = function ( scene, camera ) {
......@@ -372,7 +362,7 @@ THREE.ShadowMapPlugin = function () {
if ( webglObjects && object.castShadow && (object.frustumCulled === false || _frustum.intersectsObject( object ) === true) ) {
for (var i = 0, l = webglObjects.length; i < l; i ++ ) {
for ( var i = 0, l = webglObjects.length; i < l; i ++ ) {
var webglObject = webglObjects[ i ];
......
......@@ -3,12 +3,10 @@
* @author alteredq / http://alteredqualia.com/
*/
THREE.SpritePlugin = function ( renderer ) {
THREE.SpritePlugin = function ( renderer, sprites ) {
var gl = renderer.context;
var sprites = [];
var vertexBuffer, elementBuffer;
var program, attributes, uniforms;
......@@ -80,21 +78,7 @@ THREE.SpritePlugin = function ( renderer ) {
};
this.init = function () {}; // TODO: Remove
this.render = function ( scene, camera, viewportWidth, viewportHeight ) {
sprites.length = 0;
scene.traverseVisible( function ( child ) {
if ( child instanceof THREE.Sprite ) {
sprites.push( child );
}
} );
this.render = function ( scene, camera ) {
if ( sprites.length === 0 ) return;
......
......@@ -78,6 +78,7 @@
"src/objects/MorphAnimMesh.js",
"src/objects/LOD.js",
"src/objects/Sprite.js",
"src/objects/LensFlare.js",
"src/scenes/Scene.js",
"src/scenes/Fog.js",
"src/scenes/FogExp2.js",
......@@ -142,5 +143,9 @@
"src/renderers/WebGLRenderTargetCube.js",
"src/renderers/webgl/WebGLExtensions.js",
"src/renderers/webgl/WebGLProgram.js",
"src/renderers/webgl/WebGLShader.js"
"src/renderers/webgl/WebGLShader.js",
"src/renderers/webgl/plugins/LensFlarePlugin.js",
"src/renderers/webgl/plugins/ShadowMapPlugin.js",
"src/renderers/webgl/plugins/SpritePlugin.js"
]
......@@ -63,11 +63,5 @@
"src/extras/helpers/VertexTangentsHelper.js",
"src/extras/helpers/WireframeHelper.js",
"src/extras/objects/ImmediateRenderObject.js",
"src/extras/objects/LensFlare.js",
"src/extras/objects/MorphBlendMesh.js",
"src/extras/renderers/plugins/LensFlarePlugin.js",
"src/extras/renderers/plugins/ShadowMapPlugin.js",
"src/extras/renderers/plugins/SpritePlugin.js",
"src/extras/renderers/plugins/DepthPassPlugin.js",
"src/extras/shaders/ShaderFlares.js"
"src/extras/objects/MorphBlendMesh.js"
]
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册