mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-10 13:35:56 +10:00
425 lines
13 KiB
HTML
425 lines
13 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>
|
|
|
|
<!-- -----------------------------------------------------------------
|
|
Film grain & scanlines shader
|
|
- ported from HLSL to WebGL / GLSL
|
|
http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
|
|
|
|
// Screen Space Static Postprocessor
|
|
//
|
|
// Produces an analogue noise overlay similar to a film grain / TV static
|
|
//
|
|
// Original implementation and noise algorithm
|
|
// Pat 'Hawthorne' Shearon
|
|
//
|
|
// Optimized scanlines + noise version with intensity scaling
|
|
// Georg 'Leviathan' Steinrohder
|
|
|
|
// This version is provided under a Creative Commons Attribution 3.0 License
|
|
// http://creativecommons.org/licenses/by/3.0/
|
|
----------------------------------------------------------------- -->
|
|
|
|
<!-- Film grain & scanlines fragment shader -->
|
|
<script id="fs-film" type="x-shader/x-fragment">
|
|
varying vec2 vUv;
|
|
uniform sampler2D tDiffuse;
|
|
|
|
// control parameter
|
|
uniform float time;
|
|
|
|
// noise effect intensity value (0 = no effect, 1 = full effect)
|
|
const float fNintensity = 0.35;
|
|
// scanlines effect intensity value (0 = no effect, 1 = full effect)
|
|
const float fSintensity = 0.35;
|
|
// scanlines effect count value (0 = no effect, 4096 = full effect)
|
|
const float fScount = 4096.0;
|
|
|
|
void main(void) {
|
|
// sample the source
|
|
vec4 cTextureScreen = texture2D( tDiffuse, vUv );
|
|
|
|
// make some noise
|
|
float x = vUv.x * vUv.y * time * 1000.0;
|
|
x = mod( x, 13.0 ) * mod( x, 123.0 );
|
|
float dx = mod( x, 0.01 );
|
|
|
|
// add noise
|
|
vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );
|
|
|
|
// get us a sine and cosine
|
|
vec2 sc = vec2( sin(vUv.y * fScount), cos(vUv.y * fScount) );
|
|
|
|
// add scanlines
|
|
cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * fSintensity;
|
|
|
|
// interpolate between source and result by intensity
|
|
cResult = cTextureScreen.rgb + clamp( fNintensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );
|
|
|
|
// convert to grayscale if desired
|
|
cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );
|
|
|
|
gl_FragColor = vec4( cResult, cTextureScreen.a );
|
|
}
|
|
</script>
|
|
|
|
|
|
<!-- Render parameter modulated texture fragment shader -->
|
|
<script id="fs-screen" type="x-shader/x-fragment">
|
|
varying vec2 vUv;
|
|
uniform sampler2D tDiffuse;
|
|
uniform float opacity;
|
|
|
|
void main(void)
|
|
{
|
|
vec4 texel = texture2D( tDiffuse, vUv );
|
|
gl_FragColor = opacity * texel;
|
|
}
|
|
</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' )
|
|
|
|
} );
|
|
|
|
materialScreen = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture1 },
|
|
opacity: { type: "f", value: 0.4 }
|
|
},
|
|
vertex_shader: getText( 'vs-generic' ),
|
|
fragment_shader: getText( 'fs-screen' ),
|
|
blending: THREE.AdditiveBlending
|
|
|
|
} );
|
|
|
|
materialFilm = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture1 },
|
|
time: { type: "f", value: 0.0 }
|
|
},
|
|
vertex_shader: getText( 'vs-generic' ),
|
|
fragment_shader: getText( 'fs-film' )
|
|
|
|
} );
|
|
|
|
var increment = 0.001953125;
|
|
|
|
blurx = new THREE.Vector2( increment, 0.0 ),
|
|
blury = new THREE.Vector2( 0.0, increment );
|
|
|
|
var shader = ShaderUtils.lib["convolution"];
|
|
var uniforms = Uniforms.clone( shader.uniforms );
|
|
|
|
uniforms["tDiffuse"].texture = rtTexture1;
|
|
uniforms["uImageIncrement"].value = blurx;
|
|
uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
|
|
|
|
materialConvolution = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: uniforms,
|
|
vertex_shader: shader.vertex_shader,
|
|
fragment_shader: 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.context.disable( renderer.context.DEPTH_TEST );
|
|
renderer.render( sceneBG, cameraOrtho, rtTexture1 );
|
|
renderer.context.enable( renderer.context.DEPTH_TEST );
|
|
|
|
// 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>
|