mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
alteredq
071de366c2
Also some fixes along the way to properly handle vertex colors in loaders. Many things still broken, but we move forward.
256 lines
7.2 KiB
HTML
256 lines
7.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - materials - normal map</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
background:#000;
|
|
color:#fff;
|
|
padding:0;
|
|
margin:0;
|
|
font-weight: bold;
|
|
overflow:hidden;
|
|
}
|
|
|
|
a { color: #ffffff; }
|
|
|
|
#info {
|
|
position: absolute;
|
|
top: 0px; width: 100%;
|
|
color: #ffffff;
|
|
padding: 5px;
|
|
font-family:Monospace;
|
|
font-size:13px;
|
|
text-align:center;
|
|
z-index:1000;
|
|
}
|
|
|
|
#oldie {
|
|
background:rgb(200,100,0) !important;
|
|
color:#fff;
|
|
}
|
|
|
|
#vt { display:none }
|
|
#vt, #vt a { color:orange; }
|
|
.code { }
|
|
|
|
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<pre id="log"></pre>
|
|
|
|
<div id="info">
|
|
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl (<span id="description">normal + ao + displacement</span>) map demo.
|
|
ninja head from <a href="http://developer.amd.com/archive/gpu/MeshMapper/pages/default.aspx" target="_blank">AMD GPU MeshMapper</a>
|
|
|
|
<div id="vt">displacement mapping needs vertex textures (GPU with Shader Model 3.0)<br/>
|
|
on Windows use <span class="code">Chrome --use-gl=desktop</span> <br/>
|
|
or Firefox 4 (about:config => webgl.mochitest_native_gl=true)<br/>
|
|
please star this <a href="http://code.google.com/p/chromium/issues/detail?id=52497">Chrome issue</a> to get ANGLE support
|
|
</div>
|
|
</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>
|
|
|
|
<script type="text/javascript">
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
var statsEnabled = true;
|
|
|
|
var container, stats, loader;
|
|
|
|
var camera, scene, webglRenderer;
|
|
|
|
var mesh, zmesh, lightMesh, geometry;
|
|
var mesh1, mesh2;
|
|
|
|
var directionalLight, pointLight, ambientLight;
|
|
|
|
var mouseX = 0;
|
|
var mouseY = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
var r = 0.0;
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
|
|
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
|
|
camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
|
|
camera.position.z = 6200;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
// LIGHTS
|
|
|
|
ambientLight = new THREE.AmbientLight( 0x111111 );
|
|
scene.addLight( ambientLight );
|
|
|
|
pointLight = new THREE.PointLight( 0xffff55 );
|
|
pointLight.position.z = 10000;
|
|
scene.addLight( pointLight );
|
|
|
|
directionalLight = new THREE.DirectionalLight( 0xaaaa88 );
|
|
directionalLight.position.x = 1;
|
|
directionalLight.position.y = 1;
|
|
directionalLight.position.z = 0.5;
|
|
directionalLight.position.normalize();
|
|
scene.addLight( directionalLight );
|
|
|
|
// light representation
|
|
|
|
var sphere = new Sphere( 100, 16, 8 );
|
|
lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color:0xffaa00 } ) );
|
|
lightMesh.position = pointLight.position;
|
|
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
|
|
scene.addObject(lightMesh);
|
|
|
|
// common material parameters
|
|
|
|
var ambient = 0x050505, diffuse = 0x555555, specular = 0xaa6600, shininess = 10, scale = 23;
|
|
|
|
// normal map shader
|
|
|
|
var shader = ShaderUtils.lib[ "normal" ];
|
|
var uniforms = Uniforms.clone( shader.uniforms );
|
|
|
|
uniforms[ "enableAO" ].value = true;
|
|
uniforms[ "enableDiffuse" ].value = false;
|
|
|
|
uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/normal.jpg" );
|
|
uniforms[ "tAO" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/ao.jpg" );
|
|
|
|
uniforms[ "tDisplacement" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/displacement.jpg" );
|
|
uniforms[ "uDisplacementBias" ].value = -0.428408 * scale;
|
|
uniforms[ "uDisplacementScale" ].value = 2.436143 * scale;
|
|
|
|
uniforms[ "uPointLightPos" ].value = pointLight.position;
|
|
uniforms[ "uPointLightColor" ].value = pointLight.color;
|
|
|
|
uniforms[ "uDirLightPos" ].value = directionalLight.position;
|
|
uniforms[ "uDirLightColor" ].value = directionalLight.color;
|
|
|
|
uniforms[ "uAmbientLightColor" ].value = ambientLight.color;
|
|
|
|
uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
|
|
uniforms[ "uSpecularColor" ].value.setHex( specular );
|
|
uniforms[ "uAmbientColor" ].value.setHex( ambient );
|
|
|
|
uniforms[ "uShininess" ].value = shininess;
|
|
|
|
var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms };
|
|
var material1 = new THREE.MeshShaderMaterial( parameters );
|
|
|
|
var material2 = new THREE.MeshPhongMaterial( { color: diffuse, specular: specular, ambient: ambient, shininess: shininess } );
|
|
|
|
loader = new THREE.BinaryLoader( true );
|
|
document.body.appendChild( loader.statusDomElement );
|
|
|
|
loader.load( { model: "obj/ninja/NinjaLo_bin.js", callback: function( geometry ) { createScene( geometry, scale, material1, material2 ) } } );
|
|
|
|
webglRenderer = new THREE.WebGLRenderer();
|
|
webglRenderer.setSize( window.innerWidth, window.innerHeight );
|
|
container.appendChild( webglRenderer.domElement );
|
|
|
|
var description = "normal + ao" + ( webglRenderer.supportsVertexTextures() ? " + displacement" : " + <strike>displacement</strike>" );
|
|
document.getElementById( "description" ).innerHTML = description;
|
|
document.getElementById( "vt" ).style.display = webglRenderer.supportsVertexTextures() ? "none" : "block";
|
|
|
|
if ( statsEnabled ) {
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
stats.domElement.style.zIndex = 100;
|
|
container.appendChild( stats.domElement );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function createScene( geometry, scale, material1, material2 ) {
|
|
|
|
//geometry.computeTangents();
|
|
|
|
//mesh1 = SceneUtils.addMesh( scene, geometry, scale, -scale * 12, 0, 0, 0,0,0, material1 );
|
|
mesh2 = SceneUtils.addMesh( scene, geometry, scale, scale * 12, 0, 0, 0,0,0, material2 );
|
|
|
|
loader.statusDomElement.style.display = "none";
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove(event) {
|
|
|
|
mouseX = ( event.clientX - windowHalfX ) * 10;
|
|
mouseY = ( event.clientY - windowHalfY ) * 10;
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
if ( statsEnabled ) stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
var ry = mouseX * 0.0003, rx = mouseY * 0.0003;
|
|
|
|
if( mesh1 ) {
|
|
|
|
mesh1.rotation.y = ry;
|
|
mesh1.rotation.x = rx;
|
|
|
|
}
|
|
|
|
if( mesh2 ) {
|
|
|
|
mesh2.rotation.y = ry;
|
|
mesh2.rotation.x = rx;
|
|
|
|
}
|
|
|
|
lightMesh.position.x = 2500 * Math.cos( r );
|
|
lightMesh.position.z = 2500 * Math.sin( r );
|
|
|
|
r += 0.01;
|
|
|
|
webglRenderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
function log( text ) {
|
|
|
|
var e = document.getElementById("log");
|
|
e.innerHTML = text + "<br/>" + e.innerHTML;
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|