mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-10 21:45:57 +10:00
alteredq
8e2f8c8b13
Created "THREE.Supports" object, which should centralize this stuff. So far it detects <canvas>, WebGL and WebWorkers; later it could detect for example GPU capabilities. Not sure about name or location, but it's pretty tiring go through all examples when something changes, so it should be somewhere in the library. Code duplication is bad: even html snippets with error message should be centralized somewhere, so that when new browsers arrive we wouldn't have to keep changing them in many places.
344 lines
11 KiB
HTML
344 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 ( ! THREE.Supports.webgl ) {
|
|
|
|
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();
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|