mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 13:06:01 +10:00
alteredq
ecad27eb11
Code is still rough around edges (it can be made nicer), though it should already produce one-to-one results with ubershader. Side-effect is that scene is no longer required as WebGLRenderer constructor parameter. Shader programs are now constructed upon first frame render and only then scene lights are examined.
289 lines
9.7 KiB
HTML
289 lines
9.7 KiB
HTML
<!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/extras/io/Loader.js"></script>
|
|
<script type="text/javascript" src="../src/extras/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.MeshBasicMaterial( { color: 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( { ambient: 0x050505, color: 0x000000, specular: 0x555555, shininess: 30 } ) );
|
|
addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x050505 } ) );
|
|
|
|
addMesh( sphere, 1, -400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0xffffff, specular: 0x555555, shininess: 30 } ) );
|
|
addMesh( sphere, 1, -400, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0xffffff } ) );
|
|
|
|
addMesh( sphere, 1, -200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0xff5500, specular: 0x555555, shininess: 10 } ) );
|
|
addMesh( sphere, 1, -200, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0xff5500 } ) );
|
|
|
|
addMesh( sphere, 1, 0, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0xffaa00, specular: 0x555555, shininess: 30 } ) );
|
|
addMesh( sphere, 1, 0, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0xffaa00 } ) );
|
|
|
|
addMesh( sphere, 1, 200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x55ff00, specular: 0x555555, shininess: 30 } ) );
|
|
addMesh( sphere, 1, 200, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x55ff00 } ) );
|
|
|
|
addMesh( sphere, 1, 400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x0055ff, specular: 0x555555, shininess: 30 } ) );
|
|
addMesh( sphere, 1, 400, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x0055ff } ) );
|
|
|
|
addMesh( sphere, 1, 600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x5500ff, specular: 0x555555, shininess: 30 } ) );
|
|
addMesh( sphere, 1, 600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x5500ff } ) );
|
|
|
|
if ( render_gl ) {
|
|
try {
|
|
webglRenderer = new THREE.WebGLRenderer();
|
|
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.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( { ambient: 0x000000, color: 0x000000, specular: 0x333333, shininess: 10 } ) );
|
|
addMesh( geometry, s, -4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x888888, specular: 0x333333, shininess: 10 } ) );
|
|
addMesh( geometry, s, -2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xff5500, shininess: 10 } ) );
|
|
addMesh( geometry, s, 0, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xffaa00, shininess: 10 } ) );
|
|
addMesh( geometry, s, 2*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x55ff00, shininess: 10 } ) );
|
|
addMesh( geometry, s, 4*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x0055ff, shininess: 10 } ) );
|
|
addMesh( geometry, s, 6*t, y, 0, 1.57,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x5500ff, shininess: 10 } ) );
|
|
|
|
}
|
|
|
|
|
|
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();
|
|
|
|
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>
|