mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-19 09:56:12 +10:00
alteredq
0fe464c97a
Also changed MeshShaderMaterial demos to show how to use cloning. For these particular demos uniforms cloning is not really necessary as they use only one instance of shader material, but for example, if there were two normal mapped models in one scene, each model would need separate material with own uniforms.
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 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 = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
|
|
var material1 = new THREE.MeshShaderMaterial( parameters );
|
|
|
|
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: 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>
|