mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 21:15:56 +10:00
alteredq
bb332e5fcd
Plus some more Loader changes: - fixed diffuse color and opacity being skipped when diffuse texture is present in JSON - more proper handling of Phong materials (now use ambient / diffuse / specular / shininess from JSON) - added handling of wrap / offset / repeat parameters for all textures Fixed broken multiple lights indices in new normal map shader and changed displacement scale and bias to saner values. Fixed broken postprocessing and Earth examples (were not yet translated to use new normal map shader).
317 lines
9.2 KiB
HTML
317 lines
9.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - postprocessing</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="../build/Three.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>
|
|
|
|
<!-- 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 ( ! Detector.webgl ) 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;
|
|
|
|
var delta = 0.01;
|
|
|
|
init();
|
|
animate();
|
|
|
|
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 );
|
|
|
|
var pars1 = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat },
|
|
pars2 = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
|
|
rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars1 );
|
|
rtTexture2 = new THREE.WebGLRenderTarget( 256, 512, pars2 );
|
|
rtTexture3 = new THREE.WebGLRenderTarget( 512, 256, pars2 );
|
|
|
|
materialColor = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: { time: { type: "f", value: 0.0 } },
|
|
vertexShader: getText( 'vs-generic' ),
|
|
fragmentShader: getText( 'fs-colors' ),
|
|
depthTest: false
|
|
|
|
} );
|
|
|
|
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 = 0.4;
|
|
|
|
materialScreen = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: screen_uniforms,
|
|
vertexShader: screen_shader.vertexShader,
|
|
fragmentShader: screen_shader.fragmentShader,
|
|
blending: THREE.AdditiveBlending,
|
|
transparent: true
|
|
|
|
} );
|
|
|
|
var film_shader = THREE.ShaderUtils.lib["film"];
|
|
var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
|
|
|
|
film_uniforms["tDiffuse"].texture = rtTexture1;
|
|
film_uniforms["nIntensity"].value = 0.25;
|
|
film_uniforms["sIntensity"].value = 0.5;
|
|
|
|
materialFilm = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: film_uniforms,
|
|
vertexShader: film_shader.vertexShader,
|
|
fragmentShader: film_shader.fragmentShader
|
|
|
|
} );
|
|
|
|
var increment = 0.001953125;
|
|
|
|
blurx = new THREE.Vector2( increment, 0.0 ),
|
|
blury = new THREE.Vector2( 0.0, increment );
|
|
|
|
var convolution_shader = THREE.ShaderUtils.lib["convolution"];
|
|
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
|
|
|
|
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 );
|
|
|
|
quadBG = new THREE.Mesh( plane, materialColor );
|
|
quadBG.position.z = -500;
|
|
sceneBG.addObject( quadBG );
|
|
|
|
loader = new THREE.JSONLoader( true );
|
|
document.body.appendChild( loader.statusDomElement );
|
|
loader.load( { 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( { antialias: false } );
|
|
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 = THREE.ShaderUtils.lib[ "normal" ];
|
|
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
|
|
|
|
uniforms[ "tNormal" ].texture = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
|
|
uniforms[ "uNormalScale" ].value = - 0.75;
|
|
|
|
uniforms[ "tDiffuse" ].texture = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" );
|
|
|
|
uniforms[ "enableAO" ].value = false;
|
|
uniforms[ "enableDiffuse" ].value = true;
|
|
|
|
uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
|
|
uniforms[ "uSpecularColor" ].value.setHex( specular );
|
|
uniforms[ "uAmbientColor" ].value.setHex( ambient );
|
|
|
|
uniforms[ "uShininess" ].value = shininess;
|
|
|
|
var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
|
|
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";
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
var time = new Date().getTime() * 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, true );
|
|
|
|
// model
|
|
|
|
renderer.render( sceneModel, cameraPerspective, rtTexture1, false );
|
|
|
|
// 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, true );
|
|
|
|
// 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, true );
|
|
|
|
// 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 );
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|