home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merged with mrdoob's branch. Got WebGLRenderer working again :)

Browse Source 
Changed OBJ -> Three.js converter to use new materials system (eventual old models need to be reconverted).

Limitations:

  - one use case is now much slower
    - when a mesh has each face with different color (e.g. polyfield in examples/test.html)
    - before this used FaceColorFill material and in WebGLRenderer it was rendered fast with color attribute array
    - now when FaceColorFill material is gone, each face gets own VBO :(

  - material sorting uses Materials "toString" methods for hashing, so it's very important to keep these in a good shape
This commit is contained in:
alteredq
2010-10-28 19:35:13 +02:00
parent b6904f3d72 71f96a5f1b
commit 79ab4bf2e6
38 changed files with 1807 additions and 1830 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/Three.js
+2 -2
View File
File diff suppressed because one or more lines are too long
build/ThreeDebug.js
+2 -2
View File
File diff suppressed because one or more lines are too long
examples/camera_free.html
+2 -3
View File
@@ -39,11 +39,10 @@
<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/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
examples/geometry/Qrcode.js
+748 -746
View File
File diff suppressed because it is too large Load Diff
examples/geometry_cube.html
+2 -2
View File
@@ -74,10 +74,10 @@
for (var i = 0; i < geometry.faces.length; i++) {
geometry.faces[i].color.setRGBA( Math.random() * 0.5, Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 1 );
geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 1 ) ];
}
cube = new THREE.Mesh(geometry, new THREE.MeshFaceColorFillMaterial() );
cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial() );
cube.position.y = 150;
scene.addObject( cube );
examples/geometry_earth.html
+1 -1
View File
@@ -98,7 +98,7 @@
canvas.width = 32;
canvas.height = 32;
var material = new THREE.MeshBitmapUVMappingMaterial( canvas );
var material = new THREE.MeshBitmapMaterial( canvas );
var image = new Image();
examples/geometry_terrain.html
+1 -1
View File
@@ -145,7 +145,7 @@
var heightMap = height( 1024, 1024 );
var textureMap = shadow( heightMap );
var material = new THREE.MeshBitmapUVMappingMaterial( textureMap );
var material = new THREE.MeshBitmapMaterial( textureMap );
var quality = 20;
var quality1 = quality + 1;
examples/geometry_vr.html
+1 -1
View File
@@ -121,7 +121,7 @@
function loadTexture( path ) {
var material = new THREE.MeshBitmapUVMappingMaterial( texture_placeholder );
var material = new THREE.MeshBitmapMaterial( texture_placeholder );
var texture = new Image();
examples/hci_clickcube.html
+10 -11
View File
@@ -37,11 +37,10 @@
<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/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
@@ -115,33 +114,33 @@
geometry = new ClickCube( 200, 200, 200,
function ( s, c, o, f, p ) {
f.color.setRGBA( Math.random() * 0.5, Math.random() * 0.5, Math.random() * 0.5, opacity );
f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
document.getElementById( "msg" ).innerHTML = "Click detected at " + p;
});
for (var i = 0; i < geometry.faces.length; i++) {
geometry.faces[i].color.setRGBA( Math.random() * 0.5, Math.random() * 0.5, Math.random() * 0.5, opacity );
geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
}
cube = new THREE.Mesh( geometry, new THREE.MeshFaceColorFillMaterial() );
cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
cube.position.y = 150;
scene.addObject(cube);
geometry2 = new ClickCube( 100, 100, 100,
function ( s, c, o, f, p ) {
f.color.setRGBA( Math.random() * 0.5, Math.random() * 0.5, Math.random() * 0.5, opacity );
f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
document.getElementById( "msg" ).innerHTML = "Click detected at " + p;
});
for (var i = 0; i < geometry2.faces.length; i++) {
geometry2.faces[i].color.setRGBA( Math.random() * 0.5, Math.random() * 0.5, Math.random() * 0.5, opacity );
geometry2.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
}
cube2 = new THREE.Mesh( geometry2, new THREE.MeshFaceColorFillMaterial() );
cube2 = new THREE.Mesh( geometry2, new THREE.MeshFaceMaterial() );
cube2.position.y = 150;
cube2.position.z = 200;
scene.addObject(cube2);
// Plane
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
examples/lights_test.html
+4 -5
View File
@@ -39,11 +39,10 @@
<div id="log"></div>
<script type="text/javascript" src="../build/Three.js"></script>
<!--
<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>
@@ -67,11 +66,10 @@
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
@@ -83,6 +81,7 @@
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.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="geometry/primitives/Sphere.js"></script>
examples/materials_test.html
+20 -21
View File
@@ -69,11 +69,10 @@
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
@@ -221,14 +220,6 @@
geometry = new Female02( "obj/female02" );
// full-mesh wireframe overlay
//geometry.materials.push ( new THREE.MeshColorStrokeMaterial(0xff0000, 1, 1.5) );
// full-mesh color overlay
var colorOverlay = new THREE.MeshColorFillMaterial(0xff0000, 0.5)
colorOverlay.decalIndex = 4;
geometry.materials.push ( colorOverlay );
// PROCEDURAL TEXTURES (decals)
var x1 = document.createElement( "canvas" );
@@ -258,18 +249,26 @@
xc2.fillRect(i*4, 5, 2, 54);
}
var xm1 = new THREE.MeshBitmapUVMappingMaterial( x1 );
xm1.loaded = 1;
xm1.decalIndex = 0; // index of the original UV mapped material
var xm1 = new THREE.MeshBitmapMaterial( x1 );
xm1.loaded = 1; // this is procedurally generated texture
var xm2 = new THREE.MeshBitmapUVMappingMaterial( x2 );
xm2.loaded = 1;
xm2.decalIndex = 1; // index of the original UV mapped material
var xm2 = new THREE.MeshBitmapMaterial( x2 );
xm2.loaded = 1; // this is procedurally generated texture
geometry.materials.push ( xm1 );
geometry.materials.push ( xm2 );
geometry.materials[0].push ( xm1 ); // goes to faces with material 0
geometry.materials[1].push ( xm2 ); // goes to faces with material 1
geometry.materials[4].push ( new THREE.MeshColorFillMaterial(0xff0000, 0.5) );
zmesh = new THREE.Mesh( geometry, geometry.materials, 1 );
var materials = [ new THREE.MeshFaceMaterial() ];
// full-mesh wireframe overlay
//materials.push( new THREE.MeshColorStrokeMaterial(0xff0000, 1, 1.5) );
// full-mesh color overlay
//materials.push( new THREE.MeshColorFillMaterial(0xff0000, 0.5) );
zmesh = new THREE.Mesh( geometry, materials, 1 );
zmesh.position.x = -80;
zmesh.position.z = 50;
zmesh.position.y = FLOOR;
@@ -321,7 +320,7 @@
xc.font = "50pt arial bold";
xc.fillText(i, 10, 64);
var xm = new THREE.MeshBitmapUVMappingMaterial( x );
var xm = new THREE.MeshBitmapMaterial( x );
xm.loaded = 1;
mesh = new THREE.Mesh( new Plane( size, size ), xm );
examples/materials_video.html
+2 -2
View File
@@ -83,7 +83,7 @@
textureContext.fillStyle = '#000000';
textureContext.fillRect( 0, 0, 480, 204 );
var material = new THREE.MeshBitmapUVMappingMaterial( texture );
var material = new THREE.MeshBitmapMaterial( texture );
textureReflection = document.createElement( 'canvas' );
textureReflection.width = 480;
@@ -97,7 +97,7 @@
textureReflectionGradient.addColorStop( 0.2, 'rgba(240, 240, 240, 1)' );
textureReflectionGradient.addColorStop( 1, 'rgba(240, 240, 240, 0.8)' );
var materialReflection = new THREE.MeshBitmapUVMappingMaterial( textureReflection );
var materialReflection = new THREE.MeshBitmapMaterial( textureReflection );
//
examples/obj/female02/female02.js
+15 -15
View File
@@ -15859,18 +15859,18 @@ var Female02 = function ( urlbase ) {
scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
}
function f3( a, b, c, material ) {
var color = material_color(material);
scope.faces.push( new THREE.Face3( a, b, c, null, new THREE.Color(color), material ) );
function f3( a, b, c, mi ) {
var material = scope.materials[ mi ];
scope.faces.push( new THREE.Face3( a, b, c, null, material ) );
}
function f4( a, b, c, d, material ) {
var color = material_color(material);
scope.faces.push( new THREE.Face4( a, b, c, d, null, new THREE.Color(color), material ) );
function f4( a, b, c, d, mi ) {
var material = scope.materials[ mi ];
scope.faces.push( new THREE.Face4( a, b, c, d, null, material ) );
}
function f3n( a, b, c, material, n1, n2, n3 ) {
var color = material_color(material);
function f3n( a, b, c, mi, n1, n2, n3 ) {
var material = scope.materials[ mi ];
var n1x = normals[n1][0];
var n1y = normals[n1][1];
var n1z = normals[n1][2];
@@ -15882,11 +15882,11 @@ var Female02 = function ( urlbase ) {
var n3z = normals[n3][2];
scope.faces.push( new THREE.Face3( a, b, c,
[new THREE.Vector3( n1x, n1y, n1z ), new THREE.Vector3( n2x, n2y, n2z ), new THREE.Vector3( n3x, n3y, n3z )],
new THREE.Color(color), material ) );
material ) );
}
function f4n( a, b, c, d, material, n1, n2, n3, n4 ) {
var color = material_color(material);
function f4n( a, b, c, d, mi, n1, n2, n3, n4 ) {
var material = scope.materials[ mi ];
var n1x = normals[n1][0];
var n1y = normals[n1][1];
var n1z = normals[n1][2];
@@ -15901,7 +15901,7 @@ var Female02 = function ( urlbase ) {
var n4z = normals[n4][2];
scope.faces.push( new THREE.Face4( a, b, c, d,
[new THREE.Vector3( n1x, n1y, n1z ), new THREE.Vector3( n2x, n2y, n2z ), new THREE.Vector3( n3x, n3y, n3z ), new THREE.Vector3( n4x, n4y, n4z )],
new THREE.Color(color), material ) );
material ) );
}
function uv( u1, v1, u2, v2, u3, v3, u4, v4 ) {
@@ -15916,7 +15916,7 @@ var Female02 = function ( urlbase ) {
function init_materials() {
scope.materials = [];
for(var i=0; i<materials.length; ++i) {
scope.materials[i] = create_material( materials[i], urlbase );
scope.materials[i] = [ create_material( materials[i], urlbase ) ];
}
}
@@ -15936,7 +15936,7 @@ var Female02 = function ( urlbase ) {
if( m.map_diffuse && urlbase ) {
var texture = document.createElement( 'canvas' );
material = new THREE.MeshBitmapUVMappingMaterial( texture );
material = new THREE.MeshBitmapMaterial( texture );
var image = new Image();
image.onload = function () {
@@ -15965,7 +15965,7 @@ var Female02 = function ( urlbase ) {
material = new THREE.MeshColorFillMaterial( m.a_dbg_color );
}
else {
material = new THREE.MeshFaceColorFillMaterial( );
material = new THREE.MeshColorFillMaterial( 0xffeeeeee );
}
return material;
examples/obj/male02/male02.js
+15 -15
View File
@@ -12859,18 +12859,18 @@ var Male02 = function ( urlbase ) {
scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
}
function f3( a, b, c, material ) {
var color = material_color(material);
scope.faces.push( new THREE.Face3( a, b, c, null, new THREE.Color(color), material ) );
function f3( a, b, c, mi ) {
var material = scope.materials[ mi ];
scope.faces.push( new THREE.Face3( a, b, c, null, material ) );
}
function f4( a, b, c, d, material ) {
var color = material_color(material);
scope.faces.push( new THREE.Face4( a, b, c, d, null, new THREE.Color(color), material ) );
function f4( a, b, c, d, mi ) {
var material = scope.materials[ mi ];
scope.faces.push( new THREE.Face4( a, b, c, d, null, material ) );
}
function f3n( a, b, c, material, n1, n2, n3 ) {
var color = material_color(material);
function f3n( a, b, c, mi, n1, n2, n3 ) {
var material = scope.materials[ mi ];
var n1x = normals[n1][0];
var n1y = normals[n1][1];
var n1z = normals[n1][2];
@@ -12882,11 +12882,11 @@ var Male02 = function ( urlbase ) {
var n3z = normals[n3][2];
scope.faces.push( new THREE.Face3( a, b, c,
[new THREE.Vector3( n1x, n1y, n1z ), new THREE.Vector3( n2x, n2y, n2z ), new THREE.Vector3( n3x, n3y, n3z )],
new THREE.Color(color), material ) );
material ) );
}
function f4n( a, b, c, d, material, n1, n2, n3, n4 ) {
var color = material_color(material);
function f4n( a, b, c, d, mi, n1, n2, n3, n4 ) {
var material = scope.materials[ mi ];
var n1x = normals[n1][0];
var n1y = normals[n1][1];
var n1z = normals[n1][2];
@@ -12901,7 +12901,7 @@ var Male02 = function ( urlbase ) {
var n4z = normals[n4][2];
scope.faces.push( new THREE.Face4( a, b, c, d,
[new THREE.Vector3( n1x, n1y, n1z ), new THREE.Vector3( n2x, n2y, n2z ), new THREE.Vector3( n3x, n3y, n3z ), new THREE.Vector3( n4x, n4y, n4z )],
new THREE.Color(color), material ) );
material ) );
}
function uv( u1, v1, u2, v2, u3, v3, u4, v4 ) {
@@ -12916,7 +12916,7 @@ var Male02 = function ( urlbase ) {
function init_materials() {
scope.materials = [];
for(var i=0; i<materials.length; ++i) {
scope.materials[i] = create_material( materials[i], urlbase );
scope.materials[i] = [ create_material( materials[i], urlbase ) ];
}
}
@@ -12936,7 +12936,7 @@ var Male02 = function ( urlbase ) {
if( m.map_diffuse && urlbase ) {
var texture = document.createElement( 'canvas' );
material = new THREE.MeshBitmapUVMappingMaterial( texture );
material = new THREE.MeshBitmapMaterial( texture );
var image = new Image();
image.onload = function () {
@@ -12965,7 +12965,7 @@ var Male02 = function ( urlbase ) {
material = new THREE.MeshColorFillMaterial( m.a_dbg_color );
}
else {
material = new THREE.MeshFaceColorFillMaterial( );
material = new THREE.MeshColorFillMaterial( 0xffeeeeee );
}
return material;
examples/obj/torus/Torus.js
+15 -15
View File
@@ -1194,18 +1194,18 @@ var Torus = function ( urlbase ) {
scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
}
function f3( a, b, c, material ) {
var color = material_color(material);
scope.faces.push( new THREE.Face3( a, b, c, null, new THREE.Color(color), material ) );
function f3( a, b, c, mi ) {
var material = scope.materials[ mi ];
scope.faces.push( new THREE.Face3( a, b, c, null, material ) );
}
function f4( a, b, c, d, material ) {
var color = material_color(material);
scope.faces.push( new THREE.Face4( a, b, c, d, null, new THREE.Color(color), material ) );
function f4( a, b, c, d, mi ) {
var material = scope.materials[ mi ];
scope.faces.push( new THREE.Face4( a, b, c, d, null, material ) );
}
function f3n( a, b, c, material, n1, n2, n3 ) {
var color = material_color(material);
function f3n( a, b, c, mi, n1, n2, n3 ) {
var material = scope.materials[ mi ];
var n1x = normals[n1][0];
var n1y = normals[n1][1];
var n1z = normals[n1][2];
@@ -1217,11 +1217,11 @@ var Torus = function ( urlbase ) {
var n3z = normals[n3][2];
scope.faces.push( new THREE.Face3( a, b, c,
[new THREE.Vector3( n1x, n1y, n1z ), new THREE.Vector3( n2x, n2y, n2z ), new THREE.Vector3( n3x, n3y, n3z )],
new THREE.Color(color), material ) );
material ) );
}
function f4n( a, b, c, d, material, n1, n2, n3, n4 ) {
var color = material_color(material);
function f4n( a, b, c, d, mi, n1, n2, n3, n4 ) {
var material = scope.materials[ mi ];
var n1x = normals[n1][0];
var n1y = normals[n1][1];
var n1z = normals[n1][2];
@@ -1236,7 +1236,7 @@ var Torus = function ( urlbase ) {
var n4z = normals[n4][2];
scope.faces.push( new THREE.Face4( a, b, c, d,
[new THREE.Vector3( n1x, n1y, n1z ), new THREE.Vector3( n2x, n2y, n2z ), new THREE.Vector3( n3x, n3y, n3z ), new THREE.Vector3( n4x, n4y, n4z )],
new THREE.Color(color), material ) );
material ) );
}
function uv( u1, v1, u2, v2, u3, v3, u4, v4 ) {
@@ -1251,7 +1251,7 @@ var Torus = function ( urlbase ) {
function init_materials() {
scope.materials = [];
for(var i=0; i<materials.length; ++i) {
scope.materials[i] = create_material( materials[i], urlbase );
scope.materials[i] = [ create_material( materials[i], urlbase ) ];
}
}
@@ -1271,7 +1271,7 @@ var Torus = function ( urlbase ) {
if( m.map_diffuse && urlbase ) {
var texture = document.createElement( 'canvas' );
material = new THREE.MeshBitmapUVMappingMaterial( texture );
material = new THREE.MeshBitmapMaterial( texture );
var image = new Image();
image.onload = function () {
@@ -1300,7 +1300,7 @@ var Torus = function ( urlbase ) {
material = new THREE.MeshColorFillMaterial( m.a_dbg_color );
}
else {
material = new THREE.MeshFaceColorFillMaterial( );
material = new THREE.MeshColorFillMaterial( 0xffeeeeee );
}
return material;
examples/obj_convert_test.html
+8 -9
View File
@@ -42,11 +42,10 @@
<div id="log"></div>
<script type="text/javascript" src="../build/Three.js"></script>
<!--
<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>
@@ -70,11 +69,10 @@
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
@@ -86,6 +84,7 @@
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
<!--
-->
@@ -161,7 +160,7 @@
xc.fillStyle = "#555";
xc.fillRect(96, 96, 32, 32);
var xm = new THREE.MeshBitmapUVMappingMaterial( x );
var xm = new THREE.MeshBitmapMaterial( x );
xm.loaded = 1;
geometry = new Plane( 100, 100, 15, 10 );
@@ -245,7 +244,7 @@
// MESH
geometry = new Male02( "obj/male02" );
zmesh = new THREE.Mesh( geometry, geometry.materials, 1 );
zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(), 1 );
zmesh.position.x = 90;
zmesh.position.z = 50;
zmesh.position.y = FLOOR;
@@ -264,7 +263,7 @@
// MESH
geometry = new Female02( "obj/female02" );
zmesh = new THREE.Mesh( geometry, geometry.materials, 1 );
zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(), 1 );
zmesh.position.x = -80;
zmesh.position.z = 50;
zmesh.position.y = FLOOR;
@@ -317,7 +316,7 @@
xc.font = "50pt arial bold";
xc.fillText(i, 10, 64);
var xm = new THREE.MeshBitmapUVMappingMaterial( x );
var xm = new THREE.MeshBitmapMaterial( x );
xm.loaded = 1;
mesh = new THREE.Mesh( new Plane( size, size ), xm );
examples/shader_test.html
+2 -3
View File
@@ -69,11 +69,10 @@
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
examples/test.html
+10 -11
View File
@@ -33,16 +33,15 @@
<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/Mesh.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/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
@@ -105,7 +104,7 @@
// QRCODE
qrcode = mesh = new THREE.Mesh(new Qrcode(), new THREE.MeshFaceColorFillMaterial());
qrcode = mesh = new THREE.Mesh( new Qrcode(), new THREE.MeshFaceMaterial() );
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
mesh.updateMatrix();
scene.add(mesh);
@@ -156,22 +155,22 @@
var v = new THREE.Vector3( Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 1000 - 500 );
var v0 = new THREE.Vertex( new THREE.Vector3(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
var v1 = new THREE.Vertex( new THREE.Vector3(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
var v2 = new THREE.Vertex( new THREE.Vector3(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
var v0 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
var v1 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
var v2 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
v0.position.addSelf( v );
v1.position.addSelf( v );
v2.position.addSelf( v );
var face = new THREE.Face3( geometry.vertices.push( v0 ) - 1, geometry.vertices.push( v1 ) - 1, geometry.vertices.push( v2 ) - 1 );
face.color.setRGBA( Math.random(), Math.random(), Math.random(), 1 );
var face = new THREE.Face3( geometry.vertices.push( v0 ) - 1, geometry.vertices.push( v1 ) - 1, geometry.vertices.push( v2 ) - 1, null, new THREE.MeshColorFillMaterial( Math.random() * 0xffffff ) );
geometry.faces.push( face );
}
geometry.computeNormals();
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceColorFillMaterial() );
mesh = new THREE.Mesh( geometry, [ new THREE.MeshFaceMaterial(), new THREE.MeshColorStrokeMaterial( 0xff0000, 0.5, 10 ) ] );
mesh.doubleSided = true;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
scene.add(mesh);
src/core/Face3.js
+4 -14
View File
@@ -2,32 +2,22 @@
* @author mr.doob / http://mrdoob.com/
*/
THREE.Face3 = function ( a, b, c, normal, color, material ) {
THREE.Face3 = function ( a, b, c, normal, material ) {
this.a = a;
this.b = b;
this.c = c;
this.centroid = new THREE.Vector3();
this.normal = normal instanceof THREE.Vector3 ? normal : new THREE.Vector3();
this.color = color || new THREE.Color( 0xff000000 );
this.normal = normal instanceof THREE.Vector3 ? normal : new THREE.Vector3();
this.vertexNormals = normal instanceof Array ? normal : [];
this.vertexNormals = normal instanceof Array ? normal : [];
this.material = material || 0;
this.material = material instanceof Array ? material : [ material ];
};
THREE.Face3.prototype = {
// TODO: Dupe? (Geometry/computeCentroid)
getCenter : function(){
return this.a.clone().addSelf( this.b ).addSelf( this.c ).divideScalar( 3 );
},
toString: function () {
return 'THREE.Face3 ( ' + this.a + ', ' + this.b + ', ' + this.c + ' )';
src/core/Face4.js
+3 -13
View File
@@ -2,7 +2,7 @@
* @author mr.doob / http://mrdoob.com/
*/
THREE.Face4 = function ( a, b, c, d, normal, color, material ) {
THREE.Face4 = function ( a, b, c, d, normal, material ) {
this.a = a;
this.b = b;
@@ -11,25 +11,15 @@ THREE.Face4 = function ( a, b, c, d, normal, color, material ) {
this.centroid = new THREE.Vector3();
this.normal = normal instanceof THREE.Vector3 ? normal : new THREE.Vector3();
this.vertexNormals = normal instanceof Array ? normal : [];
this.color = color || new THREE.Color( 0xff000000 );
this.material = material instanceof Array ? material : [ material ];
this.vertexNormals = normal instanceof Array ? normal : [];
this.material = material || 0;
};
THREE.Face4.prototype = {
// TODO: Dupe? (Geometry/computeCentroid)
getCenter : function(){
return this.a.clone().addSelf( this.b ).addSelf( this.c ).addSelf( this.d ).divideScalar( 4 );
},
toString: function () {
return 'THREE.Face4 ( ' + this.a + ', ' + this.b + ', ' + this.c + ' ' + this.d + ' )';
src/core/Geometry.js
+72 -61
View File
@@ -58,86 +58,97 @@ THREE.Geometry.prototype = {
face = this.faces[ f ];
if ( useVertexNormals && face.vertexNormals.length ) {
// set face normal to average of vertex normals
cb.set( 0, 0, 0 );
if ( useVertexNormals && face.vertexNormals.length ) {
for ( n = 0, nl = face.normal.length; n < nl; n++ ) {
cb.x += face.vertexNormals[n].x;
cb.y += face.vertexNormals[n].y;
cb.z += face.vertexNormals[n].z;
}
cb.set( 0, 0, 0 );
cb.x /= 3;
cb.y /= 3;
cb.z /= 3;
for ( n = 0, nl = face.normal.length; n < nl; n++ ) {
if ( !cb.isZero() ) {
cd.addSelf( face.vertexNormals[n] );
cb.normalize();
}
}
cb.divideScalar( 3 );
face.normal.copy( cb );
}
else {
vA = this.vertices[ face.a ];
vB = this.vertices[ face.b ];
vC = this.vertices[ face.c ];
if ( ! cb.isZero() ) {
cb.sub( vC.position, vB.position );
ab.sub( vA.position, vB.position );
cb.crossSelf( ab );
cb.normalize();
if ( !cb.isZero() ) {
}
cb.normalize();
face.normal.copy( cb );
}
} else {
face.normal.copy( cb );
}
vA = this.vertices[ face.a ];
vB = this.vertices[ face.b ];
vC = this.vertices[ face.c ];
cb.sub( vC.position, vB.position );
ab.sub( vA.position, vB.position );
cb.crossSelf( ab );
if ( !cb.isZero() ) {
cb.normalize();
}
face.normal.copy( cb );
}
}
},
computeBoundingBox: function ( ) {
if ( this.vertices.length > 0 ) {
this.bbox = { 'x': [ this.vertices[ 0 ].position.x, this.vertices[ 0 ].position.x ],
'y': [ this.vertices[ 0 ].position.y, this.vertices[ 0 ].position.y ],
'z': [ this.vertices[ 0 ].position.z, this.vertices[ 0 ].position.z ] };
var v, vl;
for ( v = 1, vl = this.vertices.length; v < vl; v++ ) {
vertex = this.vertices[ v ];
if ( vertex.position.x < this.bbox.x[ 0 ] )
this.bbox.x[ 0 ] = vertex.position.x;
else if ( vertex.position.x > this.bbox.x[ 1 ] )
this.bbox.x[ 1 ] = vertex.position.x;
computeBoundingBox: function ( ) {
if ( vertex.position.y < this.bbox.y[ 0 ] )
this.bbox.y[ 0 ] = vertex.position.y;
else if ( vertex.position.y > this.bbox.y[ 1 ] )
this.bbox.y[ 1 ] = vertex.position.y;
if ( this.vertices.length > 0 ) {
if ( vertex.position.z < this.bbox.z[ 0 ] )
this.bbox.z[ 0 ] = vertex.position.z;
else if ( vertex.position.z > this.bbox.z[ 1 ] )
this.bbox.z[ 1 ] = vertex.position.z;
this.bbox = { 'x': [ this.vertices[ 0 ].position.x, this.vertices[ 0 ].position.x ],
'y': [ this.vertices[ 0 ].position.y, this.vertices[ 0 ].position.y ],
'z': [ this.vertices[ 0 ].position.z, this.vertices[ 0 ].position.z ] };
}
}
},
for ( var v = 1, vl = this.vertices.length; v < vl; v++ ) {
vertex = this.vertices[ v ];
if ( vertex.position.x < this.bbox.x[ 0 ] ) {
this.bbox.x[ 0 ] = vertex.position.x;
} else if ( vertex.position.x > this.bbox.x[ 1 ] ) {
this.bbox.x[ 1 ] = vertex.position.x;
}
if ( vertex.position.y < this.bbox.y[ 0 ] ) {
this.bbox.y[ 0 ] = vertex.position.y;
} else if ( vertex.position.y > this.bbox.y[ 1 ] ) {
this.bbox.y[ 1 ] = vertex.position.y;
}
if ( vertex.position.z < this.bbox.z[ 0 ] ) {
this.bbox.z[ 0 ] = vertex.position.z;
} else if ( vertex.position.z > this.bbox.z[ 1 ] ) {
this.bbox.z[ 1 ] = vertex.position.z;
}
}
}
},
toString: function () {
src/materials/MeshBitmapMaterial.js
+22
View File
@@ -0,0 +1,22 @@
/**
* @author mr.doob / http://mrdoob.com/
*/
THREE.MeshBitmapMaterial = function ( bitmap, mode ) {
this.bitmap = bitmap;
this.mode = mode || THREE.MeshBitmapMaterialMode.UVMAPPING;
this.id = THREE.MeshBitmapMaterialCounter.value++;
this.toString = function () {
return 'THREE.MeshBitmapMaterial ( bitmap: ' + this.bitmap + ', mode: ' + this.mode + ', id: ' + this.id + ' )';
};
};
THREE.MeshBitmapMaterialCounter = { value:0 };
THREE.MeshBitmapMaterialMode = { UVMAPPING: 0 };
src/materials/MeshBitmapUVMappingMaterial.js
-18
View File
@@ -1,18 +0,0 @@
/**
* @author mr.doob / http://mrdoob.com/
*/
THREE.MeshBitmapUVMappingMaterial = function ( bitmap ) {
this.bitmap = bitmap;
this.loaded = 0;
this.decalIndex = -1;
this.toString = function () {
return 'THREE.MeshBitmapUVMappingMaterial ( bitmap: ' + this.bitmap + ' )';
};
};
src/materials/MeshFaceColorFillMaterial.js
-13
View File
@@ -1,13 +0,0 @@
/**
* @author mr.doob / http://mrdoob.com/
*/
THREE.MeshFaceColorFillMaterial = function () {
this.toString = function () {
return 'THREE.MeshFaceColorFillMaterial ( )';
};
};
src/materials/MeshFaceColorStrokeMaterial.js
-15
View File
@@ -1,15 +0,0 @@
/**
* @author mr.doob / http://mrdoob.com/
*/
THREE.MeshFaceColorStrokeMaterial = function ( lineWidth ) {
this.lineWidth = lineWidth || 1;
this.toString = function () {
return 'THREE.MeshFaceColorStrokeMaterial ( lineWidth: ' + this.lineWidth + ' )';
};
};
src/materials/MeshFaceMaterial.js
+13
View File
@@ -0,0 +1,13 @@
/**
* @author mr.doob / http://mrdoob.com/
*/
THREE.MeshFaceMaterial = function () {
this.toString = function () {
return 'THREE.MeshFaceMaterial';
};
};
src/objects/Mesh.js
+39 -9
View File
@@ -14,7 +14,7 @@ THREE.Mesh = function ( geometry, material, normUVs ) {
this.overdraw = false;
this.materialFaces = {};
this.materialFaceGroup = {};
this.sortFacesByMaterial();
if( normUVs ) this.normalizeUVs();
@@ -28,20 +28,50 @@ THREE.Mesh.prototype.constructor = THREE.Mesh;
THREE.Mesh.prototype.sortFacesByMaterial = function () {
var f, fl, face, material;
// TODO
// Should optimize by grouping faces with ColorFill / ColorStroke materials
// which could then use vertex color attributes instead of each being
// in its separate VBO
function materialHash( material ) {
var i, l, hash_array = [];
for ( i = 0, l = material.length; i<l; i++ ) {
if ( material[i] == undefined ) {
hash_array.push( "undefined" );
} else {
hash_array.push( material[i].toString() );
}
}
return hash_array.join("_");
}
var i, f, fl, face, material;
for ( f = 0, fl = this.geometry.faces.length; f < fl; f++ ) {
face = this.geometry.faces[ f ];
material = face.material;
hash = materialHash( material);
if ( this.materialFaceGroup[ hash ] == undefined ) {
this.materialFaceGroup[ hash ] = { 'faces': [], 'material': material };
}
if ( this.materialFaces[material] == undefined )
this.materialFaces[material] = { 'faces': [] };
this.materialFaces[material].faces.push( f );
this.materialFaceGroup[ hash ].faces.push( f );
}
}
THREE.Mesh.prototype.normalizeUVs = function () {
src/renderers/CanvasRenderer.js
+370 -468
View File
@@ -19,10 +19,11 @@ THREE.CanvasRenderer = function () {
_light = new THREE.Color( 0xffffffff ),
_ambientLight = new THREE.Color( 0xffffffff ),
_pi2 = Math.PI * 2,
_vector2 = new THREE.Vector2(), // Needed for expand
_vector3 = new THREE.Vector3(), // Needed for PointLight
v5 = new THREE.Vector2(), v6 = new THREE.Vector2(), // Needed for latter splitting tris to quads
uv1 = new THREE.UV(), uv2 = new THREE.UV(), uv3 = new THREE.UV(), uv4 = new THREE.UV();
_uv1 = new THREE.UV(), _uv2 = new THREE.UV(), _uv3 = new THREE.UV(), _uv4 = new THREE.UV(),
v5 = new THREE.Vector2(), v6 = new THREE.Vector2(); // Needed for latter splitting tris to quads
this.domElement = _canvas;
this.autoClear = true;
@@ -49,36 +50,14 @@ THREE.CanvasRenderer = function () {
_context.setTransform( 1, 0, 0, - 1, _widthHalf, _heightHalf );
_context.clearRect( _clearRect.getX(), _clearRect.getY(), _clearRect.getWidth(), _clearRect.getHeight() );
/*
// Opera workaround
_context.setTransform( 1, 0, 0, 1, _widthHalf, _heightHalf );
_context.clearRect( _clearRect.getX(), - ( _clearRect.getHeight() + _clearRect.getY() ), _clearRect.getWidth(), _clearRect.getHeight() );
*/
_clearRect.empty();
}
};
this.isFullOverlay = function ( material, materialIndex, element ) {
// these materials can be either the only material for whole mesh
// or if they are overlays in multimaterials, they apply only to
// group of faces with single material (specified by decalIndex)
return ( ( material instanceof THREE.MeshBitmapUVMappingMaterial ||
material instanceof THREE.MeshFaceColorFillMaterial ||
material instanceof THREE.MeshColorFillMaterial
)
&&
! ( materialIndex == element.materialIndex ||
element.materialIndex == material.decalIndex ) );
};
this.render = function ( scene, camera ) {
var e, el, element, m, ml, material, pi2 = Math.PI * 2,
var e, el, element, m, ml, fm, fml, material,
v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y,
width, height, scaleX, scaleY, offsetX, offsetY,
bitmap, bitmapWidth, bitmapHeight;
@@ -120,95 +99,7 @@ THREE.CanvasRenderer = function () {
material = element.material[ m ];
if ( material instanceof THREE.ParticleCircleMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
width = element.scale.x * _widthHalf;
height = element.scale.y * _heightHalf;
_bboxRect.set( v1x - width, v1y - height, v1x + width, v1y + height );
if ( !_clipRect.instersects( _bboxRect ) ) {
continue;
}
_context.save();
_context.translate( v1x, v1y );
_context.rotate( - element.rotation );
_context.scale( width, height );
_context.beginPath();
_context.arc( 0, 0, 1, 0, pi2, true );
_context.closePath();
_context.fillStyle = _color.__styleString;
_context.fill();
_context.restore();
} else if ( material instanceof THREE.ParticleBitmapMaterial ) {
bitmap = material.bitmap;
bitmapWidth = bitmap.width / 2;
bitmapHeight = bitmap.height / 2;
scaleX = element.scale.x * _widthHalf;
scaleY = element.scale.y * _heightHalf;
width = scaleX * bitmapWidth;
height = scaleY * bitmapHeight;
offsetX = material.offset.x * scaleX;
offsetY = material.offset.y * scaleY;
// TODO: Rotations break this...
_bboxRect.set( v1x + offsetX - width, v1y + offsetY - height, v1x + offsetX + width, v1y + offsetY + height );
if ( !_clipRect.instersects( _bboxRect ) ) {
continue;
}
_context.save();
_context.translate( v1x, v1y );
_context.rotate( - element.rotation );
_context.scale( scaleX, - scaleY );
_context.translate( - bitmapWidth + material.offset.x, - bitmapHeight - material.offset.y );
_context.drawImage( bitmap, 0, 0 );
_context.restore();
/* DEBUG
_context.beginPath();
_context.moveTo( v1x - 10, v1y );
_context.lineTo( v1x + 10, v1y );
_context.moveTo( v1x, v1y - 10 );
_context.lineTo( v1x, v1y + 10 );
_context.closePath();
_context.strokeStyle = 'rgb(255,255,0)';
_context.stroke();
*/
}
renderParticle( v1x, v1y, element, material, scene );
}
@@ -235,33 +126,7 @@ THREE.CanvasRenderer = function () {
material = element.material[ m ];
if ( material instanceof THREE.LineColorMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_context.lineWidth = material.lineWidth;
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
}
renderLine( v1x, v1y, v2x, v2y, element, material, scene );
}
@@ -293,172 +158,30 @@ THREE.CanvasRenderer = function () {
}
for ( m = 0, ml = element.material.length; m < ml; m++ ) {
m = 0; ml = element.meshMaterial.length;
material = element.material[ m ];
if ( this.isFullOverlay( material, m, element ) ) {
continue;
}
if ( material instanceof THREE.MeshColorFillMaterial ) {
while ( m < ml ) {
if ( _enableLighting ) {
material = element.meshMaterial[ m ++ ];
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
if ( material instanceof THREE.MeshFaceMaterial ) {
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
fm = 0; fml = element.faceMaterial.length;
} else {
while ( fm < fml ) {
_color = material.color;
material = element.faceMaterial[ fm ++ ];
renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = _color.__styleString;
_context.fill();
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.lineWidth = material.lineWidth;
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
} else if ( material instanceof THREE.MeshFaceColorFillMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( element.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = element.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = _color.__styleString;
_context.fill();
} else if ( material instanceof THREE.MeshFaceColorStrokeMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( element.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = element.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.lineWidth = material.lineWidth;
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
} else if ( material instanceof THREE.MeshBitmapUVMappingMaterial ) {
bitmap = material.bitmap;
bitmapWidth = bitmap.width - 1;
bitmapHeight = bitmap.height - 1;
/* DEBUG
if ( !element.uvs[ 0 ] || !element.uvs[ 1 ] || !element.uvs[ 2 ]) {
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = 'rgb(0, 255, 0)';
_context.fill();
continue;
}
*/
uv1.copy( element.uvs[ 0 ] );
uv2.copy( element.uvs[ 1 ] );
uv3.copy( element.uvs[ 2 ] );
uv1.u *= bitmapWidth; uv1.v *= bitmapHeight;
uv2.u *= bitmapWidth; uv2.v *= bitmapHeight;
uv3.u *= bitmapWidth; uv3.v *= bitmapHeight;
drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v3x, v3y, uv1.u, uv1.v, uv2.u, uv2.v, uv3.u, uv3.v );
continue;
}
renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
}
} else if ( element instanceof THREE.RenderableFace4 ) {
@@ -504,180 +227,30 @@ THREE.CanvasRenderer = function () {
}
for ( m = 0, ml = element.material.length; m < ml; m++ ) {
m = 0; ml = element.meshMaterial.length;
material = element.material[ m ];
while ( m < ml ) {
if ( this.isFullOverlay( material, m, element ) ) {
continue;
}
if ( material instanceof THREE.MeshColorFillMaterial ) {
material = element.meshMaterial[ m ++ ];
if ( _enableLighting ) {
if ( material instanceof THREE.MeshFaceMaterial ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
fm = 0; fml = element.faceMaterial.length;
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
while ( fm < fml ) {
} else {
material = element.faceMaterial[ fm ++ ];
_color = material.color;
renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y, element, material, scene );
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = _color.__styleString;
_context.fill();
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.lineWidth = material.lineWidth;
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
} else if ( material instanceof THREE.MeshFaceColorFillMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( element.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = element.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = _color.__styleString;
_context.fill();
} else if ( material instanceof THREE.MeshFaceColorStrokeMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( element.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = element.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.lineWidth = material.lineWidth;
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
} else if ( material instanceof THREE.MeshBitmapUVMappingMaterial ) {
bitmap = material.bitmap;
bitmapWidth = bitmap.width - 1;
bitmapHeight = bitmap.height - 1;
/* DEBUG
if ( !element.uvs[ 0 ] || !element.uvs[ 1 ] || !element.uvs[ 2 ] || !element.uvs[ 3 ]) {
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = 'rgb(255, 0, 255)';
_context.fill();
continue;
}
*/
uv1.copy( element.uvs[ 0 ] );
uv2.copy( element.uvs[ 1 ] );
uv3.copy( element.uvs[ 2 ] );
uv4.copy( element.uvs[ 3 ] );
uv1.u *= bitmapWidth; uv1.v *= bitmapHeight;
uv2.u *= bitmapWidth; uv2.v *= bitmapHeight;
uv3.u *= bitmapWidth; uv3.v *= bitmapHeight;
uv4.u *= bitmapWidth; uv4.v *= bitmapHeight;
drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v4x, v4y, uv1.u, uv1.v, uv2.u, uv2.v, uv4.u, uv4.v );
drawTexturedTriangle( bitmap, v5x, v5y, v3x, v3y, v6x, v6y, uv2.u, uv2.v, uv3.u, uv3.v, uv4.u, uv4.v );
continue;
}
renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y, element, material, scene );
}
}
@@ -792,7 +365,340 @@ THREE.CanvasRenderer = function () {
}
function drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v3x, v3y, uv1u, uv1v, uv2u, uv2v, uv3u, uv3v ) {
function renderParticle ( v1x, v1y, element, material, scene ) {
if ( material instanceof THREE.ParticleCircleMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
width = element.scale.x * _widthHalf;
height = element.scale.y * _heightHalf;
_bboxRect.set( v1x - width, v1y - height, v1x + width, v1y + height );
if ( !_clipRect.instersects( _bboxRect ) ) {
return;
}
_context.save();
_context.translate( v1x, v1y );
_context.rotate( - element.rotation );
_context.scale( width, height );
_context.beginPath();
_context.arc( 0, 0, 1, 0, _pi2, true );
_context.closePath();
_context.fillStyle = _color.__styleString;
_context.fill();
_context.restore();
} else if ( material instanceof THREE.ParticleBitmapMaterial ) {
bitmap = material.bitmap;
bitmapWidth = bitmap.width / 2;
bitmapHeight = bitmap.height / 2;
scaleX = element.scale.x * _widthHalf;
scaleY = element.scale.y * _heightHalf;
width = scaleX * bitmapWidth;
height = scaleY * bitmapHeight;
offsetX = material.offset.x * scaleX;
offsetY = material.offset.y * scaleY;
// TODO: Rotations break this...
_bboxRect.set( v1x + offsetX - width, v1y + offsetY - height, v1x + offsetX + width, v1y + offsetY + height );
if ( !_clipRect.instersects( _bboxRect ) ) {
return;
}
_context.save();
_context.translate( v1x, v1y );
_context.rotate( - element.rotation );
_context.scale( scaleX, - scaleY );
_context.translate( - bitmapWidth + material.offset.x, - bitmapHeight - material.offset.y );
_context.drawImage( bitmap, 0, 0 );
_context.restore();
/* DEBUG
_context.beginPath();
_context.moveTo( v1x - 10, v1y );
_context.lineTo( v1x + 10, v1y );
_context.moveTo( v1x, v1y - 10 );
_context.lineTo( v1x, v1y + 10 );
_context.closePath();
_context.strokeStyle = 'rgb(255,255,0)';
_context.stroke();
*/
}
}
function renderLine( v1x, v1y, v2x, v2y, element, material, scene ) {
if ( material instanceof THREE.LineColorMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_context.lineWidth = material.lineWidth;
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
}
}
function renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene ) {
if ( material instanceof THREE.MeshColorFillMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = _color.__styleString;
_context.fill();
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.lineWidth = material.lineWidth;
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
} else if ( material instanceof THREE.MeshBitmapMaterial ) {
bitmap = material.bitmap;
bitmapWidth = bitmap.width - 1;
bitmapHeight = bitmap.height - 1;
/* DEBUG
if ( !element.uvs[ 0 ] || !element.uvs[ 1 ] || !element.uvs[ 2 ]) {
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = 'rgb(0, 255, 0)';
_context.fill();
return;
}
*/
_uv1.copy( element.uvs[ 0 ] );
_uv2.copy( element.uvs[ 1 ] );
_uv3.copy( element.uvs[ 2 ] );
_uv1.u *= bitmapWidth; _uv1.v *= bitmapHeight;
_uv2.u *= bitmapWidth; _uv2.v *= bitmapHeight;
_uv3.u *= bitmapWidth; _uv3.v *= bitmapHeight;
drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v3x, v3y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
}
}
function renderFace4 ( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y, element, material, scene ) {
if ( material instanceof THREE.MeshColorFillMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = _color.__styleString;
_context.fill();
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.lineWidth = material.lineWidth;
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
} else if ( material instanceof THREE.MeshBitmapMaterial ) {
bitmap = material.bitmap;
bitmapWidth = bitmap.width - 1;
bitmapHeight = bitmap.height - 1;
/* DEBUG
if ( !element.uvs[ 0 ] || !element.uvs[ 1 ] || !element.uvs[ 2 ] || !element.uvs[ 3 ] || !element.uvs[ 4 ] ) {
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = 'rgb(255, 0, 255)';
_context.fill();
return;
}
*/
_uv1.copy( element.uvs[ 0 ] );
_uv2.copy( element.uvs[ 1 ] );
_uv3.copy( element.uvs[ 2 ] );
_uv4.copy( element.uvs[ 3 ] );
_uv1.u *= bitmapWidth; _uv1.v *= bitmapHeight;
_uv2.u *= bitmapWidth; _uv2.v *= bitmapHeight;
_uv3.u *= bitmapWidth; _uv3.v *= bitmapHeight;
_uv4.u *= bitmapWidth; _uv4.v *= bitmapHeight;
drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v4x, v4y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv4.u, _uv4.v );
drawTexturedTriangle( bitmap, v5x, v5y, v3x, v3y, v6x, v6y, _uv2.u, _uv2.v, _uv3.u, _uv3.v, _uv4.u, _uv4.v );
}
}
function drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v3x, v3y, _uv1u, _uv1v, _uv2u, _uv2v, _uv3u, _uv3v ) {
// Textured triangle drawing by Thatcher Ulrich.
// http://tulrich.com/geekstuff/canvas/jsgl.js
@@ -808,19 +714,15 @@ THREE.CanvasRenderer = function () {
_context.save();
_context.clip();
// debug triangle outline
//_context.strokeStyle = "black";
//_context.stroke();
denom = uv1u * ( uv3v - uv2v ) - uv2u * uv3v + uv3u * uv2v + ( uv2u - uv3u ) * uv1v;
denom = _uv1u * ( _uv3v - _uv2v ) - _uv2u * _uv3v + _uv3u * _uv2v + ( _uv2u - _uv3u ) * _uv1v;
m11 = - ( uv1v * (v3x - v2x ) - uv2v * v3x + uv3v * v2x + ( uv2v - uv3v ) * v1x ) / denom;
m12 = ( uv2v * v3y + uv1v * ( v2y - v3y ) - uv3v * v2y + ( uv3v - uv2v) * v1y ) / denom;
m21 = ( uv1u * ( v3x - v2x ) - uv2u * v3x + uv3u * v2x + ( uv2u - uv3u ) * v1x ) / denom;
m22 = - ( uv2u * v3y + uv1u * ( v2y - v3y ) - uv3u * v2y + ( uv3u - uv2u ) * v1y ) / denom;
dx = ( uv1u * ( uv3v * v2x - uv2v * v3x ) + uv1v * ( uv2u * v3x - uv3u * v2x ) + ( uv3u * uv2v - uv2u * uv3v ) * v1x ) / denom;
dy = ( uv1u * ( uv3v * v2y - uv2v * v3y ) + uv1v * ( uv2u * v3y - uv3u * v2y ) + ( uv3u * uv2v - uv2u * uv3v ) * v1y ) / denom;
m11 = - ( _uv1v * (v3x - v2x ) - _uv2v * v3x + _uv3v * v2x + ( _uv2v - _uv3v ) * v1x ) / denom;
m12 = ( _uv2v * v3y + _uv1v * ( v2y - v3y ) - _uv3v * v2y + ( _uv3v - _uv2v) * v1y ) / denom;
m21 = ( _uv1u * ( v3x - v2x ) - _uv2u * v3x + _uv3u * v2x + ( _uv2u - _uv3u ) * v1x ) / denom;
m22 = - ( _uv2u * v3y + _uv1u * ( v2y - v3y ) - _uv3u * v2y + ( _uv3u - _uv2u ) * v1y ) / denom;
dx = ( _uv1u * ( _uv3v * v2x - _uv2v * v3x ) + _uv1v * ( _uv2u * v3x - _uv3u * v2x ) + ( _uv3u * _uv2v - _uv2u * _uv3v ) * v1x ) / denom;
dy = ( _uv1u * ( _uv3v * v2y - _uv2v * v3y ) + _uv1v * ( _uv2u * v3y - _uv3u * v2y ) + ( _uv3u * _uv2v - _uv2u * _uv3v ) * v1y ) / denom;
_context.transform( m11, m12, m21, m22, dx, dy );
src/renderers/Projector.js
+4 -6
View File
@@ -96,9 +96,8 @@ THREE.Projector = function() {
_face3.z = Math.max( v1.positionScreen.z, Math.max( v2.positionScreen.z, v3.positionScreen.z ) );
//_face3.material = [ object.material[face.material] ];
_face3.material = object.material;
_face3.materialIndex = face.material;
_face3.meshMaterial = object.material;
_face3.faceMaterial = face.material;
_face3.overdraw = object.overdraw;
_face3.uvs = object.geometry.uvs[ f ];
_face3.color = face.color;
@@ -137,9 +136,8 @@ THREE.Projector = function() {
_face4.z = Math.max( v1.positionScreen.z, Math.max( v2.positionScreen.z, Math.max( v3.positionScreen.z, v4.positionScreen.z ) ) );
//_face4.material = [ object.material[face.material] ];
_face4.material = object.material;
_face4.materialIndex = face.material;
_face4.meshMaterial = object.material;
_face4.faceMaterial = face.material;
_face4.overdraw = object.overdraw;
_face4.uvs = object.geometry.uvs[ f ];
_face4.color = face.color;
src/renderers/SVGRenderer.js
+254 -135
View File
@@ -19,6 +19,7 @@ THREE.SVGRenderer = function () {
_vector3 = new THREE.Vector3(), // Needed for PointLight
_svgPathPool = [], _svgCirclePool = [],
_svgNode, _pathCount, _circleCount,
_quality = 1;
this.domElement = _svg;
@@ -60,8 +61,7 @@ THREE.SVGRenderer = function () {
this.render = function ( scene, camera ) {
var e, el, m, ml, element, material,
pathCount = 0, circleCount = 0, svgNode,
var e, el, m, ml, fm, fml, element, material,
v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y,
size;
@@ -73,6 +73,8 @@ THREE.SVGRenderer = function () {
_renderList = _projector.projectScene( scene, camera );
_pathCount = 0; _circleCount = 0;
_enableLighting = scene.lights.length > 0;
if ( _enableLighting ) {
@@ -85,154 +87,109 @@ THREE.SVGRenderer = function () {
element = _renderList[ e ];
for ( m = 0, ml = element.material.length; m < ml; m++ ) {
_bboxRect.empty();
material = element.material[ m ];
if ( element instanceof THREE.RenderableParticle ) {
_bboxRect.empty();
v1x = element.x * _widthHalf; v1y = element.y * -_heightHalf;
if ( element instanceof THREE.RenderableParticle ) {
for ( m = 0, ml = element.material.length; m < ml; m++ ) {
v1x = element.x * _widthHalf; v1y = element.y * -_heightHalf;
size = element.size * _widthHalf;
material = element.material[ m ];
_bboxRect.set( v1x - size, v1y - size, v1x + size, v1y + size );
if ( !_clipRect.instersects( _bboxRect ) ) {
continue;
}
svgNode = getCircleNode( circleCount++ );
svgNode.setAttribute( 'cx', v1x );
svgNode.setAttribute( 'cy', v1y );
svgNode.setAttribute( 'r', size );
} else if ( element instanceof THREE.RenderableFace3 ) {
v1x = element.v1.x * _widthHalf; v1y = element.v1.y * -_heightHalf;
v2x = element.v2.x * _widthHalf; v2y = element.v2.y * -_heightHalf;
v3x = element.v3.x * _widthHalf; v3y = element.v3.y * -_heightHalf;
_bboxRect.addPoint( v1x, v1y );
_bboxRect.addPoint( v2x, v2y );
_bboxRect.addPoint( v3x, v3y );
if ( !_clipRect.instersects( _bboxRect ) ) {
continue;
}
svgNode = getPathNode( pathCount++ );
svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + 'z' );
} else if ( element instanceof THREE.RenderableFace4 ) {
v1x = element.v1.x * _widthHalf; v1y = element.v1.y * -_heightHalf;
v2x = element.v2.x * _widthHalf; v2y = element.v2.y * -_heightHalf;
v3x = element.v3.x * _widthHalf; v3y = element.v3.y * -_heightHalf;
v4x = element.v4.x * _widthHalf; v4y = element.v4.y * -_heightHalf;
_bboxRect.addPoint( v1x, v1y );
_bboxRect.addPoint( v2x, v2y );
_bboxRect.addPoint( v3x, v3y );
_bboxRect.addPoint( v4x, v4y );
if ( !_clipRect.instersects( _bboxRect) ) {
continue;
}
svgNode = getPathNode( pathCount++ );
svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + ' L ' + v4x + ',' + v4y + 'z' );
renderParticle( v1x, v1y, element, material, scene );
}
} else if ( element instanceof THREE.RenderableLine ) {
// TODO: Move out of materials loop
if ( material instanceof THREE.MeshColorFillMaterial ) {
} else if ( element instanceof THREE.RenderableFace3 ) {
if ( _enableLighting ) {
v1x = element.v1.x * _widthHalf; v1y = element.v1.y * -_heightHalf;
v2x = element.v2.x * _widthHalf; v2y = element.v2.y * -_heightHalf;
v3x = element.v3.x * _widthHalf; v3y = element.v3.y * -_heightHalf;
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_bboxRect.addPoint( v1x, v1y );
_bboxRect.addPoint( v2x, v2y );
_bboxRect.addPoint( v3x, v3y );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
if ( !_clipRect.instersects( _bboxRect ) ) {
} else {
_color = material.color;
}
svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
} else if ( material instanceof THREE.MeshFaceColorFillMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( element.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = element.color;
}
svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
svgNode.setAttribute( 'style', 'fill: none; stroke: ' + _color.__styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round' );
} else if ( material instanceof THREE.MeshFaceColorStrokeMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( element.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = element.color;
}
svgNode.setAttribute( 'style', 'fill: none; stroke: ' + _color.__styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round' );
continue;
}
_svg.appendChild( svgNode );
m = 0; ml = element.meshMaterial.length;
while ( m < ml ) {
material = element.meshMaterial[ m ++ ];
if ( material instanceof THREE.MeshFaceMaterial ) {
fm = 0; fml = element.faceMaterial.length;
while ( fm < fml ) {
material = element.faceMaterial[ fm ++ ];
renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
}
continue;
}
renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
}
} else if ( element instanceof THREE.RenderableFace4 ) {
v1x = element.v1.x * _widthHalf; v1y = element.v1.y * -_heightHalf;
v2x = element.v2.x * _widthHalf; v2y = element.v2.y * -_heightHalf;
v3x = element.v3.x * _widthHalf; v3y = element.v3.y * -_heightHalf;
v4x = element.v4.x * _widthHalf; v4y = element.v4.y * -_heightHalf;
_bboxRect.addPoint( v1x, v1y );
_bboxRect.addPoint( v2x, v2y );
_bboxRect.addPoint( v3x, v3y );
_bboxRect.addPoint( v4x, v4y );
if ( !_clipRect.instersects( _bboxRect) ) {
continue;
}
m = 0; ml = element.meshMaterial.length;
while ( m < ml ) {
material = element.meshMaterial[ m ++ ];
if ( material instanceof THREE.MeshFaceMaterial ) {
fm = 0; fml = element.faceMaterial.length;
while ( fm < fml ) {
material = element.faceMaterial[ fm ++ ];
renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, element, material, scene );
}
continue;
}
renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, element, material, scene );
}
}
@@ -262,6 +219,32 @@ THREE.SVGRenderer = function () {
}
function calculateLight( scene, element, color ) {
var l, ll, light;
for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
light = scene.lights[ l ];
if ( light instanceof THREE.DirectionalLight ) {
color.r += light.color.r;
color.g += light.color.g;
color.b += light.color.b;
} else if ( light instanceof THREE.PointLight ) {
color.r += light.color.r;
color.g += light.color.g;
color.b += light.color.b;
}
}
}
function calculateFaceLight( scene, element, color ) {
var l, ll, light, amount;
@@ -303,7 +286,143 @@ THREE.SVGRenderer = function () {
}
function getPathNode( id ) {
function renderParticle ( v1x, v1y, element, material, scene ) {
_svgNode = getCircleNode( _circleCount++ );
_svgNode.setAttribute( 'cx', v1x );
_svgNode.setAttribute( 'cy', v1y );
_svgNode.setAttribute( 'r', element.scale.x * _widthHalf );
if ( material instanceof THREE.ParticleCircleMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
}
_svg.appendChild( _svgNode );
}
function renderLine ( ) {
}
function renderFace3 ( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene ) {
_svgNode = getPathNode( _pathCount ++ );
_svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + 'z' );
if ( material instanceof THREE.MeshColorFillMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_svgNode.setAttribute( 'style', 'fill: none; stroke: ' + _color.__styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round' );
}
_svg.appendChild( _svgNode );
}
function renderFace4 ( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, element, material, scene ) {
_svgNode = getPathNode( _pathCount ++ );
_svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + ' L ' + v4x + ',' + v4y + 'z' );
if ( material instanceof THREE.MeshColorFillMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_svgNode.setAttribute( 'style', 'fill: none; stroke: ' + _color.__styleString + '; stroke-width: ' + material.lineWidth + '; stroke-linecap: round; stroke-linejoin: round' );
}
_svg.appendChild( _svgNode );
}
function getPathNode ( id ) {
if ( _svgPathPool[ id ] == null ) {
@@ -323,7 +442,7 @@ THREE.SVGRenderer = function () {
}
function getCircleNode( id ) {
function getCircleNode ( id ) {
if ( _svgCirclePool[id] == null ) {
src/renderers/WebGLRenderer.js
+139 -182
View File
@@ -16,7 +16,7 @@ THREE.WebGLRenderer = function () {
initProgram();
// material constants used in shader
var COLORFILL = 0, COLORSTROKE = 1, FACECOLORFILL = 2, FACECOLORSTROKE = 3, BITMAP = 4, PHONG = 5;
var COLORFILL = 0, COLORSTROKE = 1, BITMAP = 2, PHONG = 3;
this.setSize = function ( width, height ) {
@@ -68,29 +68,26 @@ THREE.WebGLRenderer = function () {
}
};
this.createBuffers = function ( object, materialIndex ) {
this.createBuffers = function ( object, mf ) {
var materialFace = object.materialFaces[ materialIndex ];
var material = object.material[ materialIndex ];
var materialFaceGroup = object.materialFaceGroup[ mf ];
var faceArray = [];
var lineArray = [];
var vertexArray = [];
var colorArray = [];
var normalArray = [];
var uvArray = [];
var vertexIndex = 0;
var f, fl, fi, face, faceColor, vertexNormals, normal, uv, v1, v2, v3, v4;
var f, fl, fi, face, vertexNormals, normal, uv, v1, v2, v3, v4;
for ( f = 0, fl = materialFace.faces.length; f < fl; f++ ) {
for ( f = 0, fl = materialFaceGroup.faces.length; f < fl; f++ ) {
fi = materialFace.faces[f];
fi = materialFaceGroup.faces[f];
face = object.geometry.faces[ fi ];
faceColor = face.color;
vertexNormals = face.vertexNormals;
normal = face.normal;
uv = object.geometry.uvs[ fi ];
@@ -120,10 +117,6 @@ THREE.WebGLRenderer = function () {
}
colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
if ( uv ) {
uvArray.push( uv[0].u, uv[0].v );
@@ -171,11 +164,6 @@ THREE.WebGLRenderer = function () {
}
colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
if ( uv ) {
uvArray.push( uv[0].u, uv[0].v );
@@ -206,48 +194,146 @@ THREE.WebGLRenderer = function () {
}
materialFace.__webGLVertexBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLVertexBuffer );
materialFaceGroup.__webGLVertexBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFaceGroup.__webGLVertexBuffer );
_gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( vertexArray ), _gl.STATIC_DRAW );
materialFace.__webGLNormalBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLNormalBuffer );
materialFaceGroup.__webGLNormalBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFaceGroup.__webGLNormalBuffer );
_gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( normalArray ), _gl.STATIC_DRAW );
materialFace.__webGLColorBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLColorBuffer );
_gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( colorArray ), _gl.STATIC_DRAW );
materialFace.__webGLUVBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLUVBuffer );
materialFaceGroup.__webGLUVBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFaceGroup.__webGLUVBuffer );
_gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( uvArray ), _gl.STATIC_DRAW );
materialFace.__webGLFaceBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, materialFace.__webGLFaceBuffer );
materialFaceGroup.__webGLFaceBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, materialFaceGroup.__webGLFaceBuffer );
_gl.bufferData( _gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( faceArray ), _gl.STATIC_DRAW );
materialFace.__webGLLineBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, materialFace.__webGLLineBuffer );
materialFaceGroup.__webGLLineBuffer = _gl.createBuffer();
_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, materialFaceGroup.__webGLLineBuffer );
_gl.bufferData( _gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( lineArray ), _gl.STATIC_DRAW );
materialFace.__webGLFaceCount = faceArray.length;
materialFace.__webGLLineCount = lineArray.length;
materialFaceGroup.__webGLFaceCount = faceArray.length;
materialFaceGroup.__webGLLineCount = lineArray.length;
}
};
this.renderBuffer = function ( material, materialFaceGroup ) {
if ( material instanceof THREE.MeshPhongMaterial ) {
mAmbient = material.ambient;
mDiffuse = material.diffuse;
mSpecular = material.specular;
_gl.uniform4f( _program.mAmbient, mAmbient.r, mAmbient.g, mAmbient.b, material.opacity );
_gl.uniform4f( _program.mDiffuse, mDiffuse.r, mDiffuse.g, mDiffuse.b, material.opacity );
_gl.uniform4f( _program.mSpecular, mSpecular.r, mSpecular.g, mSpecular.b, material.opacity );
_gl.uniform1f( _program.mShininess, material.shininess );
_gl.uniform1i( _program.material, PHONG );
} else if ( material instanceof THREE.MeshColorFillMaterial ) {
color = material.color;
_gl.uniform4f( _program.uniformColor, color.r * color.a, color.g * color.a, color.b * color.a, color.a );
_gl.uniform1i( _program.material, COLORFILL );
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
lineWidth = material.lineWidth;
color = material.color;
_gl.uniform4f( _program.uniformColor, color.r * color.a, color.g * color.a, color.b * color.a, color.a );
_gl.uniform1i( _program.material, COLORSTROKE );
} else if ( material instanceof THREE.MeshBitmapMaterial ) {
if ( !material.__webGLTexture && material.loaded ) {
material.__webGLTexture = _gl.createTexture();
_gl.bindTexture( _gl.TEXTURE_2D, material.__webGLTexture );
_gl.texImage2D( _gl.TEXTURE_2D, 0, _gl.RGBA, _gl.RGBA, _gl.UNSIGNED_BYTE, material.bitmap ) ;
_gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_MAG_FILTER, _gl.LINEAR );
//_gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_MIN_FILTER, _gl.LINEAR_MIPMAP_NEAREST );
_gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_MIN_FILTER, _gl.LINEAR_MIPMAP_LINEAR );
_gl.generateMipmap( _gl.TEXTURE_2D );
_gl.bindTexture( _gl.TEXTURE_2D, null );
}
_gl.activeTexture( _gl.TEXTURE0 );
_gl.bindTexture( _gl.TEXTURE_2D, material.__webGLTexture );
_gl.uniform1i( _program.diffuse, 0 );
_gl.uniform1i( _program.material, BITMAP );
}
// vertices
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFaceGroup.__webGLVertexBuffer );
_gl.vertexAttribPointer( _program.position, 3, _gl.FLOAT, false, 0, 0 );
// normals
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFaceGroup.__webGLNormalBuffer );
_gl.vertexAttribPointer( _program.normal, 3, _gl.FLOAT, false, 0, 0 );
// uvs
if ( material instanceof THREE.MeshBitmapMaterial ) {
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFaceGroup.__webGLUVBuffer );
_gl.enableVertexAttribArray( _program.uv );
_gl.vertexAttribPointer( _program.uv, 2, _gl.FLOAT, false, 0, 0 );
}
else {
_gl.disableVertexAttribArray( _program.uv );
}
// render triangles
if ( material instanceof THREE.MeshBitmapMaterial ||
material instanceof THREE.MeshColorFillMaterial ||
material instanceof THREE.MeshPhongMaterial ) {
_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, materialFaceGroup.__webGLFaceBuffer );
_gl.drawElements( _gl.TRIANGLES, materialFaceGroup.__webGLFaceCount, _gl.UNSIGNED_SHORT, 0 );
}
// render lines
else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
_gl.lineWidth( lineWidth );
_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, materialFaceGroup.__webGLLineBuffer );
_gl.drawElements( _gl.LINES, materialFaceGroup.__webGLLineCount, _gl.UNSIGNED_SHORT, 0 );
}
};
this.renderMesh = function ( object, camera ) {
var m, ml, mf, material, materialFace, fi, lineWidth, mAmbient, mDiffuse, mSpecular;
var i, l, m, ml, mf, material, meshMaterial, materialFaceGroup, fi, lineWidth, mAmbient, mDiffuse, mSpecular;
// create separate VBOs per material
for (var mf in object.materialFaces ) {
materialFace = object.materialFaces[ mf ];
material = object.material[ mf ];
if( !material ) continue;
for ( var mf in object.materialFaceGroup ) {
materialFaceGroup = object.materialFaceGroup[ mf ];
// initialise on the first access
if( !materialFace.__webGLVertexBuffer ) {
if( ! materialFaceGroup.__webGLVertexBuffer ) {
this.createBuffers( object, mf );
@@ -255,135 +341,20 @@ THREE.WebGLRenderer = function () {
for ( m = 0, ml = object.material.length; m < ml; m++ ) {
material = object.material[ m ];
meshMaterial = object.material[ m ];
// these materials can be either the only material for whole mesh
// or if they are overlays in multimaterials, they apply only to
// group of faces with single material (specified by decalIndex)
if ( ( material instanceof THREE.MeshBitmapUVMappingMaterial ||
material instanceof THREE.MeshFaceColorFillMaterial ||
material instanceof THREE.MeshColorFillMaterial
)
&&
! ( m == mf || mf == material.decalIndex ) ) {
if ( meshMaterial instanceof THREE.MeshFaceMaterial ) {
continue;
}
if ( material instanceof THREE.MeshPhongMaterial ) {
mAmbient = material.ambient;
mDiffuse = material.diffuse;
mSpecular = material.specular;
_gl.uniform4f( _program.mAmbient, mAmbient.r, mAmbient.g, mAmbient.b, material.opacity );
_gl.uniform4f( _program.mDiffuse, mDiffuse.r, mDiffuse.g, mDiffuse.b, material.opacity );
_gl.uniform4f( _program.mSpecular, mSpecular.r, mSpecular.g, mSpecular.b, material.opacity );
_gl.uniform1f( _program.mShininess, material.shininess );
_gl.uniform1i( _program.material, PHONG );
} else if ( material instanceof THREE.MeshColorFillMaterial ) {
color = material.color;
_gl.uniform4f( _program.uniformColor, color.r * color.a, color.g * color.a, color.b * color.a, color.a );
_gl.uniform1i( _program.material, COLORFILL );
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
lineWidth = material.lineWidth;
color = material.color;
_gl.uniform4f( _program.uniformColor, color.r * color.a, color.g * color.a, color.b * color.a, color.a );
_gl.uniform1i( _program.material, COLORSTROKE );
} else if ( material instanceof THREE.MeshFaceColorFillMaterial ) {
_gl.uniform1i( _program.material, FACECOLORFILL );
} else if ( material instanceof THREE.MeshFaceColorStrokeMaterial ) {
lineWidth = material.lineWidth;
_gl.uniform1i( _program.material, FACECOLORSTROKE );
} else if ( material instanceof THREE.MeshBitmapUVMappingMaterial ) {
if ( !material.__webGLTexture && material.loaded ) {
material.__webGLTexture = _gl.createTexture();
_gl.bindTexture( _gl.TEXTURE_2D, material.__webGLTexture );
_gl.texImage2D( _gl.TEXTURE_2D, 0, _gl.RGBA, _gl.RGBA, _gl.UNSIGNED_BYTE, material.bitmap ) ;
_gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_MAG_FILTER, _gl.LINEAR );
//_gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_MIN_FILTER, _gl.LINEAR_MIPMAP_NEAREST );
_gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_MIN_FILTER, _gl.LINEAR_MIPMAP_LINEAR );
_gl.generateMipmap( _gl.TEXTURE_2D );
_gl.bindTexture( _gl.TEXTURE_2D, null );
for ( i = 0, l = materialFaceGroup.material.length; i < l; i++ ) {
material = materialFaceGroup.material[ i ];
this.renderBuffer( material, materialFaceGroup );
}
_gl.activeTexture( _gl.TEXTURE0 );
_gl.bindTexture( _gl.TEXTURE_2D, material.__webGLTexture );
_gl.uniform1i( _program.diffuse, 0 );
} else {
_gl.uniform1i( _program.material, BITMAP );
}
// vertices
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLVertexBuffer );
_gl.vertexAttribPointer( _program.position, 3, _gl.FLOAT, false, 0, 0 );
// normals
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLNormalBuffer );
_gl.vertexAttribPointer( _program.normal, 3, _gl.FLOAT, false, 0, 0 );
// colors
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLColorBuffer );
_gl.vertexAttribPointer( _program.color, 4, _gl.FLOAT, false, 0, 0 );
// uvs
if ( material instanceof THREE.MeshBitmapUVMappingMaterial ) {
_gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLUVBuffer );
_gl.enableVertexAttribArray( _program.uv );
_gl.vertexAttribPointer( _program.uv, 2, _gl.FLOAT, false, 0, 0 );
}
else {
_gl.disableVertexAttribArray( _program.uv );
}
// render triangles
if ( material instanceof THREE.MeshBitmapUVMappingMaterial ||
material instanceof THREE.MeshFaceColorFillMaterial ||
material instanceof THREE.MeshColorFillMaterial ||
material instanceof THREE.MeshPhongMaterial ) {
_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, materialFace.__webGLFaceBuffer );
_gl.drawElements( _gl.TRIANGLES, materialFace.__webGLFaceCount, _gl.UNSIGNED_SHORT, 0 );
}
// render lines
else if ( material instanceof THREE.MeshColorStrokeMaterial ||
material instanceof THREE.MeshFaceColorStrokeMaterial ) {
_gl.lineWidth( lineWidth );
_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, materialFace.__webGLLineBuffer );
_gl.drawElements( _gl.LINES, materialFace.__webGLLineCount, _gl.UNSIGNED_SHORT, 0 );
material = meshMaterial;
this.renderBuffer( material, materialFaceGroup );
}
@@ -513,12 +484,11 @@ THREE.WebGLRenderer = function () {
"uniform vec4 uniformColor;",
"varying vec2 vertexUv;",
"varying vec4 vertexColor;",
"varying vec3 lightWeighting;",
"varying vec3 vNormal;",
"uniform int material;", // 0 - ColorFill, 1 - ColorStroke, 2 - FaceColorFill, 3 - FaceColorStroke, 4 - Bitmap, 5 - Phong
"uniform int material;", // 0 - ColorFill, 1 - ColorStroke, 2 - Bitmap, 3 - Phong
"uniform vec4 mAmbient;",
"uniform vec4 mDiffuse;",
@@ -533,7 +503,7 @@ THREE.WebGLRenderer = function () {
// Blinn-Phong
// based on o3d example
"if(material==5) { ",
"if(material==3) { ",
"vec3 lightVectorPoint = normalize(pLightVectorPoint);",
"vec3 lightVectorDir = normalize(pLightVectorDirection);",
@@ -571,18 +541,10 @@ THREE.WebGLRenderer = function () {
"gl_FragColor = vec4((pointLight.xyz + dirLight.xyz) * lightWeighting, 1.0);",
// Bitmap: texture
"} else if(material==4) {",
"} else if(material==2) {",
"vec4 texelColor = texture2D(diffuse, vertexUv);",
"gl_FragColor = vec4(texelColor.rgb * lightWeighting, texelColor.a);",
// FaceColorStroke: wireframe using vertex color
"} else if(material==3) {",
"gl_FragColor = vec4(vertexColor.rgb * lightWeighting, vertexColor.a);",
// FaceColorFill: triangle using vertex color
"} else if(material==2) {",
"gl_FragColor = vec4(vertexColor.rgb * lightWeighting, vertexColor.a);",
// ColorStroke: wireframe using uniform color
"} else if(material==1) {",
"gl_FragColor = vec4(uniformColor.rgb * lightWeighting, uniformColor.a);",
@@ -598,7 +560,6 @@ THREE.WebGLRenderer = function () {
_gl.attachShader( _program, getShader( "vertex", [
"attribute vec3 position;",
"attribute vec3 normal;",
"attribute vec4 color;",
"attribute vec2 uv;",
"uniform bool enableLighting;",
@@ -653,7 +614,6 @@ THREE.WebGLRenderer = function () {
"}",
"vNormal = transformedNormal;",
"vertexColor = color;",
"vertexUv = uv;",
"gl_Position = projectionMatrix * mvPosition;",
@@ -694,9 +654,6 @@ THREE.WebGLRenderer = function () {
_program.cameraPosition = _gl.getUniformLocation(_program, 'cameraPosition');
_program.color = _gl.getAttribLocation( _program, "color" );
_gl.enableVertexAttribArray( _program.color );
_program.position = _gl.getAttribLocation( _program, "position" );
_gl.enableVertexAttribArray( _program.position );
utils/Builder.py
+2 -3
View File
@@ -29,11 +29,10 @@ files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshPhongMaterial.js')
files.append('materials/MeshBitmapUVMappingMaterial.js')
files.append('materials/MeshBitmapMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
files.append('materials/MeshColorStrokeMaterial.js')
files.append('materials/MeshFaceColorFillMaterial.js')
files.append('materials/MeshFaceColorStrokeMaterial.js')
files.append('materials/MeshFaceMaterial.js')
files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('materials/ParticleDOMMaterial.js')
utils/BuilderCanvas.py
+2 -3
View File
@@ -29,11 +29,10 @@ files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshPhongMaterial.js')
files.append('materials/MeshBitmapUVMappingMaterial.js')
files.append('materials/MeshBitmapMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
files.append('materials/MeshColorStrokeMaterial.js')
files.append('materials/MeshFaceColorFillMaterial.js')
files.append('materials/MeshFaceColorStrokeMaterial.js')
files.append('materials/MeshFaceMaterial.js')
files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('scenes/Scene.js')
utils/BuilderDebug.py
+2 -3
View File
@@ -29,11 +29,10 @@ files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshPhongMaterial.js')
files.append('materials/MeshBitmapUVMappingMaterial.js')
files.append('materials/MeshBitmapMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
files.append('materials/MeshColorStrokeMaterial.js')
files.append('materials/MeshFaceColorFillMaterial.js')
files.append('materials/MeshFaceColorStrokeMaterial.js')
files.append('materials/MeshFaceMaterial.js')
files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('materials/ParticleDOMMaterial.js')
utils/BuilderSVG.py
+3 -3
View File
@@ -27,11 +27,11 @@ files.append('objects/Object3D.js')
files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/MeshBitmapUVMappingMaterial.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshBitmapMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
files.append('materials/MeshColorStrokeMaterial.js')
files.append('materials/MeshFaceColorFillMaterial.js')
files.append('materials/MeshFaceColorStrokeMaterial.js')
files.append('materials/MeshFaceMaterial.js')
files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('scenes/Scene.js')
utils/BuilderWebGL.py
+2 -3
View File
@@ -29,11 +29,10 @@ files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.js')
files.append('materials/MeshPhongMaterial.js')
files.append('materials/MeshBitmapUVMappingMaterial.js')
files.append('materials/MeshBitmapMaterial.js')
files.append('materials/MeshColorFillMaterial.js')
files.append('materials/MeshColorStrokeMaterial.js')
files.append('materials/MeshFaceColorFillMaterial.js')
files.append('materials/MeshFaceColorStrokeMaterial.js')
files.append('materials/MeshFaceMaterial.js')
files.append('materials/ParticleBitmapMaterial.js')
files.append('materials/ParticleCircleMaterial.js')
files.append('scenes/Scene.js')
utils/REVISION
+1 -1
View File
@@ -1 +1 @@
24
25
utils/exporters/convert_obj_threejs.py
+15 -15
View File
@@ -163,18 +163,18 @@ var %(name)s = function ( urlbase ) {
scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
}
function f3( a, b, c, material ) {
var color = material_color(material);
scope.faces.push( new THREE.Face3( a, b, c, null, new THREE.Color(color), material ) );
function f3( a, b, c, mi ) {
var material = scope.materials[ mi ];
scope.faces.push( new THREE.Face3( a, b, c, null, material ) );
}
function f4( a, b, c, d, material ) {
var color = material_color(material);
scope.faces.push( new THREE.Face4( a, b, c, d, null, new THREE.Color(color), material ) );
function f4( a, b, c, d, mi ) {
var material = scope.materials[ mi ];
scope.faces.push( new THREE.Face4( a, b, c, d, null, material ) );
}
function f3n( a, b, c, material, n1, n2, n3 ) {
var color = material_color(material);
function f3n( a, b, c, mi, n1, n2, n3 ) {
var material = scope.materials[ mi ];
var n1x = normals[n1][0];
var n1y = normals[n1][1];
var n1z = normals[n1][2];
@@ -186,11 +186,11 @@ var %(name)s = function ( urlbase ) {
var n3z = normals[n3][2];
scope.faces.push( new THREE.Face3( a, b, c,
[new THREE.Vector3( n1x, n1y, n1z ), new THREE.Vector3( n2x, n2y, n2z ), new THREE.Vector3( n3x, n3y, n3z )],
new THREE.Color(color), material ) );
material ) );
}
function f4n( a, b, c, d, material, n1, n2, n3, n4 ) {
var color = material_color(material);
function f4n( a, b, c, d, mi, n1, n2, n3, n4 ) {
var material = scope.materials[ mi ];
var n1x = normals[n1][0];
var n1y = normals[n1][1];
var n1z = normals[n1][2];
@@ -205,7 +205,7 @@ var %(name)s = function ( urlbase ) {
var n4z = normals[n4][2];
scope.faces.push( new THREE.Face4( a, b, c, d,
[new THREE.Vector3( n1x, n1y, n1z ), new THREE.Vector3( n2x, n2y, n2z ), new THREE.Vector3( n3x, n3y, n3z ), new THREE.Vector3( n4x, n4y, n4z )],
new THREE.Color(color), material ) );
material ) );
}
function uv( u1, v1, u2, v2, u3, v3, u4, v4 ) {
@@ -220,7 +220,7 @@ var %(name)s = function ( urlbase ) {
function init_materials() {
scope.materials = [];
for(var i=0; i<materials.length; ++i) {
scope.materials[i] = create_material( materials[i], urlbase );
scope.materials[i] = [ create_material( materials[i], urlbase ) ];
}
}
@@ -240,7 +240,7 @@ var %(name)s = function ( urlbase ) {
if( m.map_diffuse && urlbase ) {
var texture = document.createElement( 'canvas' );
material = new THREE.MeshBitmapUVMappingMaterial( texture );
material = new THREE.MeshBitmapMaterial( texture );
var image = new Image();
image.onload = function () {
@@ -269,7 +269,7 @@ var %(name)s = function ( urlbase ) {
material = new THREE.MeshColorFillMaterial( m.a_dbg_color );
}
else {
material = new THREE.MeshFaceColorFillMaterial( );
material = new THREE.MeshColorFillMaterial( 0xffeeeeee );
}
return material;