mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 21:15:56 +10:00
alteredq
ad51a48fcd
This is to be able to control depth buffer writing / testing on per geometry chunk level (before it was possible just to hack it on per scene level via exposed GL context).
Disabling depth test is useful for example for additively blended particles, handling of transparency or for having background textured quad.
Another option would be to have it on per object level, but then this could prevent different handling of objects with both transparent and opaque parts.
Also in this commit:
- more progress towards mesh vertex colors
- less matrix multiplications in render call
- fixed ugly bug in doubleSided / flipSided handling
- cleanup of materials
- added a lot of missing stuff in debug strings and parameters handlers
- normal and depth materials now have opacity parameter
- wrote comments for non-obvious things
356 lines
11 KiB
HTML
356 lines
11 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - postprocessing - webgl</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
color: #000;
|
|
font-family:Monospace;
|
|
font-size:13px;
|
|
text-align:center;
|
|
font-weight: bold;
|
|
|
|
background-color: #fff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#info {
|
|
color:#000;
|
|
position: absolute;
|
|
top: 0px; width: 100%;
|
|
padding: 5px;
|
|
|
|
}
|
|
|
|
#oldie {
|
|
font-family:monospace;
|
|
font-size:13px;
|
|
|
|
text-align:center;
|
|
background:#eee;
|
|
color:#000;
|
|
padding:1em;
|
|
|
|
width:475px;
|
|
margin:5em auto 0;
|
|
|
|
display:none;
|
|
}
|
|
|
|
a { color: red; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="container"></div>
|
|
<div id="info">
|
|
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl postprocessing example -
|
|
<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head
|
|
</div>
|
|
|
|
<center>
|
|
<div id="oldie">
|
|
Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
|
|
and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
|
|
<br/>
|
|
Please try in
|
|
<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
|
|
<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
|
|
<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
|
|
</div>
|
|
</center>
|
|
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
|
|
|
|
<!-- Time modulated procedural color fragment shader -->
|
|
<script id="fs-colors" type="x-shader/x-fragment">
|
|
varying vec2 vUv;
|
|
uniform float time;
|
|
|
|
void main(void)
|
|
{
|
|
gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
|
|
}
|
|
</script>
|
|
|
|
<!-- Generic vertex shader -->
|
|
<script id="vs-generic" type="x-shader/x-vertex">
|
|
varying vec2 vUv;
|
|
|
|
void main()
|
|
{
|
|
vUv = vec2( uv.x, 1.0 - uv.y );
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
}
|
|
</script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
if ( !is_browser_compatible() ) {
|
|
|
|
document.getElementById( "oldie" ).style.display = "block";
|
|
|
|
}
|
|
|
|
var container, stats;
|
|
|
|
var cameraOrtho, cameraPerspective, sceneModel, sceneScreen, sceneBG, renderer, mesh, directionalLight;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
var rtTexture, materialColor, materialScreen, materialFilm, materialConvolution, blurx, blury, quadBG, quadScreen;
|
|
|
|
init();
|
|
setInterval( loop, 1000 / 60 );
|
|
|
|
function init() {
|
|
|
|
container = document.getElementById( 'container' );
|
|
|
|
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;
|
|
|
|
cameraPerspective = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
cameraPerspective.position.z = 900;
|
|
|
|
sceneModel = new THREE.Scene();
|
|
sceneScreen = new THREE.Scene();
|
|
sceneBG = new THREE.Scene();
|
|
|
|
directionalLight = new THREE.DirectionalLight( 0xffffff );
|
|
directionalLight.position.x = 0;
|
|
directionalLight.position.y = 0;
|
|
directionalLight.position.z = 1;
|
|
directionalLight.position.normalize();
|
|
sceneModel.addLight( directionalLight );
|
|
|
|
rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
|
|
rtTexture2 = new THREE.RenderTarget( 256, 512, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
|
|
rtTexture3 = new THREE.RenderTarget( 512, 256, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
|
|
|
|
materialColor = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: { time: { type: "f", value: 0.0 } },
|
|
vertex_shader: getText( 'vs-generic' ),
|
|
fragment_shader: getText( 'fs-colors' ),
|
|
depth_test: false
|
|
|
|
} );
|
|
|
|
var screen_shader = ShaderUtils.lib["screen"];
|
|
var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
|
|
|
|
screen_uniforms["tDiffuse"].texture = rtTexture1;
|
|
screen_uniforms["opacity"].value = 0.4;
|
|
|
|
materialScreen = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: screen_uniforms,
|
|
vertex_shader: screen_shader.vertex_shader,
|
|
fragment_shader: screen_shader.fragment_shader,
|
|
blending: THREE.AdditiveBlending
|
|
|
|
} );
|
|
|
|
var film_shader = ShaderUtils.lib["film"];
|
|
var film_uniforms = Uniforms.clone( film_shader.uniforms );
|
|
|
|
film_uniforms["tDiffuse"].texture = rtTexture1;
|
|
|
|
materialFilm = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: film_uniforms,
|
|
vertex_shader: film_shader.vertex_shader,
|
|
fragment_shader: film_shader.fragment_shader
|
|
|
|
} );
|
|
|
|
|
|
var increment = 0.001953125;
|
|
|
|
blurx = new THREE.Vector2( increment, 0.0 ),
|
|
blury = new THREE.Vector2( 0.0, increment );
|
|
|
|
var convolution_shader = ShaderUtils.lib["convolution"];
|
|
var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
|
|
|
|
convolution_uniforms["tDiffuse"].texture = rtTexture1;
|
|
convolution_uniforms["uImageIncrement"].value = blurx;
|
|
convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
|
|
|
|
materialConvolution = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: convolution_uniforms,
|
|
vertex_shader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertex_shader,
|
|
fragment_shader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragment_shader
|
|
|
|
} );
|
|
|
|
var plane = new Plane( window.innerWidth, window.innerHeight );
|
|
|
|
quadBG = new THREE.Mesh( plane, materialColor );
|
|
quadBG.position.z = -500;
|
|
sceneBG.addObject( quadBG );
|
|
|
|
loader = new THREE.Loader( true );
|
|
document.body.appendChild( loader.statusDomElement );
|
|
loader.loadAscii( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneModel, 100 ) } } );
|
|
|
|
quadScreen = new THREE.Mesh( plane, materialConvolution );
|
|
quadScreen.position.z = -100;
|
|
sceneScreen.addObject( quadScreen );
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
renderer.autoClear = false;
|
|
container.appendChild( renderer.domElement );
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
//container.appendChild( stats.domElement );
|
|
|
|
}
|
|
|
|
function getText( id ) {
|
|
|
|
return document.getElementById( id ).textContent;
|
|
}
|
|
|
|
function createMesh( geometry, scene, scale ) {
|
|
|
|
geometry.computeTangents();
|
|
|
|
var ambient = 0x444444, diffuse = 0x888888, specular = 0x080810, shininess = 2;
|
|
|
|
var shader = ShaderUtils.lib[ "normal" ];
|
|
var uniforms = Uniforms.clone( shader.uniforms );
|
|
|
|
uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
|
|
uniforms[ "uNormalScale" ].value = - 0.75;
|
|
|
|
uniforms[ "tDiffuse" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" );
|
|
|
|
uniforms[ "enableAO" ].value = false;
|
|
uniforms[ "enableDiffuse" ].value = true;
|
|
|
|
uniforms[ "uPointLightPos" ].value = new THREE.Vector3(0,0,0);
|
|
uniforms[ "uPointLightColor" ].value = new THREE.Color(1,0,0);
|
|
|
|
uniforms[ "uDirLightPos" ].value = directionalLight.position;
|
|
uniforms[ "uDirLightColor" ].value = directionalLight.color;
|
|
|
|
uniforms[ "uAmbientLightColor" ].value = new THREE.Color(0,0,0);
|
|
|
|
uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
|
|
uniforms[ "uSpecularColor" ].value.setHex( specular );
|
|
uniforms[ "uAmbientColor" ].value.setHex( ambient );
|
|
|
|
uniforms[ "uShininess" ].value = shininess;
|
|
|
|
var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
|
|
var mat2 = new THREE.MeshShaderMaterial( parameters );
|
|
|
|
mesh = new THREE.Mesh( geometry, mat2 );
|
|
mesh.position.x = 0;
|
|
mesh.position.y = -50;
|
|
mesh.position.z = 0;
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
|
|
mesh.updateMatrix();
|
|
scene.addObject( mesh );
|
|
|
|
loader.statusDomElement.style.display = "none";
|
|
|
|
}
|
|
|
|
var delta = 0.01;
|
|
var start = 0;
|
|
|
|
function loop() {
|
|
|
|
if ( ! start ) start = new Date().getTime();
|
|
var time = ( new Date().getTime() - start ) * 0.0004;
|
|
|
|
if ( mesh ) {
|
|
|
|
mesh.rotation.y = -time;
|
|
|
|
}
|
|
|
|
if ( materialColor.uniforms.time.value > 1 || materialColor.uniforms.time.value < 0 ) {
|
|
|
|
delta *= -1;
|
|
|
|
}
|
|
|
|
materialColor.uniforms.time.value += delta/2;
|
|
materialFilm.uniforms.time.value += delta;
|
|
|
|
renderer.clear();
|
|
|
|
// Render scene into texture
|
|
|
|
// background
|
|
|
|
renderer.render( sceneBG, cameraOrtho, rtTexture1 );
|
|
|
|
// model
|
|
|
|
renderer.render( sceneModel, cameraPerspective, 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 into texture
|
|
|
|
quadScreen.materials = [ materialScreen ];
|
|
|
|
materialScreen.uniforms.tDiffuse.texture = rtTexture3;
|
|
materialScreen.uniforms.opacity.value = 1.0;
|
|
renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
|
|
|
|
// Render final scene to the screen with film shader
|
|
|
|
materialFilm.uniforms.tDiffuse.texture = rtTexture1;
|
|
quadScreen.materials = [ materialFilm ];
|
|
renderer.render( sceneScreen, cameraOrtho );
|
|
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function is_browser_compatible() {
|
|
|
|
// WebGL support
|
|
|
|
try { var test = new Float32Array(1); } catch(e) { return false; }
|
|
|
|
// Web workers
|
|
|
|
return !!window.Worker;
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|