Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 8e53294e 编写于 作者: A alteredq
浏览文件
操作

Synced with mrdoob's branch.

上级 044a98c8 42253300
展开全部 隐藏空白更改
内联 并排
Showing with 1675 addition and 562 deletion
build/Three.js
浏览文件 @ 8e53294e
此差异已折叠。
build/ThreeDebug.js
浏览文件 @ 8e53294e
此差异已折叠。
build/ThreeExtras.js
浏览文件 @ 8e53294e
此差异已折叠。
examples/geometry_minecraft.html
浏览文件 @ 8e53294e
......@@ -30,8 +30,8 @@
</head>
<body>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward)</div>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward)</div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.js"></script>
......@@ -78,7 +78,7 @@
var grass_dirt = loadTexture( 'textures/minecraft/grass_dirt.png' ),
grass = loadTexture( 'textures/minecraft/grass.png' ),
dirt = loadTexture( 'textures/minecraft/dirt.png' );
var materials = [
grass_dirt, // right
......@@ -90,45 +90,51 @@
];
var h, px, nx, pz, nz, cubes = [];
var h, h2, px, nx, pz, nz, cubes = [];
for ( var i = 0; i < 16; i++ ) {
px = (i & 8) == 8;
nx = (i & 4) == 4;
pz = (i & 2) == 2;
nz = (i & 1) == 1;
cubes[ i ] = new Cube( 100, 100, 100, 1, 1, materials, false, { px: px, nx: nx, py: true, ny: false, pz: pz, nz: nz } );
}
var geometry = new THREE.Geometry();
camera.position.y = getY( worldHalfWidth, worldHalfDepth ) + 100;
camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
camera.target.position.y = camera.position.y;
for ( var z = 0; z < worldDepth; z ++ ) {
for ( var x = 0; x < worldWidth; x ++ ) {
px = nx = pz = nz = 0;
h = getY( x, z );
px = (getY( x - 1, z ) != h) || x == 0 ? 1 : 0;
nx = (getY( x + 1, z ) != h) || x == worldWidth - 1 ? 1 : 0;
pz = (getY( x, z + 1 ) != h) || z == worldDepth - 1 ? 1 : 0;
nz = (getY( x, z - 1 ) != h) || z == 0 ? 1 : 0;
h2 = getY( x - 1, z );
px = ( h2 != h && h2 != h + 1 ) || x == 0 ? 1 : 0;
h2 = getY( x + 1, z );
nx = ( h2 != h && h2 != h + 1 ) || x == worldWidth - 1 ? 1 : 0;
h2 = getY( x, z + 1 );
pz = ( h2 != h && h2 != h + 1 ) || z == worldDepth - 1 ? 1 : 0;
h2 = getY( x, z - 1 );
nz = ( h2 != h && h2 != h + 1 ) || z == 0 ? 1 : 0;
mesh = new THREE.Mesh( cubes[ px * 8 + nx * 4 + pz * 2 + nz ] );
mesh.position.x = x * 100 - worldHalfWidth * 100;
mesh.position.y = h;
mesh.position.y = h * 100;
mesh.position.z = z * 100 - worldHalfDepth * 100;
GeometryUtils.merge( geometry, mesh );
}
}
......@@ -171,16 +177,16 @@
}
function generateAO( image, sides ) {
var c = document.createElement('canvas');
c.width = image.width;
c.height = image.height;
c.getContext( "2d" ).drawImage( image, 0, 0 );
return c;
}
function loadTexture( path ) {
var image = new Image();
......@@ -218,7 +224,7 @@
function getY( x, z ) {
return ~~( data[ x + z * worldWidth ] * 0.2 ) * 100;
return ~~( data[ x + z * worldWidth ] * 0.2 );
}
......
examples/lights_pointlights.html
浏览文件 @ 8e53294e
......@@ -46,7 +46,7 @@
var camera, scene, renderer,
particle1, particle2, particle2,
light1, light2, light3,
object;
mesh;
init();
setInterval( loop, 1000 / 60 );
......@@ -60,9 +60,16 @@
scene = new THREE.Scene();
object = new THREE.Mesh( new WaltHead(), new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ) );
object.overdraw = true;
scene.addObject( object );
scene.addLight( new THREE.AmbientLight( 0x00020 ) );
light1 = new THREE.PointLight( 0xff0040 );
scene.addLight( light1 );
light2 = new THREE.PointLight( 0x0040ff );
scene.addLight( light2 );
light3 = new THREE.PointLight( 0x80ff80 );
scene.addLight( light3 );
particle1 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xff0040 } ) );
particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
......@@ -76,16 +83,9 @@
particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
scene.addObject( particle3 );
scene.addLight( new THREE.AmbientLight( 0x00020 ) );
light1 = new THREE.PointLight( 0xff0040 );
scene.addLight( light1 );
light2 = new THREE.PointLight( 0x0040ff );
scene.addLight( light2 );
light3 = new THREE.PointLight( 0x80ff80 );
scene.addLight( light3 );
mesh = new THREE.Mesh( new WaltHead(), new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ) );
mesh.overdraw = true;
scene.addObject( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
......@@ -97,7 +97,7 @@
var time = new Date().getTime() * 0.0005;
object.rotation.y -= 0.01;
mesh.rotation.y -= 0.01;
particle1.position.x = Math.sin( time * 0.7 ) * 30;
particle1.position.y = Math.cos( time * 0.5 ) * 40;
......
examples/lights_pointlights_smooth.html 0 → 100644
浏览文件 @ 8e53294e
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - point light</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
}
a {
color: #ff0080;
text-decoration: none;
}
a:hover {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - point lights demo.<br />
Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="obj/WaltHead.js"></script>
<script type="text/javascript">
var camera, scene, renderer,
particle1, particle2, particle2,
light1, light2, light3,
geometry, mesh;
init();
setInterval( loop, 1000 / 60 );
function init() {
var container = document.getElementById( 'container' );
camera = new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 100;
scene = new THREE.Scene();
scene.addLight( new THREE.AmbientLight( 0x00020 ) );
light1 = new THREE.PointLight( 0xff0040 );
scene.addLight( light1 );
light2 = new THREE.PointLight( 0x0040ff );
scene.addLight( light2 );
light3 = new THREE.PointLight( 0x80ff80 );
scene.addLight( light3 );
particle1 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xff0040 } ) );
particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
scene.addObject( particle1 );
particle2 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0x0040ff } ) );
particle2.scale.x = particle2.scale.y = particle2.scale.z = 0.5;
scene.addObject( particle2 );
particle3 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0x80ff80 } ) );
particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
scene.addObject( particle3 );
geometry = new WaltHead();
geometry.computeVertexNormals();
mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) );
mesh.overdraw = true;
scene.addObject( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function loop() {
var time = new Date().getTime() * 0.0005;
mesh.rotation.y -= 0.01;
particle1.position.x = Math.sin( time * 0.7 ) * 30;
particle1.position.y = Math.cos( time * 0.5 ) * 40;
particle1.position.z = Math.cos( time * 0.3 ) * 30;
light1.position.x = particle1.position.x;
light1.position.y = particle1.position.y;
light1.position.z = particle1.position.z;
particle2.position.x = Math.cos( time * 0.3 ) * 30;
particle2.position.y = Math.sin( time * 0.5 ) * 40;
particle2.position.z = Math.sin( time * 0.7 ) * 30;
light2.position.x = particle2.position.x;
light2.position.y = particle2.position.y;
light2.position.z = particle2.position.z;
particle3.position.x = Math.sin( time * 0.7 ) * 30;
particle3.position.y = Math.cos( time * 0.3 ) * 40;
particle3.position.z = Math.sin( time * 0.5 ) * 30;
light3.position.x = particle3.position.x;
light3.position.y = particle3.position.y;
light3.position.z = particle3.position.z;
renderer.render(scene, camera);
}
</script>
</body>
</html>
examples/uqbiquity_test.html
浏览文件 @ 8e53294e
......@@ -67,6 +67,7 @@
<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/WebGLRenderer2.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
......
examples/webglrenderer2_sandbox.html 0 → 100644
浏览文件 @ 8e53294e
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - webgl</title>
<meta charset="utf-8">
<style type="text/css">
body {
background:#fff;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family:Monospace;
font-size:13px;
text-align:center;
z-index:1000;
}
a {
color: #ffffff;
}
#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 cube Fresnel shader demo.</div>
<!--
<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/Ray.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/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/Particle.js"></script>
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
<script type="text/javascript" src="../src/materials/Material.js"></script>
<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshCubeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshShaderMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
<script type="text/javascript" src="../src/materials/Texture.js"></script>
<script type="text/javascript" src="../src/materials/mappings/CubeReflectionMapping.js"></script>
<script type="text/javascript" src="../src/materials/mappings/CubeRefractionMapping.js"></script>
<script type="text/javascript" src="../src/materials/mappings/LatitudeReflectionMapping.js"></script>
<script type="text/javascript" src="../src/materials/mappings/LatitudeRefractionMapping.js"></script>
<script type="text/javascript" src="../src/materials/mappings/SphericalReflectionMapping.js"></script>
<script type="text/javascript" src="../src/materials/mappings/SphericalRefractionMapping.js"></script>
<script type="text/javascript" src="../src/materials/mappings/UVMapping.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/DOMRenderer.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/WebGLRenderer2.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.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="../src/extras/primitives/Sphere.js"></script>
<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var statsEnabled = true;
var container, stats;
var camera, scene, webglRenderer;
var mesh, zmesh, lightMesh, geometry;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
// loop();
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.position.z = 3200;
scene = new THREE.Scene();
var geometry = new Sphere( 100, 32, 16 );
var uniforms = ShaderUtils.lib[ 'basic' ].uniforms;
var vertex_shader = ShaderUtils.lib[ 'basic' ].vertex_shader;
var fragment_shader = ShaderUtils.lib[ 'basic' ].fragment_shader;
var generatedTexture = new THREE.Texture( generateTexture() );
var materials = [
new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ),
new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ),
new THREE.MeshNormalMaterial(),
new THREE.MeshBasicMaterial( { color: 0x665500, blending: THREE.AdditiveBlending } ),
new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.SmoothShading } ),
new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading } ),
new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ),
new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ),
new THREE.MeshDepthMaterial( { near: 1, far: 2000 } ),
new THREE.MeshBasicMaterial( { map: generatedTexture } ),
new THREE.MeshLambertMaterial( { map: generatedTexture } ),
new THREE.MeshShaderMaterial( { uniforms: uniforms, vertex_shader: vertex_shader, fragment_shader: fragment_shader } )
];
for ( var i = 0; i < 1000; i ++ ) {
var mesh = new THREE.Mesh( geometry, materials[ Math.floor( Math.random() * materials.length ) ] );
mesh.position.x = Math.random() * 10000 - 5000;
mesh.position.y = Math.random() * 10000 - 5000;
mesh.position.z = Math.random() * 10000 - 5000;
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 1;
scene.addObject( mesh );
}
webglRenderer = new THREE.WebGLRenderer2();
webglRenderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( webglRenderer.domElement );
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 generateTexture() {
var canvas = document.createElement( 'canvas' );
canvas.loaded = true;
canvas.width = 256;
canvas.height = 256;
var context = canvas.getContext( '2d' );
var image = context.getImageData( 0, 0, 256, 256 );
var x = 0, y = 0;
for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
x = j % 256;
y = x == 0 ? y + 1 : y;
image.data[ i + 2 ] = Math.floor( x ^ y );
image.data[ i + 3 ] = 255;
}
context.putImageData( image, 0, 0 );
return canvas;
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX ) * 10;
mouseY = ( event.clientY - windowHalfY ) * 10;
}
function loop() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
webglRenderer.render( scene, camera );
if ( statsEnabled ) stats.update();
}
function log( text ) {
var e = document.getElementById("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
</script>
</body>
</html>
src/extras/ShaderUtils.js
浏览文件 @ 8e53294e
var ShaderUtils = {
lib: { 'fresnel': {
uniforms: {
uniforms: {
"mRefractionRatio": { type: "f", value: 1.02 },
"mFresnelBias": { type: "f", value: 0.1 },
"mFresnelPower": { type: "f", value: 2.0 },
"mFresnelScale": { type: "f", value: 1.0 },
"tCube": { type: "t", value: 1, texture: null }
"mFresnelBias": { type: "f", value: 0.1 },
"mFresnelPower": { type: "f", value: 2.0 },
"mFresnelScale": { type: "f", value: 1.0 },
"tCube": { type: "t", value: 1, texture: null }
},
fragment_shader: [
"uniform samplerCube tCube;",
"varying vec3 vReflect;",
"varying vec3 vRefract[3];",
"varying float vReflectionFactor;",
"void main() {",
"vec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );",
"vec4 refractedColor = vec4( 1.0, 1.0, 1.0, 1.0 );",
"refractedColor.r = textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r;",
"refractedColor.g = textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g;",
"refractedColor.b = textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b;",
"refractedColor.a = 1.0;",
"gl_FragColor = mix( refractedColor, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );",
"}"
"}"
].join("\n"),
vertex_shader: [
"uniform float mRefractionRatio;",
"uniform float mFresnelBias;",
"uniform float mFresnelScale;",
......@@ -47,217 +48,332 @@ var ShaderUtils = {
"void main(void) {",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"vec4 mPosition = objectMatrix * vec4( position, 1.0 );",
"vec3 nWorld = normalize ( mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz ) * normal );",
"vec3 I = mPosition.xyz - cameraPosition;",
"vReflect = reflect( I, nWorld );",
"vRefract[0] = refract( normalize( I ), nWorld, mRefractionRatio );",
"vRefract[1] = refract( normalize( I ), nWorld, mRefractionRatio * 0.99 );",
"vRefract[2] = refract( normalize( I ), nWorld, mRefractionRatio * 0.98 );",
"vReflectionFactor = mFresnelBias + mFresnelScale * pow( 1.0 + dot( normalize( I ), nWorld ), mFresnelPower );",
"gl_Position = projectionMatrix * mvPosition;",
"}"
"}"
].join("\n")
},
'normal' : {
uniforms: {
"tNormal": { type: "t", value: 2, texture: null },
"tAO": { type: "t", value: 3, texture: null },
"tDisplacement": { type: "t", value: 4, texture: null },
"uDisplacementBias": { type: "f", value: -0.5 },
"uDisplacementScale":{ type: "f", value: 2.5 },
"uPointLightPos": { type: "v3", value: new THREE.Vector3() },
"uPointLightColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
"uDirLightPos": { type: "v3", value: new THREE.Vector3() },
"uDirLightColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
"uAmbientLightColor":{ type: "c", value: new THREE.Color( 0x050505 ) },
"uDiffuseColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
"uSpecularColor": { type: "c", value: new THREE.Color( 0x111111 ) },
"uAmbientColor": { type: "c", value: new THREE.Color( 0x050505 ) },
"uShininess": { type: "f", value: 30 }
},
fragment_shader: [
"uniform vec3 uDirLightPos;",
"uniform vec3 uDirLightColor;",
"uniform vec3 uPointLightPos;",
"uniform vec3 uPointLightColor;",
"uniform vec3 uAmbientColor;",
"uniform vec3 uDiffuseColor;",
"uniform vec3 uSpecularColor;",
"uniform float uShininess;",
"uniform sampler2D tNormal;",
"uniform sampler2D tAO;",
"varying vec3 vTangent;",
"varying vec3 vBinormal;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vLightWeighting;",
"varying vec3 vPointLightVector;",
"varying vec3 vViewPosition;",
"void main() {",
"vec3 normalTex = normalize( texture2D( tNormal, vUv ).xyz * 2.0 - 1.0 );",
"vec3 aoTex = texture2D( tAO, vUv ).xyz;",
"mat3 tsb = mat3( vTangent, vBinormal, vNormal );",
"vec3 finalNormal = tsb * normalTex;",
"vec3 normal = normalize( finalNormal );",
"vec3 viewPosition = normalize( vViewPosition );",
// point light
"vec4 pointDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );",
"vec4 pointSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );",
"vec3 pointVector = normalize( vPointLightVector );",
"vec3 pointHalfVector = normalize( vPointLightVector + vViewPosition );",
"float pointDotNormalHalf = dot( normal, pointHalfVector );",
"float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );",
"float pointSpecularWeight = 0.0;",
"if ( pointDotNormalHalf >= 0.0 )",
"pointSpecularWeight = pow( pointDotNormalHalf, uShininess );",
"pointDiffuse += vec4( uDiffuseColor, 1.0 ) * pointDiffuseWeight;",
"pointSpecular += vec4( uSpecularColor, 1.0 ) * pointSpecularWeight;",
// directional light
"vec4 dirDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );",
"vec4 dirSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );",
"vec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );",
"vec3 dirVector = normalize( lDirection.xyz );",
"vec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );",
"float dirDotNormalHalf = dot( normal, dirHalfVector );",
"float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
"float dirSpecularWeight = 0.0;",
"if ( dirDotNormalHalf >= 0.0 )",
"dirSpecularWeight = pow( dirDotNormalHalf, uShininess );",
"dirDiffuse += vec4( uDiffuseColor, 1.0 ) * dirDiffuseWeight;",
"dirSpecular += vec4( uSpecularColor, 1.0 ) * dirSpecularWeight;",
// all lights contribution summation
"vec4 totalLight = vec4( uAmbientColor, 1.0 );",
"totalLight += dirDiffuse + dirSpecular;",
"totalLight += pointDiffuse + pointSpecular;",
"gl_FragColor = vec4( totalLight.xyz * vLightWeighting * aoTex, 1.0 );",
"}"
].join("\n"),
vertex_shader: [
"attribute vec4 tangent;",
"uniform vec3 uDirLightPos;",
"uniform vec3 uDirLightColor;",
"uniform vec3 uPointLightPos;",
"uniform vec3 uPointLightColor;",
"uniform vec3 uAmbientLightColor;",
"#ifdef VERTEX_TEXTURES",
"uniform sampler2D tDisplacement;",
"uniform float uDisplacementScale;",
"uniform float uDisplacementBias;",
"#endif",
"varying vec3 vTangent;",
"varying vec3 vBinormal;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vLightWeighting;",
"varying vec3 vPointLightVector;",
"varying vec3 vViewPosition;",
"void main() {",
"vec4 mPosition = objectMatrix * vec4( position, 1.0 );",
"vViewPosition = cameraPosition - mPosition.xyz;",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"vNormal = normalize( normalMatrix * normal );",
// tangent and binormal vectors
"vTangent = normalize( normalMatrix * tangent.xyz );",
"vBinormal = cross( vNormal, vTangent ) * tangent.w;",
"vBinormal = normalize( vBinormal );",
"vUv = uv;",
// ambient light
"vLightWeighting = uAmbientLightColor;",
// point light
"vec4 lPosition = viewMatrix * vec4( uPointLightPos, 1.0 );",
"vPointLightVector = normalize( lPosition.xyz - mvPosition.xyz );",
"float pointLightWeighting = max( dot( vNormal, vPointLightVector ), 0.0 );",
"vLightWeighting += uPointLightColor * pointLightWeighting;",
// directional light
"vec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );",
"float directionalLightWeighting = max( dot( vNormal, normalize( lDirection.xyz ) ), 0.0 );",
"vLightWeighting += uDirLightColor * directionalLightWeighting;",
// displacement mapping
uniforms: {
"tNormal": { type: "t", value: 2, texture: null },
"tAO": { type: "t", value: 3, texture: null },
"tDisplacement": { type: "t", value: 4, texture: null },
"uDisplacementBias": { type: "f", value: -0.5 },
"uDisplacementScale": { type: "f", value: 2.5 },
"uPointLightPos": { type: "v3", value: new THREE.Vector3() },
"uPointLightColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
"uDirLightPos": { type: "v3", value: new THREE.Vector3() },
"uDirLightColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
"uAmbientLightColor": { type: "c", value: new THREE.Color( 0x050505 ) },
"uDiffuseColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
"uSpecularColor": { type: "c", value: new THREE.Color( 0x111111 ) },
"uAmbientColor": { type: "c", value: new THREE.Color( 0x050505 ) },
"uShininess": { type: "f", value: 30 }
},
fragment_shader: [
"uniform vec3 uDirLightPos;",
"uniform vec3 uDirLightColor;",
"uniform vec3 uPointLightPos;",
"uniform vec3 uPointLightColor;",
"uniform vec3 uAmbientColor;",
"uniform vec3 uDiffuseColor;",
"uniform vec3 uSpecularColor;",
"uniform float uShininess;",
"uniform sampler2D tNormal;",
"uniform sampler2D tAO;",
"varying vec3 vTangent;",
"varying vec3 vBinormal;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vLightWeighting;",
"varying vec3 vPointLightVector;",
"varying vec3 vViewPosition;",
"void main() {",
"vec3 normalTex = normalize( texture2D( tNormal, vUv ).xyz * 2.0 - 1.0 );",
"vec3 aoTex = texture2D( tAO, vUv ).xyz;",
"mat3 tsb = mat3( vTangent, vBinormal, vNormal );",
"vec3 finalNormal = tsb * normalTex;",
"vec3 normal = normalize( finalNormal );",
"vec3 viewPosition = normalize( vViewPosition );",
// point light
"vec4 pointDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );",
"vec4 pointSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );",
"vec3 pointVector = normalize( vPointLightVector );",
"vec3 pointHalfVector = normalize( vPointLightVector + vViewPosition );",
"float pointDotNormalHalf = dot( normal, pointHalfVector );",
"float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );",
"float pointSpecularWeight = 0.0;",
"if ( pointDotNormalHalf >= 0.0 )",
"pointSpecularWeight = pow( pointDotNormalHalf, uShininess );",
"pointDiffuse += vec4( uDiffuseColor, 1.0 ) * pointDiffuseWeight;",
"pointSpecular += vec4( uSpecularColor, 1.0 ) * pointSpecularWeight;",
// directional light
"vec4 dirDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );",
"vec4 dirSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );",
"vec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );",
"vec3 dirVector = normalize( lDirection.xyz );",
"vec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );",
"float dirDotNormalHalf = dot( normal, dirHalfVector );",
"float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
"float dirSpecularWeight = 0.0;",
"if ( dirDotNormalHalf >= 0.0 )",
"dirSpecularWeight = pow( dirDotNormalHalf, uShininess );",
"dirDiffuse += vec4( uDiffuseColor, 1.0 ) * dirDiffuseWeight;",
"dirSpecular += vec4( uSpecularColor, 1.0 ) * dirSpecularWeight;",
// all lights contribution summation
"vec4 totalLight = vec4( uAmbientColor, 1.0 );",
"totalLight += dirDiffuse + dirSpecular;",
"totalLight += pointDiffuse + pointSpecular;",
"gl_FragColor = vec4( totalLight.xyz * vLightWeighting * aoTex, 1.0 );",
"}"
].join("\n"),
vertex_shader: [
"attribute vec4 tangent;",
"uniform vec3 uDirLightPos;",
"uniform vec3 uDirLightColor;",
"uniform vec3 uPointLightPos;",
"uniform vec3 uPointLightColor;",
"uniform vec3 uAmbientLightColor;",
"#ifdef VERTEX_TEXTURES",
"vec3 dv = texture2D( tDisplacement, uv ).xyz;",
"float df = uDisplacementScale * dv.x + uDisplacementBias;",
"vec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;",
"gl_Position = projectionMatrix * displacedPosition;",
"#else",
"gl_Position = projectionMatrix * mvPosition;",
"uniform sampler2D tDisplacement;",
"uniform float uDisplacementScale;",
"uniform float uDisplacementBias;",
"#endif",
"}"
].join("\n")
"varying vec3 vTangent;",
"varying vec3 vBinormal;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vLightWeighting;",
"varying vec3 vPointLightVector;",
"varying vec3 vViewPosition;",
"void main() {",
"vec4 mPosition = objectMatrix * vec4( position, 1.0 );",
"vViewPosition = cameraPosition - mPosition.xyz;",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"vNormal = normalize( normalMatrix * normal );",
// tangent and binormal vectors
"vTangent = normalize( normalMatrix * tangent.xyz );",
"vBinormal = cross( vNormal, vTangent ) * tangent.w;",
"vBinormal = normalize( vBinormal );",
"vUv = uv;",
// ambient light
"vLightWeighting = uAmbientLightColor;",
// point light
"vec4 lPosition = viewMatrix * vec4( uPointLightPos, 1.0 );",
"vPointLightVector = normalize( lPosition.xyz - mvPosition.xyz );",
"float pointLightWeighting = max( dot( vNormal, vPointLightVector ), 0.0 );",
"vLightWeighting += uPointLightColor * pointLightWeighting;",
// directional light
"vec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );",
"float directionalLightWeighting = max( dot( vNormal, normalize( lDirection.xyz ) ), 0.0 );",
"vLightWeighting += uDirLightColor * directionalLightWeighting;",
// displacement mapping
"#ifdef VERTEX_TEXTURES",
"vec3 dv = texture2D( tDisplacement, uv ).xyz;",
"float df = uDisplacementScale * dv.x + uDisplacementBias;",
"vec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;",
"gl_Position = projectionMatrix * displacedPosition;",
"#else",
"gl_Position = projectionMatrix * mvPosition;",
"#endif",
"}"
].join("\n")
},
/*
'hatching' : {
uniforms: {
"uSampler": { type: "t", value: 2, texture: null },
"uDirLightPos": { type: "v3", value: new THREE.Vector3() },
"uDirLightColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
"uAmbientLightColor": { type: "c", value: new THREE.Color( 0x050505 ) }
},
vertex_shader: [
"varying vec3 vNormal;",
"void main() {",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"vNormal = normalize( normalMatrix * normal );",
"}"
].join("\n"),
fragment_shader: [
"uniform vec3 uDirLightPos;",
"uniform vec3 uDirLightColor;",
"uniform vec3 uAmbientLightColor;",
"uniform sampler2D uSampler;",
"varying vec3 vNormal;",
"void main() {",
"float directionalLightWeighting = max(dot(normalize(vNormal), uDirLightPos), 0.0);",
"vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;",
"gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);",
"if (length(lightWeighting) < 1.00) {",
"if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {",
"gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
"}",
"}",
"if (length(lightWeighting) < 0.75) {",
"if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {",
"gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
"}",
"}",
"if (length(lightWeighting) < 0.50) {",
"if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
"gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
"}",
"}",
"if (length(lightWeighting) < 0.3465) {",
"if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
"gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
"}",
"}",
"}"
].join("\n")
},
*/
'basic': {
uniforms: {},
vertex_shader: [
"void main() {",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragment_shader: [
"void main() {",
"gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);",
"}"
].join("\n")
}
}
};
src/materials/MeshShaderMaterial.js
浏览文件 @ 8e53294e
......@@ -24,7 +24,7 @@ THREE.MeshShaderMaterial = function ( parameters ) {
this.opacity = 1;
this.shading = THREE.SmoothShading;
this.blending = THREE.NormalBlending;
this.wireframe = false;
this.wireframe_linewidth = 1;
this.wireframe_linecap = 'round';
......
src/renderers/Projector.js
浏览文件 @ 8e53294e
......@@ -24,7 +24,7 @@ THREE.Projector = function() {
var o, ol, v, vl, f, fl, n, nl, objects, object,
objectMatrix, objectRotationMatrix, objectMaterial, objectOverdraw,
vertices, vertex, vertexPositionScreen,
geometry, vertices, vertex, vertexPositionScreen,
faces, face, faceVertexNormals, normal, v1, v2, v3, v4;
_renderList = [];
......@@ -48,9 +48,11 @@ THREE.Projector = function() {
if ( object instanceof THREE.Mesh ) {
geometry = object.geometry;
// vertices
vertices = object.geometry.vertices;
vertices = geometry.vertices;
for ( v = 0, vl = vertices.length; v < vl; v++ ) {
......@@ -74,7 +76,7 @@ THREE.Projector = function() {
// faces
faces = object.geometry.faces;
faces = geometry.faces;
for ( f = 0, fl = faces.length; f < fl; f ++ ) {
......
src/renderers/WebGLRenderer.js
浏览文件 @ 8e53294e
......@@ -195,7 +195,7 @@ THREE.WebGLRenderer = function ( scene ) {
vertexArray.push( v3.x, v3.y, v3.z );
if ( object.geometry.hasTangents ) {
t1 = object.geometry.vertices[ face.a ].tangent;
t2 = object.geometry.vertices[ face.b ].tangent;
t3 = object.geometry.vertices[ face.c ].tangent;
......@@ -203,12 +203,12 @@ THREE.WebGLRenderer = function ( scene ) {
tangentArray.push( t1.x, t1.y, t1.z, t1.w );
tangentArray.push( t2.x, t2.y, t2.z, t2.w );
tangentArray.push( t3.x, t3.y, t3.z, t3.w );
}
if ( vertexNormals.length == 3 && needsSmoothNormals ) {
for ( i = 0; i < 3; i ++ ) {
normalArray.push( vertexNormals[ i ].x, vertexNormals[ i ].y, vertexNormals[ i ].z );
......@@ -256,9 +256,9 @@ THREE.WebGLRenderer = function ( scene ) {
vertexArray.push( v2.x, v2.y, v2.z );
vertexArray.push( v3.x, v3.y, v3.z );
vertexArray.push( v4.x, v4.y, v4.z );
if ( object.geometry.hasTangents ) {
t1 = object.geometry.vertices[ face.a ].tangent;
t2 = object.geometry.vertices[ face.b ].tangent;
t3 = object.geometry.vertices[ face.c ].tangent;
......@@ -268,17 +268,17 @@ THREE.WebGLRenderer = function ( scene ) {
tangentArray.push( t2.x, t2.y, t2.z, t2.w );
tangentArray.push( t3.x, t3.y, t3.z, t3.w );
tangentArray.push( t4.x, t4.y, t4.z, t4.w );
}
if ( vertexNormals.length == 4 && needsSmoothNormals ) {
for ( i = 0; i < 4; i ++ ) {
normalArray.push( vertexNormals[ i ].x, vertexNormals[ i ].y, vertexNormals[ i ].z );
}
} else {
for ( i = 0; i < 4; i ++ ) {
......@@ -331,13 +331,13 @@ THREE.WebGLRenderer = function ( scene ) {
_gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( normalArray ), _gl.STATIC_DRAW );
if ( object.geometry.hasTangents ) {
geometryChunk.__webGLTangentBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ARRAY_BUFFER, geometryChunk.__webGLTangentBuffer );
_gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( tangentArray ), _gl.STATIC_DRAW );
}
if ( uvArray.length > 0 ) {
geometryChunk.__webGLUVBuffer = _gl.createBuffer();
......@@ -414,9 +414,9 @@ THREE.WebGLRenderer = function ( scene ) {
mWireframe = material.wireframe;
mLineWidth = material.wireframe_linewidth;
mBlending = material.blending;
setUniforms( program, material.uniforms );
}
......@@ -540,21 +540,21 @@ THREE.WebGLRenderer = function ( scene ) {
// normals
if ( attributes.normal >= 0 ) {
_gl.bindBuffer( _gl.ARRAY_BUFFER, geometryChunk.__webGLNormalBuffer );
_gl.vertexAttribPointer( attributes.normal, 3, _gl.FLOAT, false, 0, 0 );
}
// tangents
if ( attributes.tangent >= 0 ) {
_gl.bindBuffer( _gl.ARRAY_BUFFER, geometryChunk.__webGLTangentBuffer );
_gl.vertexAttribPointer( attributes.tangent, 4, _gl.FLOAT, false, 0, 0 );
}
// uvs
if ( attributes.uv >= 0 ) {
......@@ -785,7 +785,6 @@ THREE.WebGLRenderer = function ( scene ) {
object.autoUpdateMatrix && object.updateMatrix();
_modelViewMatrix.multiply( camera.matrix, object.matrix );
_modelViewMatrixArray.set( _modelViewMatrix.flatten() );
_normalMatrix = THREE.Matrix4.makeInvert3x3( _modelViewMatrix ).transpose();
......@@ -878,18 +877,18 @@ THREE.WebGLRenderer = function ( scene ) {
};
this.supportsVertexTextures = function() {
return maxVertexTextures() > 0;
};
function maxVertexTextures() {
return _gl.getParameter( _gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS );
};
function initGL() {
try {
......@@ -1247,7 +1246,7 @@ THREE.WebGLRenderer = function ( scene ) {
prefix_vertex = [
maxVertexTextures() > 0 ? "#define VERTEX_TEXTURES" : "",
"uniform mat4 objectMatrix;",
"uniform mat4 modelViewMatrix;",
"uniform mat4 projectionMatrix;",
......@@ -1296,11 +1295,11 @@ THREE.WebGLRenderer = function ( scene ) {
} else if( type == "f" ) {
_gl.uniform1f( location, value );
} else if( type == "v3" ) {
_gl.uniform3f( location, value.x, value.y, value.z );
} else if( type == "c" ) {
_gl.uniform3f( location, value.r, value.g, value.b );
......
src/renderers/WebGLRenderer2.js 0 → 100644
浏览文件 @ 8e53294e
/**
* @author mrdoob / http://mrdoob.com/
*/
THREE.WebGLRenderer2 = function () {
var _canvas = document.createElement( 'canvas' ),
_gl, _currentProgram,
_modelViewMatrix = new THREE.Matrix4(),
_viewMatrixArray = new Float32Array( 16 ),
_modelViewMatrixArray = new Float32Array( 16 ),
_projectionMatrixArray = new Float32Array( 16 ),
_normalMatrixArray = new Float32Array( 9 ),
_objectMatrixArray = new Float32Array( 16 );
try {
_gl = _canvas.getContext( 'experimental-webgl', { antialias: true } );
} catch(e) { }
if ( !_gl ) {
alert("WebGL not supported");
throw "cannot create webgl context";
}
_gl.clearColor( 0, 0, 0, 1 );
_gl.clearDepth( 1 );
_gl.enable( _gl.DEPTH_TEST );
_gl.depthFunc( _gl.LEQUAL );
_gl.frontFace( _gl.CCW );
_gl.cullFace( _gl.BACK );
_gl.enable( _gl.CULL_FACE );
_gl.enable( _gl.BLEND );
_gl.blendFunc( _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA );
_gl.clearColor( 0, 0, 0, 0 );
this.domElement = _canvas;
this.autoClear = true;
this.setSize = function ( width, height ) {
_canvas.width = width;
_canvas.height = height;
_gl.viewport( 0, 0, _canvas.width, _canvas.height );
};
this.clear = function () {
_gl.clear( _gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT );
};
this.render = function( scene, camera ) {
var o, ol;
this.autoClear && this.clear();
camera.autoUpdateMatrix && camera.updateMatrix();
// Setup camera matrices
_viewMatrixArray.set( camera.matrix.flatten() );
_projectionMatrixArray.set( camera.projectionMatrix.flatten() );
for ( o = 0, ol = scene.objects.length; o < ol; o++ ) {
object = scene.objects[ o ];
if ( object.visible ) {
renderObject( object );
}
}
function renderObject( object ) {
var geometry, material, m, nl,
program, attributes;
object.autoUpdateMatrix && object.updateMatrix();
// Setup object matrices
_objectMatrixArray.set( object.matrix.flatten() );
_modelViewMatrix.multiply( camera.matrix, object.matrix );
_modelViewMatrixArray.set( _modelViewMatrix.flatten() );
_normalMatrix = THREE.Matrix4.makeInvert3x3( _modelViewMatrix ).transpose();
_normalMatrixArray.set( _normalMatrix.m );
if ( object instanceof THREE.Mesh ) {
geometry = object.geometry;
if ( geometry.__webglBuffers == undefined ) {
if ( buildBuffers( geometry ) == false ) return;
}
for ( m = 0, ml = object.material.length; m < ml; m ++ ) {
material = object.material[ m ];
if ( material.__webglProgram == undefined ) {
if ( createProgram( material ) == false ) continue;
}
program = material.__webglProgram;
attributes = program.attributes;
if( program != _currentProgram ) {
_gl.useProgram( program );
_currentProgram = program;
}
if ( material instanceof THREE.MeshBasicMaterial ||
material instanceof THREE.MeshLambertMaterial ||
material instanceof THREE.MeshPhongMaterial ) {
_gl.uniform3f( program.uniforms.mColor, material.color.r, material.color.g, material.color.b );
_gl.uniform1f( program.uniforms.mOpacity, material.opacity );
if ( material.map ) {
setTexture( material.map, 0 );
_gl.uniform1i( program.uniforms.tMap, 0 );
}
} else if ( material instanceof THREE.MeshNormalMaterial ) {
_gl.uniform1f( program.uniforms.mOpacity, material.opacity );
}
_gl.uniform3f( program.uniforms.cameraPosition, camera.position.x, camera.position.y, camera.position.z );
_gl.uniformMatrix4fv( program.uniforms.viewMatrix, false, _viewMatrixArray );
_gl.uniformMatrix4fv( program.uniforms.projectionMatrix, false, _projectionMatrixArray );
_gl.uniformMatrix4fv( program.uniforms.objectMatrix, false, _objectMatrixArray );
_gl.uniformMatrix4fv( program.uniforms.modelViewMatrix, false, _modelViewMatrixArray );
_gl.uniformMatrix3fv( program.uniforms.normalMatrix, false, _normalMatrixArray );
_gl.bindBuffer( _gl.ARRAY_BUFFER, geometry.__webglBuffers.vertexBuffer );
_gl.vertexAttribPointer( attributes.position, 3, _gl.FLOAT, false, 0, 0 );
if ( attributes.normal >= 0 ) {
_gl.bindBuffer( _gl.ARRAY_BUFFER, geometry.__webglBuffers.normalBuffer );
_gl.vertexAttribPointer( attributes.normal, 3, _gl.FLOAT, false, 0, 0 );
}
if ( attributes.uv >= 0 ) {
if ( geometry.__webglBuffers.uvBuffer ) {
_gl.bindBuffer( _gl.ARRAY_BUFFER, geometry.__webglBuffers.uvBuffer );
_gl.enableVertexAttribArray( attributes.uv );
_gl.vertexAttribPointer( attributes.uv, 2, _gl.FLOAT, false, 0, 0 );
} else {
_gl.disableVertexAttribArray( attributes.uv );
}
}
if ( ! material.wireframe ) {
_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, geometry.__webglBuffers.faceBuffer );
_gl.drawElements( _gl.TRIANGLES, geometry.__webglBuffers.faceCount, _gl.UNSIGNED_SHORT, 0 );
} else {
_gl.lineWidth( material.wireframe_linewidth );
_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, geometry.__webglBuffers.lineBuffer );
_gl.drawElements( _gl.LINES, geometry.__webglBuffers.lineCount, _gl.UNSIGNED_SHORT, 0 );
}
}
}
}
// Buffers
function buildBuffers( geometry ) {
var f, fl, face, v1, v2, v3, vertexNormals, normal, uv,
vertexIndex = 0, verticesArray = [], facesArray = [], linesArray = [],
normalsArray = [], uvsArray = [],
buffers = {};
for ( f = 0, fl = geometry.faces.length; f < fl; f++ ) {
face = geometry.faces[ f ];
uv = geometry.uvs[ f ];
vertexNormals = face.vertexNormals;
faceNormal = face.normal;
if ( face instanceof THREE.Face3 ) {
v1 = geometry.vertices[ face.a ].position;
v2 = geometry.vertices[ face.b ].position;
v3 = geometry.vertices[ face.c ].position;
verticesArray.push( v1.x, v1.y, v1.z );
verticesArray.push( v2.x, v2.y, v2.z );
verticesArray.push( v3.x, v3.y, v3.z );
if ( vertexNormals.length == 3 ) {
for ( i = 0; i < 3; i ++ ) {
normalsArray.push( vertexNormals[ i ].x, vertexNormals[ i ].y, vertexNormals[ i ].z );
}
} else {
for ( i = 0; i < 3; i ++ ) {
normalsArray.push( faceNormal.x, faceNormal.y, faceNormal.z );
}
}
if ( uv ) {
for ( i = 0; i < 3; i ++ ) {
uvsArray.push( uv[ i ].u, uv[ i ].v );
}
}
facesArray.push( vertexIndex, vertexIndex + 1, vertexIndex + 2 );
// TODO: don't add lines that already exist (faces sharing edge)
linesArray.push( vertexIndex, vertexIndex + 1 );
linesArray.push( vertexIndex, vertexIndex + 2 );
linesArray.push( vertexIndex + 1, vertexIndex + 2 );
vertexIndex += 3;
} else if ( face instanceof THREE.Face4 ) {
v1 = geometry.vertices[ face.a ].position;
v2 = geometry.vertices[ face.b ].position;
v3 = geometry.vertices[ face.c ].position;
v4 = geometry.vertices[ face.d ].position;
verticesArray.push( v1.x, v1.y, v1.z );
verticesArray.push( v2.x, v2.y, v2.z );
verticesArray.push( v3.x, v3.y, v3.z );
verticesArray.push( v4.x, v4.y, v4.z );
if ( vertexNormals.length == 4 ) {
for ( i = 0; i < 4; i ++ ) {
normalsArray.push( vertexNormals[ i ].x, vertexNormals[ i ].y, vertexNormals[ i ].z );
}
} else {
for ( i = 0; i < 4; i ++ ) {
normalsArray.push( faceNormal.x, faceNormal.y, faceNormal.z );
}
}
if ( uv ) {
for ( i = 0; i < 4; i ++ ) {
uvsArray.push( uv[ i ].u, uv[ i ].v );
}
}
facesArray.push( vertexIndex, vertexIndex + 1, vertexIndex + 2 );
facesArray.push( vertexIndex, vertexIndex + 2, vertexIndex + 3 );
// TODO: don't add lines that already exist (faces sharing edge)
linesArray.push( vertexIndex, vertexIndex + 1 );
linesArray.push( vertexIndex, vertexIndex + 2 );
linesArray.push( vertexIndex, vertexIndex + 3 );
linesArray.push( vertexIndex + 1, vertexIndex + 2 );
linesArray.push( vertexIndex + 2, vertexIndex + 3 );
vertexIndex += 4;
}
}
if ( !verticesArray.length ) return false;
buffers.vertexBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ARRAY_BUFFER, buffers.vertexBuffer );
_gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( verticesArray ), _gl.STATIC_DRAW );
buffers.normalBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ARRAY_BUFFER, buffers.normalBuffer );
_gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( normalsArray ), _gl.STATIC_DRAW );
if ( uvsArray.length > 0 ) {
buffers.uvBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ARRAY_BUFFER, buffers.uvBuffer );
_gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( uvsArray ), _gl.STATIC_DRAW );
}
buffers.faceBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, buffers.faceBuffer );
_gl.bufferData( _gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( facesArray ), _gl.STATIC_DRAW );
buffers.lineBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, buffers.lineBuffer );
_gl.bufferData( _gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( linesArray ), _gl.STATIC_DRAW );
buffers.faceCount = facesArray.length;
buffers.lineCount = linesArray.length;
geometry.__webglBuffers = buffers;
return true;
}
// Shaders
function createProgram( material ) {
var pvs = '', vs = '', pfs = '', fs = '',
identifiers = [ 'viewMatrix', 'modelViewMatrix', 'projectionMatrix', 'normalMatrix', 'objectMatrix', 'cameraPosition' ];
if ( material instanceof THREE.MeshBasicMaterial ||
material instanceof THREE.MeshLambertMaterial ||
material instanceof THREE.MeshPhongMaterial ) {
vs += 'void main() {\n';
fs += 'void main() {\n';
vs += 'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n';
pfs += 'uniform vec3 mColor;\n';
pfs += 'uniform float mOpacity;\n';
fs += 'gl_FragColor = vec4( mColor.xyz, mOpacity );\n';
if ( material.map ) {
pvs += 'varying vec2 vUv;\n',
vs += 'vUv = uv;\n',
pfs += 'uniform sampler2D tMap;\n';
pfs += 'varying vec2 vUv;\n';
fs += 'gl_FragColor *= texture2D( tMap, vUv );\n';
identifiers.push( 'tMap' );
}
identifiers.push( 'mColor' );
identifiers.push( 'mOpacity' );
vs += '}';
fs += '}';
} else if ( material instanceof THREE.MeshNormalMaterial ) {
vs += 'void main() {\n';
fs += 'void main() {\n';
pvs += 'varying vec3 vNormal;\n';
vs += 'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n';
vs += 'vNormal = normalize( normalMatrix * normal );\n';
pfs += 'uniform float mOpacity;\n';
pfs += 'varying vec3 vNormal;\n';
fs += 'gl_FragColor = vec4( ( normalize( vNormal ) + 1.0 ) * 0.5, mOpacity );\n';
identifiers.push( 'mOpacity' );
vs += '}';
fs += '}';
} else if ( material instanceof THREE.MeshShaderMaterial ) {
vs = material.vertex_shader;
fs = material.fragment_shader;
for( uniform in material.uniforms ) {
identifiers.push( uniform );
}
} else {
return false;
}
material.__webglProgram = compileProgram( pvs + vs, pfs + fs );
cacheUniformLocations( material.__webglProgram, identifiers );
cacheAttributeLocations( material.__webglProgram, [ "position", "normal", "uv"/*, "tangent"*/ ] );
return true;
}
function compileProgram( vertex_shader, fragment_shader ) {
var program = _gl.createProgram(), shader
prefix_vertex = [
maxVertexTextures() > 0 ? "#define VERTEX_TEXTURES" : "",
"uniform mat4 objectMatrix;",
"uniform mat4 modelViewMatrix;",
"uniform mat4 projectionMatrix;",
//"uniform mat4 viewMatrix;",
"uniform mat3 normalMatrix;",
"uniform vec3 cameraPosition;",
"attribute vec3 position;",
"attribute vec3 normal;",
"attribute vec2 uv;",
""
].join("\n"),
prefix_fragment = [
"#ifdef GL_ES",
"precision highp float;",
"#endif",
//"uniform mat4 viewMatrix;",
""
].join("\n");
// Vertex shader
shader = _gl.createShader( _gl.VERTEX_SHADER );
_gl.shaderSource( shader, prefix_vertex + vertex_shader );
_gl.compileShader( shader );
_gl.attachShader( program, shader );
if ( !_gl.getShaderParameter( shader, _gl.COMPILE_STATUS ) ) {
alert( _gl.getShaderInfoLog( shader ) );
return null;
}
// Fragment Shader
shader = _gl.createShader( _gl.FRAGMENT_SHADER );
_gl.shaderSource( shader, prefix_fragment + fragment_shader );
_gl.compileShader( shader );
_gl.attachShader( program, shader );
if ( !_gl.getShaderParameter( shader, _gl.COMPILE_STATUS ) ) {
alert( _gl.getShaderInfoLog( shader ) );
return null;
}
_gl.linkProgram( program );
if ( !_gl.getProgramParameter( program, _gl.LINK_STATUS ) ) {
alert( "Could not initialise shaders.\n" +
"VALIDATE_STATUS: " + _gl.getProgramParameter( program, _gl.VALIDATE_STATUS ) + "\n" +
"ERROR: " + _gl.getError() + "\n\n" +
"Vertex Shader: \n" + prefix_vertex + vertex_shader + "\n\n" +
"Fragment Shader: \n" + prefix_fragment + fragment_shader );
}
program.uniforms = {};
program.attributes = {};
return program;
}
function cacheUniformLocations( program, identifiers ) {
var i, l, id;
for( i = 0, l = identifiers.length; i < l; i++ ) {
id = identifiers[ i ];
program.uniforms[ id ] = _gl.getUniformLocation( program, id );
}
}
function cacheAttributeLocations( program, identifiers ) {
var i, l, id;
for( i = 0, l = identifiers.length; i < l; i++ ) {
id = identifiers[ i ];
program.attributes[ id ] = _gl.getAttribLocation( program, id );
if ( program.attributes[ id ] >= 0 ) {
_gl.enableVertexAttribArray( program.attributes[ id ] );
}
}
}
// Textures
function setTexture( texture, slot ) {
if ( !texture.__webglTexture && texture.image.loaded ) {
texture.__webglTexture = _gl.createTexture();
_gl.bindTexture( _gl.TEXTURE_2D, texture.__webglTexture );
_gl.texImage2D( _gl.TEXTURE_2D, 0, _gl.RGBA, _gl.RGBA, _gl.UNSIGNED_BYTE, texture.image );
_gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_WRAP_S, paramThreeToGL( texture.wrap_s ) );
_gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_WRAP_T, paramThreeToGL( texture.wrap_t ) );
_gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_MAG_FILTER, paramThreeToGL( texture.mag_filter ) );
_gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_MIN_FILTER, paramThreeToGL( texture.min_filter ) );
_gl.generateMipmap( _gl.TEXTURE_2D );
_gl.bindTexture( _gl.TEXTURE_2D, null );
}
_gl.activeTexture( _gl.TEXTURE0 + slot );
_gl.bindTexture( _gl.TEXTURE_2D, texture.__webglTexture );
}
function maxVertexTextures() {
return _gl.getParameter( _gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS );
};
function paramThreeToGL( p ) {
switch ( p ) {
case THREE.RepeatWrapping: return _gl.REPEAT; break;
case THREE.ClampToEdgeWrapping: return _gl.CLAMP_TO_EDGE; break;
case THREE.MirroredRepeatWrapping: return _gl.MIRRORED_REPEAT; break;
case THREE.NearestFilter: return _gl.NEAREST; break;
case THREE.NearestMipMapNearestFilter: return _gl.NEAREST_MIPMAP_NEAREST; break;
case THREE.NearestMipMapLinearFilter: return _gl.NEAREST_MIPMAP_LINEAR; break;
case THREE.LinearFilter: return _gl.LINEAR; break;
case THREE.LinearMipMapNearestFilter: return _gl.LINEAR_MIPMAP_NEAREST; break;
case THREE.LinearMipMapLinearFilter: return _gl.LINEAR_MIPMAP_LINEAR; break;
}
return 0;
}
};
};
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或