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

* MeshBitmapUVMappingMaterial -> MeshBitmapMaterial. Second param is mode, which is THREE.MeshBitmapMaterialMode.UVMAPPING by default.

Browse Source 
* Removed MeshFaceColorFillMaterial and MeshFaceColorStrokeMaterial
* Added MeshFaceMaterial ( it uses the face.material for that pass )
* CanvasRenderer and SVGRenderer per face material logic changed.
* SVGRenderer supports particles again.
* WebGLRenderer currently broken :/
* Code clean up
This commit is contained in:
Mr.doob
2010-10-27 08:49:00 +01:00
parent 87e0d754bd
commit 7464f5ff97
30 changed files with 1537 additions and 1551 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
+2 -3
View File
@@ -65,11 +65,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/materials_test.html
+5 -6
View File
@@ -68,11 +68,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>
@@ -257,11 +256,11 @@
xc2.fillRect(i*4, 5, 2, 54);
}
var xm1 = new THREE.MeshBitmapUVMappingMaterial( x1 );
var xm1 = new THREE.MeshBitmapMaterial( x1 );
xm1.loaded = 1;
xm1.decalIndex = 0; // index of the original UV mapped material
var xm2 = new THREE.MeshBitmapUVMappingMaterial( x2 );
var xm2 = new THREE.MeshBitmapMaterial( x2 );
xm2.loaded = 1;
xm2.decalIndex = 1; // index of the original UV mapped material
@@ -320,7 +319,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_convert_test.html
+1 -1
View File
@@ -160,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 );
examples/test.html
+11 -12
View File
@@ -33,15 +33,14 @@
<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/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>
@@ -104,7 +103,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);
@@ -155,22 +154,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);
@@ -239,7 +238,7 @@
canvasRenderer.render( scene, camera );
svgRenderer.render( scene, camera );
webglRenderer.render( scene, camera );
// webglRenderer.render( scene, camera ); // currently broken :/
stats.update();
src/core/Face3.js
+3 -14
View File
@@ -2,32 +2,21 @@
* @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.normal = normal instanceof THREE.Vector3 ? normal : new THREE.Vector3();
this.color = color || new THREE.Color( 0xff000000 );
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
+2 -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;
@@ -12,24 +12,13 @@ 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.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
+18
View File
@@ -0,0 +1,18 @@
/**
* @author mr.doob / http://mrdoob.com/
*/
THREE.MeshBitmapMaterial = function ( bitmap, mode ) {
this.bitmap = bitmap;
this.mode = mode || THREE.MeshBitmapMaterialMode.UVMAPPING;
this.toString = function () {
return 'THREE.MeshBitmapUVMappingMaterial ( bitmap: ' + this.bitmap + ', mode: ' + this.mode + ' )';
};
};
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/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 ) {
utils/Builder.py
+2 -3
View File
@@ -28,11 +28,10 @@ files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.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
@@ -28,11 +28,10 @@ files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.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
@@ -28,11 +28,10 @@ files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.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
@@ -28,11 +28,10 @@ files.append('objects/Particle.js')
files.append('objects/Line.js')
files.append('objects/Mesh.js')
files.append('materials/LineColorMaterial.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')