mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
Compiled new build.
Renamed examples.
This commit is contained in:
Mr.doob
@@ -0,0 +1,312 @@
|
||||
<!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;
|
||||
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<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.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user