mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-10 05:26:11 +10:00
alteredq
a03f714244
For this had to extend WebGLRenderer a bit:
- MeshShaderMaterial now can take non-specific float array uniforms as "fv1"
(there is already "fv" type for array of 3-item-vectors, which probably should be renamed to "fv3" to be consistent)
- render method has yet another parameter "clear" for clearing newly set framebuffer (defaults to true).
This is a bit hackish but it seems necessary to control this somehow. I didn't manage to replicate
desired behavior just with autoClear.
- another dirty thing is accessing GL context from the application side:
renderer.context.disable( renderer.context.DEPTH_TEST );
This should be refactored somehow, wrapped in some API call.
488 lines
16 KiB
HTML
488 lines
16 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>
|
|
|
|
|
|
<!-- -----------------------------------------------------------------
|
|
Convolution shader
|
|
- ported from o3d sample to WebGL / GLSL
|
|
http://o3d.googlecode.com/svn/trunk/samples/convolution.html
|
|
----------------------------------------------------------------- ->
|
|
|
|
<!-- Convolution fragment shader -->
|
|
<script id="fs-convolution" type="x-shader/x-fragment">
|
|
varying vec2 vUv;
|
|
|
|
uniform sampler2D tDiffuse;
|
|
uniform vec2 uImageIncrement;
|
|
|
|
#define KERNEL_SIZE 25
|
|
uniform float cKernel[KERNEL_SIZE];
|
|
|
|
void main(void) {
|
|
vec2 imageCoord = vUv;
|
|
vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );
|
|
for( int i=0; i<KERNEL_SIZE; ++i ) {
|
|
sum += texture2D( tDiffuse, imageCoord ) * cKernel[i];
|
|
imageCoord += uImageIncrement;
|
|
}
|
|
gl_FragColor = sum;
|
|
}
|
|
</script>
|
|
|
|
<!-- Convolution vertex shader -->
|
|
<script id="vs-convolution" type="x-shader/x-vertex">
|
|
varying vec2 vUv;
|
|
|
|
uniform vec2 uImageIncrement;
|
|
#define KERNEL_SIZE 25.0
|
|
|
|
void main(void) {
|
|
//vUv = vec2( uv.x, 1.0 - uv.y ) - ((KERNEL_SIZE - 1.0) / 2.0) * uImageIncrement;
|
|
vUv = uv - ((KERNEL_SIZE - 1.0) / 2.0) * uImageIncrement;
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
}
|
|
</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, sceneRTT, 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;
|
|
|
|
sceneRTT = 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();
|
|
sceneRTT.addLight( directionalLight );
|
|
|
|
rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
|
|
rtTexture2 = new THREE.RenderTarget( 512, 256, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
|
|
rtTexture3 = new THREE.RenderTarget( 512, 256, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
|
|
|
|
materialColor = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: { time: { type: "f", value: 0.0 } },
|
|
vertex_shader: document.getElementById( 'vs-generic' ).textContent,
|
|
fragment_shader: document.getElementById( 'fs-colors' ).textContent
|
|
|
|
} );
|
|
|
|
materialScreen = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture1 },
|
|
opacity: { type: "f", value: 0.4 }
|
|
},
|
|
vertex_shader: document.getElementById( 'vs-generic' ).textContent,
|
|
fragment_shader: document.getElementById( 'fs-screen' ).textContent,
|
|
blending: THREE.AdditiveBlending
|
|
|
|
} );
|
|
|
|
materialFilm = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture1 },
|
|
time: { type: "f", value: 0.0 }
|
|
},
|
|
vertex_shader: document.getElementById( 'vs-generic' ).textContent,
|
|
fragment_shader: document.getElementById( 'fs-film' ).textContent
|
|
|
|
} );
|
|
|
|
var kernel = buildKernel( 4.0 );
|
|
|
|
blurx = new THREE.Vector2( 0.001953125, 0.0 ),
|
|
blury = new THREE.Vector2( 0.0, 0.001953125 );
|
|
|
|
materialConvolution = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture1 },
|
|
uImageIncrement: { type: "v2", value: blury },
|
|
cKernel: { type: "fv1", value: kernel }
|
|
},
|
|
vertex_shader: document.getElementById( 'vs-convolution' ).textContent,
|
|
fragment_shader: document.getElementById( 'fs-convolution' ).textContent
|
|
|
|
} );
|
|
|
|
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, sceneRTT, 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 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";
|
|
|
|
}
|
|
|
|
/*****************************************************************************************/
|
|
// Convolution
|
|
// - ported from o3d convolution shader sample
|
|
// http://o3d.googlecode.com/svn/trunk/samples/convolution.html
|
|
/*****************************************************************************************/
|
|
|
|
// We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize anyway.
|
|
function gauss( x, sigma ) {
|
|
|
|
return Math.exp( - (x * x) / (2.0 * sigma * sigma) );
|
|
|
|
}
|
|
|
|
function buildKernel( sigma ) {
|
|
|
|
var kMaxKernelSize = 25;
|
|
var kernelSize = 2 * Math.ceil( sigma * 3.0 ) + 1;
|
|
if ( kernelSize > kMaxKernelSize ) kernelSize = kMaxKernelSize;
|
|
var halfWidth = ( kernelSize - 1 ) * 0.5
|
|
|
|
var values = new Array( kernelSize );
|
|
var sum = 0.0;
|
|
for( var i = 0; i < kernelSize; ++i ) {
|
|
|
|
values[ i ] = gauss( i - halfWidth, sigma );
|
|
sum += values[ i ];
|
|
|
|
}
|
|
|
|
// normalize the kernel
|
|
for( var i = 0; i<kernelSize; ++i ) values[ i ] /= sum;
|
|
|
|
return values;
|
|
|
|
}
|
|
|
|
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
|
|
|
|
renderer.context.disable( renderer.context.DEPTH_TEST );
|
|
renderer.render( sceneBG, cameraOrtho, rtTexture1 );
|
|
renderer.context.enable( renderer.context.DEPTH_TEST );
|
|
|
|
renderer.render( sceneRTT, 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 );
|
|
|
|
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>
|