home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
188f36be5d749e1863d5a68556da211bbd1afd6f
three.js/examples/shader_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

351 lines
13 KiB
HTML
Raw Blame History

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - Shader test</title>
<meta charset="utf-8">
<style type="text/css">
body {
background:#000;
color:#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 -19.7em 0; z-index:0; position:relative; display:block }
.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
.inactive { background:#999; color:#eee }
</style>
</head>
<body>
<div id="d">
<h1>Shader test</h1>
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
<span id="rwebgl" class="button">WebGL renderer</span>
<br/>
<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.
<p>Blinn-Phong shader only works in WebGL, canvas has only diffuse materials.
</div>
<pre id="log"></pre>
<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="js/Stats.js"></script>
<script type="text/javascript">
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var FLOOR = -250;
var container;
var stats;
var camera;
var scene;
var canvasRenderer, webglRenderer;
var mesh, zmesh, lightMesh, 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 addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
mesh = new THREE.Mesh( geometry, material );
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
mesh.rotation.x = rx;
mesh.rotation.y = ry;
mesh.rotation.z = rz;
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 1000;
camera.updateMatrix();
scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight( 0x101010 );
scene.addLight( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 2;
directionalLight.position.normalize();
scene.addLight( directionalLight );
pointLight = new THREE.PointLight( 0xffffff );
pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 0;
scene.addLight( pointLight );
// light representation
sphere = new Sphere( 100, 16, 8, 1 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
lightMesh.position = pointLight.position;
lightMesh.overdraw = true;
lightMesh.updateMatrix();
scene.addObject(lightMesh);
// material samples
sphere = new Sphere( 100, 32, 32, 1 );
var y1 = 0, y2 = -200;
addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x050505, 0x000000, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x050505 ) );
addMesh( sphere, 1, -400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffffff, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, -400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffffff ) );
addMesh( sphere, 1, -200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xff5500, 0x555555, 10, 1.0 ) );
addMesh( sphere, 1, -200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xff5500 ) );
addMesh( sphere, 1, 0, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffaa00, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, 0, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffaa00 ) );
addMesh( sphere, 1, 200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x55ff00, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, 200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x55ff00 ) );
addMesh( sphere, 1, 400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x0055ff, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, 400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x0055ff ) );
addMesh( sphere, 1, 600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x5500ff, 0x555555, 30, 1.0 ) );
addMesh( sphere, 1, 600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x5500ff ) );
if ( render_gl ) {
try {
webglRenderer = new THREE.WebGLRenderer( scene );
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( webglRenderer.domElement );
has_gl = 1;
}
catch (e) {
}
}
if( render_canvas ) {
canvasRenderer = new THREE.CanvasRenderer();
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( canvasRenderer.domElement );
}
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/torus/Torus.js", function() { createScene( new Torus() ) } );
//loader.loadAscii( "obj/torus/Torus_slim.js", function( geometry ) { createScene( geometry ) } );
//loader.loadBinary( "obj/torus/Torus_bin.js", function( geometry ) { createScene( geometry ) }, "obj/torus" );
}
function createScene( geometry ) {
var s = 80, t = s + 20, y = 200;
addMesh( geometry, s, -6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x000000, 0x333333, 10, 1.0 ) );
addMesh( geometry, s, -4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x888888, 0x333333, 10, 1.0 ) );
addMesh( geometry, s, -2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0xff5500, 10, 1.0 ) );
addMesh( geometry, s, 0, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0xffaa00, 10, 1.0 ) );
addMesh( geometry, s, 2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x55ff00, 10, 1.0 ) );
addMesh( geometry, s, 4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x0055ff, 10, 1.0 ) );
addMesh( geometry, s, 6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( 0x030303, 0x030303, 0x5500ff, 10, 1.0 ) );
}
function loadAsync( url, callback ) {
var el = document.createElement( 'script' );
el.type = 'text/javascript';
el.onload = callback;
el.src = url;
document.getElementsByTagName("head")[0].appendChild(el);
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
var r = 0;
function loop() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
/*
for(var i=0; i<scene.objects.length; ++i) {
scene.objects[i].rotation.x += 0.0025;
scene.objects[i].updateMatrix();
}
*/
lightMesh.position.x = 700*Math.cos(r);
lightMesh.position.z = 700*Math.sin(r);
lightMesh.updateMatrix();
r += 0.01;
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