mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-10 05:26:11 +10:00
alteredq
ac5276b41f
A lot of things going on in this commit:
- added tangents computation for geometries
- mesh must have UV coordinates
- to be called explicitly once geometry is loaded like this: geometry.computeTangents()
- tangents are stored in Vertex objects
- quads are not solved properly (though workaround hack seems to work at least somehow, as far as each vertex appears at least somewhere)
- extended VBOs in WebGLRenderer to include tangent streams (when available)
- added "normal" shader to ShaderUtils (to be used with MeshShaderMaterial)
- Blinn-Phong with one directional and one point light (7 varyings gone, just one spare)
- normal maps are in tangent space
- displacement maps use simple luminance value (could be changed if better precision is needed)
- displacement mapping uses vertex texture fetch
- this requires GPU with Shader Model 3.0
- not currently supported in ANGLE
- for this, added "supportsVertexTextures" method to WebGLRenderer API, so that application can handle this
283 lines
8.0 KiB
HTML
283 lines
8.0 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - webgl 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 {
|
|
font-family:monospace;
|
|
font-size:13px;
|
|
|
|
text-align:center;
|
|
background:rgb(200,100,0);
|
|
color:#fff;
|
|
padding:1em;
|
|
|
|
width:475px;
|
|
margin:5em auto 0;
|
|
|
|
border:solid 2px #fff;
|
|
border-radius:10px;
|
|
|
|
display:none;
|
|
}
|
|
|
|
#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> or Firefox 4<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>
|
|
|
|
<center>
|
|
<div id="oldie">
|
|
Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
|
|
and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
|
|
<br/>
|
|
Please try in
|
|
<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
|
|
<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
|
|
<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
|
|
</div>
|
|
</center>
|
|
|
|
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
if ( !is_browser_compatible() ) {
|
|
|
|
document.getElementById( "oldie" ).style.display = "block";
|
|
|
|
}
|
|
|
|
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();
|
|
setInterval( loop, 1000 / 60 );
|
|
|
|
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, 1 );
|
|
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 fragment_shader = ShaderUtils.lib[ "normal" ].fragment_shader;
|
|
var vertex_shader = ShaderUtils.lib[ "normal" ].vertex_shader;
|
|
var uniforms = ShaderUtils.lib[ "normal" ].uniforms;
|
|
|
|
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 material1 = new THREE.MeshShaderMaterial( { fragment_shader: fragment_shader,
|
|
vertex_shader: vertex_shader,
|
|
uniforms: uniforms
|
|
} );
|
|
|
|
var material2 = new THREE.MeshPhongMaterial( { color: diffuse, specular: specular, ambient: ambient, shininess: shininess } );
|
|
|
|
loader = new THREE.Loader( true );
|
|
document.body.appendChild( loader.statusDomElement );
|
|
|
|
loader.loadBinary( "obj/ninja/NinjaLo_bin.js", function( geometry ) { createScene( geometry, scale, material1, material2 ) }, "obj/ninja" );
|
|
|
|
webglRenderer = new THREE.WebGLRenderer( scene );
|
|
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 loop() {
|
|
|
|
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 );
|
|
|
|
if ( statsEnabled ) stats.update();
|
|
|
|
}
|
|
|
|
function log( text ) {
|
|
|
|
var e = document.getElementById("log");
|
|
e.innerHTML = text + "<br/>" + e.innerHTML;
|
|
|
|
}
|
|
|
|
function is_browser_compatible() {
|
|
|
|
// WebGL support
|
|
|
|
try { var test = new Float32Array(1); } catch(e) { return false; }
|
|
|
|
// Web workers
|
|
|
|
return !!window.Worker;
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|