mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 13:06:01 +10:00
alteredq
49872b2afd
It doesn't have effect there anyway as scene is rendered to FBO without multisampling. Turning antialiasing off here didn't have much effect on performance though (unlike for particles).
375 lines
9.4 KiB
HTML
375 lines
9.4 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - materials - video</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
background-color: #000;
|
|
color: #fff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
font-family:Monospace;
|
|
font-size:13px;
|
|
text-align:center;
|
|
font-weight: bold;
|
|
text-align:center;
|
|
}
|
|
|
|
a {
|
|
color:#0078ff;
|
|
}
|
|
|
|
#info {
|
|
color:#fff;
|
|
position: absolute;
|
|
top: 0px; width: 100%;
|
|
padding: 5px;
|
|
z-index:100;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="info">
|
|
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl video demo. playing <a href="http://durian.blender.org/" target="_blank">sintel</a> trailer
|
|
</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>
|
|
|
|
<video id="video" autoplay loop style="display:none">
|
|
<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
|
|
<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
|
|
</video>
|
|
|
|
<script type="text/javascript">
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer;
|
|
|
|
var video, texture, material, mesh;
|
|
|
|
var mouseX = 0;
|
|
var mouseY = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
var postprocessing = { enabled: true };
|
|
|
|
var cube_count,
|
|
|
|
meshes = [],
|
|
materials = [],
|
|
|
|
xgrid = 20,
|
|
ygrid = 10;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
container = document.createElement('div');
|
|
document.body.appendChild( container );
|
|
|
|
camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
camera.position.z = 500;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
var light = new THREE.DirectionalLight( 0xffffff );
|
|
light.position.set( 0.5, 1, 1 );
|
|
light.position.normalize();
|
|
scene.addLight( light );
|
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: false } );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
video = document.getElementById( 'video' );
|
|
|
|
//video.volume = 0;
|
|
//video.muted = true;
|
|
|
|
texture = new THREE.Texture( video );
|
|
texture.minFilter = THREE.LinearFilter;
|
|
texture.magFilter = THREE.LinearFilter;
|
|
|
|
//
|
|
|
|
var i, j, ux, uy, ox, oy,
|
|
geometry,
|
|
xsize, ysize;
|
|
|
|
ux = 1 / xgrid;
|
|
uy = 1 / ygrid;
|
|
|
|
xsize = 480 / xgrid;
|
|
ysize = 204 / ygrid;
|
|
|
|
var parameters = { color: 0xffffff, map: texture },
|
|
material_base = new THREE.MeshLambertMaterial( parameters );
|
|
|
|
renderer.initMaterial( material_base, scene.lights, scene.fog );
|
|
|
|
cube_count = 0;
|
|
|
|
for( i = 0; i < xgrid; i++)
|
|
for( j = 0; j < ygrid; j++) {
|
|
|
|
ox = i;
|
|
oy = j;
|
|
|
|
geometry = new Cube( xsize, ysize, xsize );
|
|
change_uvs( geometry, ux, uy, ox, oy );
|
|
|
|
materials[ cube_count ] = new THREE.MeshLambertMaterial( parameters );
|
|
|
|
material = materials[ cube_count ];
|
|
|
|
material.program = material_base.program;
|
|
|
|
material.hue = i/xgrid;
|
|
material.saturation = j/ygrid;
|
|
|
|
material.color.setHSV( material.hue, material.saturation, 1 );
|
|
|
|
mesh = new THREE.Mesh( geometry, material );
|
|
|
|
mesh.position.x = ( i - xgrid/2 ) * xsize;
|
|
mesh.position.y = - ( j - ygrid/2 ) * ysize;
|
|
mesh.position.z = 0;
|
|
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
|
|
|
|
scene.addObject(mesh);
|
|
|
|
mesh.dx = 0.001 * ( 0.5 - Math.random() );
|
|
mesh.dy = 0.001 * ( 0.5 - Math.random() );
|
|
|
|
meshes[ cube_count ] = mesh;
|
|
|
|
cube_count += 1;
|
|
|
|
}
|
|
|
|
initPostprocessing();
|
|
renderer.autoClear = false;
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
//container.appendChild( stats.domElement );
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
|
}
|
|
|
|
function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
|
|
|
|
var i, j, uv;
|
|
|
|
for ( i = 0; i < geometry.faceVertexUvs[ 0 ].length; i++ ) {
|
|
|
|
uv = geometry.faceVertexUvs[ 0 ][ i ];
|
|
|
|
for ( j = 0; j < uv.length; j++ ) {
|
|
|
|
uv[j].u = ( uv[j].u + offsetx ) * unitx;
|
|
uv[j].v = ( uv[j].v + offsety ) * unity;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
function initPostprocessing() {
|
|
|
|
postprocessing.scene = new THREE.Scene();
|
|
|
|
postprocessing.camera = new THREE.Camera();
|
|
postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
|
|
postprocessing.camera.position.z = 100;
|
|
|
|
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter };
|
|
postprocessing.rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, pars );
|
|
postprocessing.rtTexture2 = new THREE.RenderTarget( 512, 512, pars );
|
|
postprocessing.rtTexture3 = new THREE.RenderTarget( 512, 512, pars );
|
|
|
|
var screen_shader = ShaderUtils.lib["screen"];
|
|
var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
|
|
|
|
screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
|
|
screen_uniforms["opacity"].value = 1.0;
|
|
|
|
postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: screen_uniforms,
|
|
vertexShader: screen_shader.vertexShader,
|
|
fragmentShader: screen_shader.fragmentShader,
|
|
blending: THREE.AdditiveBlending
|
|
|
|
} );
|
|
|
|
var convolution_shader = ShaderUtils.lib["convolution"];
|
|
var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
|
|
|
|
postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
|
|
postprocessing.blury = new THREE.Vector2( 0.0, 0.001953125 );
|
|
|
|
convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
|
|
convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
|
|
convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
|
|
|
|
postprocessing.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
|
|
|
|
} );
|
|
|
|
postprocessing.quad = new THREE.Mesh( new Plane( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
|
|
postprocessing.quad.position.z = -500;
|
|
postprocessing.scene.addObject( postprocessing.quad );
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove(event) {
|
|
|
|
mouseX = ( event.clientX - windowHalfX );
|
|
mouseY = ( event.clientY - windowHalfY ) * 0.3;
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
var h, counter = 1;
|
|
|
|
function render() {
|
|
|
|
var time = new Date().getTime() * 0.00005;
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
|
|
|
|
if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
|
|
|
|
if ( texture ) texture.needsUpdate = true;
|
|
|
|
}
|
|
|
|
for( i = 0; i < cube_count; i++ ) {
|
|
|
|
material = materials[i];
|
|
|
|
h = ( 360 * ( material.hue + time ) % 360 ) / 360;
|
|
material.color.setHSV( h, material.saturation, 1 );
|
|
|
|
}
|
|
|
|
if( counter % 1000 > 200 ) {
|
|
|
|
for( i = 0; i < cube_count; i++ ) {
|
|
|
|
mesh = meshes[i];
|
|
|
|
mesh.rotation.x += 10 * mesh.dx;
|
|
mesh.rotation.y += 10 * mesh.dy;
|
|
|
|
mesh.position.x += 200 * mesh.dx;
|
|
mesh.position.y += 200 * mesh.dy;
|
|
mesh.position.z += 400 * mesh.dx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if( counter % 1000 == 0 ) {
|
|
|
|
for( i = 0; i < cube_count; i++ ) {
|
|
|
|
mesh = meshes[i];
|
|
|
|
mesh.dx *= -1;
|
|
mesh.dy *= -1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
counter++;
|
|
|
|
renderer.clear();
|
|
|
|
if ( postprocessing.enabled ) {
|
|
|
|
// Render scene into texture
|
|
|
|
renderer.render( scene, camera, postprocessing.rtTexture1, true );
|
|
|
|
// Render quad with blured scene into texture (convolution pass 1)
|
|
|
|
postprocessing.quad.materials = [ postprocessing.materialConvolution ];
|
|
|
|
postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
|
|
postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
|
|
|
|
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture2, true );
|
|
|
|
// Render quad with blured scene into texture (convolution pass 2)
|
|
|
|
postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture2;
|
|
postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blury;
|
|
|
|
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture3, true );
|
|
|
|
// Render original scene with superimposed blur to texture
|
|
|
|
postprocessing.quad.materials = [ postprocessing.materialScreen ];
|
|
|
|
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
|
|
postprocessing.materialScreen.uniforms.opacity.value = 1.3;
|
|
|
|
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
|
|
|
|
// Render to screen
|
|
|
|
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
|
|
renderer.render( postprocessing.scene, postprocessing.camera );
|
|
|
|
} else {
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|