mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-14 15:35:57 +10:00
alteredq
ca05c86fc5
I knew for loops iterating over properties were slower than numerical for loops but I didn't realize how bad it was. Gained about 10 fps in performance test, and that was for for loop iterating over single property. Also fixed broken examples with postprocessing.
304 lines
6.6 KiB
HTML
304 lines
6.6 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/ShaderExtras.js"></script>
|
|
|
|
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
|
|
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
|
|
<script type="text/javascript" src="js/postprocessing/MaskPass.js"></script>
|
|
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
|
|
<script type="text/javascript" src="js/postprocessing/ShaderPass.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 composer;
|
|
|
|
var mouseX = 0;
|
|
var mouseY = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
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 THREE.CubeGeometry( 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;
|
|
|
|
}
|
|
|
|
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 );
|
|
|
|
// postprocessing
|
|
|
|
var renderModel = new THREE.RenderPass( scene, camera );
|
|
var effectBloom = new THREE.BloomPass( 1.3 );
|
|
var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
|
|
|
|
effectScreen.renderToScreen = true;
|
|
|
|
composer = new THREE.EffectComposer( renderer );
|
|
|
|
composer.addPass( renderModel );
|
|
composer.addPass( effectBloom );
|
|
composer.addPass( effectScreen );
|
|
|
|
}
|
|
|
|
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 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();
|
|
composer.render();
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|