home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 21:15:56 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
0cb79310e54cb5cf8fafa0b689fb8a5f3fdfaec0
three.js/examples/materials_test.html
T
alteredq 0cb79310e5 Added experimental binary mesh loader. Updated OBJ converter and examples accordingly. 
If you want to use binary format, convert OBJ models using "convert_obj_threejs_slim.py" with "-t binary" option.

This will now create two files:
    JS part with materials
    BIN part with binary buffers

Binary models are loaded like this:

loader.loadBinary( 'obj/lucy/Lucy250k_bin.js', function( geometry ) { createScene( geometry, s ) }, "obj/lucy" );

(difference to ascii format is that url root must be always specified so loader can find binary buffers file, like it already was for textures)

Good news:

- raw binary files are quite smaller than raw ascii files (about half size)
- loading times went down about 20-25%
- now also Firefox can handle 250k triangle mesh (it just bugs about long running script), with ascii format it threw "array initialiser too large" exception

Mixed news:

- gzipped binary files are only about 25% smaller than gzipped ascii files so actual benefits are smaller,
  also it's more likely server will have JS gzipping on by default, while you need to set it up for
  other formats (could be hacked around by naming binary files with JS extension instead of BIN?)

Bad news:

- browser blocking is back :( Not that it ever went completely away (for large models object creation is more costly than loading and it is blocking), but it was slightly better with ascii loader (where data is loaded as worker's JS body).

    - this comes from having to use Ajax to load binary data
    - loading binary data by Ajax from within worker didn't really help, it was in fact slightly slower and browser did freeze :(
    - can't easily embed binary data in JSON (would need to encode it which would make it bigger, defying the purpose)

- Loader got fatter

Also in this commit: renamed Loader.loadAsync() => Loader.loadAsciiOld() and Loader.loadWorker() = Loader.loadAscii() so that names correspond to model formats instead of underlying implementation.

loadAsciiOld - JS exported by Blender and old OBJ converter
loadAscii    - JSON created by slim OBJ converter (-t ascii)
loadBinary   - JSON + BIN created by slim OBJ converter (-t binary)

TODO:

 - look into UV coordinates, should be indexed the same way as vertices, normals and faces are (instead of unrolled per each face)
 - look into HTML5 File API, binary blobs could help
2010-11-06 17:24:58 +01:00

387 lines
13 KiB
HTML
Raw Blame History

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - multi-materials test</title>
<meta charset="utf-8">
<style type="text/css">
body {
background:#fff;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
}
h1 { }
a { color:skyblue }
canvas { pointer-events:none; z-index:10; position:relative; }
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
#d { text-align:center; margin:1em 0 -15.7em 0; z-index:0; position:relative; display:block }
.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
.inactive { background:#999; color:#eee }
</style>
</head>
<body>
<div id="d">
<h1>Multi-materials test</h1>
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
<span id="rwebgl" class="button">WebGL renderer</span>
<br/>
<p>Model by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1">Reallusion iClone</a>
<p>Using a modified version of <a href="http://github.com/alteredq/three.js">Three.js</a> by mrdoob.
<br/>
<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
<p>Canvas renderer is very slow on anything other than Chrome.
</div>
<div id="log"></div>
<script type="text/javascript" src="../build/Three.js"></script>
<!--
-->
<!--
<script type="text/javascript" src="../src/Three.js"></script>
<script type="text/javascript" src="../src/core/Color.js"></script>
<script type="text/javascript" src="../src/core/Vector2.js"></script>
<script type="text/javascript" src="../src/core/Vector3.js"></script>
<script type="text/javascript" src="../src/core/Vector4.js"></script>
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
<script type="text/javascript" src="../src/core/Matrix3.js"></script>
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
<script type="text/javascript" src="../src/core/Vertex.js"></script>
<script type="text/javascript" src="../src/core/Face3.js"></script>
<script type="text/javascript" src="../src/core/Face4.js"></script>
<script type="text/javascript" src="../src/core/UV.js"></script>
<script type="text/javascript" src="../src/core/Geometry.js"></script>
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
<script type="text/javascript" src="../src/io/Loader.js"></script>
<script type="text/javascript" src="../src/lights/Light.js"></script>
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
<script type="text/javascript" src="../src/lights/PointLight.js"></script>
<script type="text/javascript" src="../src/objects/Object3D.js"></script>
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
<script type="text/javascript" src="../src/objects/Particle.js"></script>
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
<script type="text/javascript" src="../src/renderers/Projector.js"></script>
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
-->
<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var SCREEN_WIDTH = window.innerWidth/2;
var SCREEN_HEIGHT = window.innerHeight;
var FLOOR = -250;
var container;
var stats;
var camera;
var scene;
var canvasRenderer, webglRenderer;
var mesh, zmesh, geometry;
var directionalLight, pointLight;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth >> 1;
var windowHalfY = window.innerHeight >> 1;
var render_canvas = 1, render_gl = 1;
var has_gl = 0;
var bcanvas = document.getElementById("rcanvas");
var bwebgl = document.getElementById("rwebgl");
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
loop();
//render_canvas = !has_gl;
bwebgl.style.display = has_gl ? "inline" : "none";
bcanvas.className = render_canvas ? "button" : "button inactive";
setInterval(loop, 1000/60);
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 500;
camera.updateMatrix();
scene = new THREE.Scene();
// SPHERES
sphere = new Sphere( 100, 16, 8, 1 );
for (var i=0; i<10; i++) {
//mesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffffff ) );
mesh = new THREE.Mesh( sphere, [ new THREE.MeshColorFillMaterial( 0xffffff ), new THREE.MeshColorStrokeMaterial( 0x000000, 1, 1.5 ) ] );
//mesh = new THREE.Mesh( sphere, new THREE.MeshColorStrokeMaterial( 0x00aa00, 1, 1.5 ) );
//mesh = new THREE.Mesh( sphere, new THREE.MeshFaceColorStrokeMaterial( 2.5 ) );
mesh.position.x = 500 * (Math.random() - 0.5);
mesh.position.y = 500 * (Math.random() - 0.5);
mesh.position.z = 500 * (Math.random() - 0.5);
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * (Math.random() + 0.5);
//mesh.doubleSided = true;
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
// LIGHTS
var ambient = new THREE.AmbientLight( 0x101010 );
scene.addLight( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.y = -70;
directionalLight.position.z = 100;
directionalLight.position.normalize();
scene.addLight( directionalLight );
pointLight = new THREE.PointLight( 0xffaa00 );
pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 120;
//scene.addLight( pointLight );
mesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xff0000 ) );
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.1;
mesh.position = pointLight.position;
mesh.updateMatrix();
scene.addObject(mesh);
if( render_canvas ) {
canvasRenderer = new THREE.CanvasRenderer();
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( canvasRenderer.domElement );
}
if ( render_gl ) {
try {
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( webglRenderer.domElement );
has_gl = 1;
}
catch (e) {
}
}
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
var loader = new THREE.Loader();
loader.loadAsciiOld( "obj/female02/female02.js", function() { createScene( new Female02( "obj/female02" ) ) } );
//loader.loadAscii( "obj/female02/Female02_slim.js", function( geometry ) { createScene( geometry) }, "obj/female02" );
//loader.loadBinary( "obj/female02/Female02_bin.js", function( geometry ) { createScene( geometry) }, "obj/female02" );
}
function createScene( geometry ) {
// PROCEDURAL TEXTURES (decals)
var x1 = document.createElement( "canvas" );
var xc1 = x1.getContext("2d");
x1.width = x1.height = 256;
xc1.shadowBlur = 3;
xc1.shadowColor = "#000";
xc1.font = "7pt arial";
xc1.fillStyle = "hsla("+0+",90%,50%,1);"
xc1.fillText("Three", 57, 29);
xc1.fillStyle = "hsla("+0+",90%,50%,0.15);"
xc1.fillRect(40, 70, 60, 50);
for(var i=0;i<500;i++) {
xc1.fillStyle = "hsla("+60*Math.random()+",90%,50%,0.5);"
xc1.fillRect(40+60*Math.random(), 118+10*Math.random(), 2, 10);
}
var x2 = document.createElement( "canvas" );
var xc2 = x2.getContext("2d");
x2.width = x2.height = 128;
xc2.fillStyle = "rgba(0,0,0,0.5)";
for(var i=0;i<14;i++) {
xc2.fillRect(0, 5+i*4, 54, 2);
xc2.fillRect(i*4, 5, 2, 54);
}
var xm1 = new THREE.MeshBitmapMaterial( x1 );
xm1.loaded = 1; // this is procedurally generated texture
var xm2 = new THREE.MeshBitmapMaterial( x2 );
xm2.loaded = 1; // this is procedurally generated texture
geometry.materials[0].push ( xm1 ); // goes to faces with material 0
geometry.materials[1].push ( xm2 ); // goes to faces with material 1
geometry.materials[4].push ( new THREE.MeshColorFillMaterial(0xff0000, 0.5) );
var materials = [ new THREE.MeshFaceMaterial() ];
// full-mesh wireframe overlay
//materials.push( new THREE.MeshColorStrokeMaterial(0xff0000, 1, 1.5) );
// full-mesh color overlay
//materials.push( new THREE.MeshColorFillMaterial(0xff0000, 0.5) );
zmesh = new THREE.Mesh( geometry, materials, 1 );
zmesh.position.x = -80;
zmesh.position.z = 50;
zmesh.position.y = FLOOR;
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 3;
zmesh.overdraw = true;
zmesh.updateMatrix();
scene.addObject(zmesh);
// PLANES with all materials from the model
createMaterialsPalette( geometry.materials, 100, 0 );
}
function createMaterialsPalette( materials, size, bottom ) {
for ( var i=0; i<materials.length; ++i ) {
// material
mesh = new THREE.Mesh( new Plane( size, size ), materials[i] );
mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
mesh.position.y = FLOOR + size/2 + bottom;
mesh.position.z = -100;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
mesh.doubleSided = true;
mesh.updateMatrix();
scene.addObject(mesh);
// number
var x = document.createElement( "canvas" );
var xc = x.getContext("2d");
x.width = x.height = 128;
xc.shadowColor = "#000";
xc.shadowBlur = 7;
xc.fillStyle = "orange";
xc.font = "50pt arial bold";
xc.fillText(i, 10, 64);
var xm = new THREE.MeshBitmapMaterial( x );
xm.loaded = 1;
mesh = new THREE.Mesh( new Plane( size, size ), xm );
mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
mesh.position.y = FLOOR + size/2 + bottom;
mesh.position.z = -99;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
mesh.doubleSided = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function loop() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
stats.update();
}
function log(text) {
var e = document.getElementById("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
function toggleCanvas() {
render_canvas = !render_canvas;
bcanvas.className = render_canvas ? "button" : "button inactive";
render_gl = !render_canvas;
bwebgl.className = render_gl ? "button" : "button inactive";
if( has_gl )
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
}
function toggleWebGL() {
render_gl = !render_gl;
bwebgl.className = render_gl ? "button" : "button inactive";
render_canvas = !render_gl;
bcanvas.className = render_canvas ? "button" : "button inactive";
if( has_gl )
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink