Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 106c77b9 编写于 作者: M Mr.doob
浏览文件
操作

Reverting

上级 91023d3f
展开全部 隐藏空白更改
内联 并排
Showing with 379 addition and 378 deletion
README.md
浏览文件 @ 106c77b9
......@@ -40,7 +40,6 @@ This code creates a camera, then creates a scene object, adds a bunch of random
function init()
{
camera = new Camera(0, 0, 1000);
camera.setProjectionMatrix(Matrix4.makePerspective(45, SCREEN_WIDTH/SCREEN_HEIGHT, 0.001, 1000));
scene = new Scene();
......@@ -73,7 +72,6 @@ If you are interested on messing with the actual library, instead of importing t
<script type="text/javascript" src="src/Class.js"></script>
<script type="text/javascript" src="src/core/Color.js"></script>
<script type="text/javascript" src="src/core/Vector3.js"></script>
<script type="text/javascript" src="src/core/Vector4.js"></script>
<script type="text/javascript" src="src/core/Matrix4.js"></script>
<script type="text/javascript" src="src/core/Vertex.js"></script>
<script type="text/javascript" src="src/core/Face3.js"></script>
......@@ -91,18 +89,10 @@ If you are interested on messing with the actual library, instead of importing t
<script type="text/javascript" src="src/renderers/Renderer.js"></script>
<script type="text/javascript" src="src/renderers/CanvasRenderer.js"></script>
<script type="text/javascript" src="src/renderers/SVGRenderer.js"></script>
<script type="text/javascript" src="src/renderers/GLRenderer.js"></script>
### Change Log ###
2010 05 01 - **r5** (23.104 kb)
* Projection matrix ([supereggbert](http://github.com/supereggbert))
* Particles culling ([supereggbert](http://github.com/supereggbert))
* WIP GLRenderer ([supereggbert](http://github.com/supereggbert))
2010 04 26 - **r4** (16.274 kb)
* SVGRenderer Particle rendering
......
build/three.js
浏览文件 @ 106c77b9
此差异已折叠。
examples/geometry/cube.html
浏览文件 @ 106c77b9
......@@ -58,8 +58,8 @@
info.innerHTML = 'Drag to spin the cube';
container.appendChild(info);
camera = new Camera(0, 150, 600);
camera.setProjectionMatrix(Matrix4.makePerspective(45, SCREEN_WIDTH/SCREEN_HEIGHT, 0.001, 1000));
camera = new Camera(0, 150, 400);
camera.focus = 300;
camera.target.y = 150;
camera.updateMatrix();
......
examples/particles/floor.html
浏览文件 @ 106c77b9
......@@ -55,7 +55,7 @@
document.body.appendChild(container);
camera = new Camera(0, 0, 1000);
camera.setProjectionMatrix(Matrix4.makePerspective(45, SCREEN_WIDTH/SCREEN_HEIGHT, 10, 10000));
camera.focus = 200;
scene = new Scene();
......
examples/particles/random.html
浏览文件 @ 106c77b9
......@@ -49,8 +49,8 @@
container = document.createElement('div');
document.body.appendChild(container);
camera = new Camera(0, 0, -1000);
camera.setProjectionMatrix(Matrix4.makePerspective(60, SCREEN_WIDTH/SCREEN_HEIGHT, 10, 10000));
camera = new Camera(0, 0, 1000);
camera.focus = 200;
scene = new Scene();
......
examples/particles/waves.html
浏览文件 @ 106c77b9
......@@ -55,7 +55,7 @@
document.body.appendChild(container);
camera = new Camera(0, 0, 1000);
camera.setProjectionMatrix(Matrix4.makePerspective(45, SCREEN_WIDTH/SCREEN_HEIGHT, 10, 6000));
camera.focus = 200;
scene = new Scene();
......
src/cameras/Camera.js 100644 → 100755
浏览文件 @ 106c77b9
var Camera = Vector3.extend
({
up: null,
target: null,
zoom: null,
focus: null,
roll: null,
matrix: null,
projectionMatrix: null,
init: function(x, y, z)
{
this._super(x, y, z);
this.up = new Vector3( 0, 1, 0 );
this.target = new Vector3( 0, 0, 0 );
this.projectionMatrix = Matrix4.makePerspective(45, 1, 0.001, 1000);
this.matrix = new Matrix4();
this.updateMatrix();
},
updateMatrix: function()
{
this.matrix.lookAt( this, this.target, this.up );
},
setProjectionMatrix: function(matrix)
{
this.projectionMatrix=matrix;
},
toString: function()
{
return 'Camera ( ' + this.x + ', ' + this.y + ', ' + this.z + ' )';
}
});
\ No newline at end of file
var Camera = Vector3.extend
({
up: null,
target: null,
zoom: null,
focus: null,
roll: null,
matrix: null,
init: function(x, y, z)
{
this._super(x, y, z);
this.up = new Vector3( 0, 1, 0 );
this.target = new Vector3( 0, 0, 0 );
this.zoom = 3;
this.focus = 500;
this.roll = 0;
this.matrix = new Matrix4();
this.updateMatrix();
},
updateMatrix: function()
{
this.matrix.lookAt( this, this.target, this.up );
},
toString: function()
{
return 'Camera ( ' + this.x + ', ' + this.y + ', ' + this.z + ' )';
}
});
src/core/Matrix4.js 100644 → 100755
浏览文件 @ 106c77b9
var Matrix4 = Class.extend
({
n11: null, n12: null, n13: null, n14: null,
n21: null, n22: null, n23: null, n24: null,
n31: null, n32: null, n33: null, n34: null,
n41: null, n42: null, n43: null, n44: null,
x: null, y: null, z: null,
init: function()
{
this.identity();
},
identity: function()
{
this.n11 = 1; this.n12 = 0; this.n13 = 0; this.n14 = 0;
this.n21 = 0; this.n22 = 1; this.n23 = 0; this.n24 = 0;
this.n31 = 0; this.n32 = 0; this.n33 = 1; this.n34 = 0;
this.n41 = 0; this.n42 = 0; this.n43 = 0; this.n44 = 1;
this.x = new Vector3(0,0,0);
this.y = new Vector3(0,0,0);
this.z = new Vector3(0,0,0);
},
lookAt: function(eye, center, up)
{
this.z.sub(center, eye);
this.z.normalize();
this.z.negate();
this.x.copy(this.z);
this.x.cross(up);
this.x.normalize();
this.x.negate();
this.y.copy(this.x);
this.y.cross(this.z);
this.y.normalize();
this.y.negate(); //
this.n11 = this.x.x;
this.n12 = this.x.y;
this.n13 = this.x.z;
this.n14 = -this.x.dot(eye);
this.n21 = this.y.x;
this.n22 = this.y.y;
this.n23 = this.y.z;
this.n24 = -this.y.dot(eye);
this.n31 = this.z.x;
this.n32 = this.z.y;
this.n33 = this.z.z;
this.n34 = -this.z.dot(eye);
},
transform: function(v)
{
var vx = v.x, vy = v.y, vz = v.z, vw = (v.w ? v.w : 1.0);
v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14 * vw;
v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24 * vw;
v.z = this.n31 * vx + this.n32 * vy + this.n33 * vz + this.n34 * vw;
vw = this.n41 * vx + this.n42 * vy + this.n43 * vz + this.n44 * vw;
if(v.w)
{
v.w = vw;
}
else
{
v.x = v.x/vw;
v.y = v.y/vw;
v.z = v.z/vw;
}
},
crossVector: function(a)
{
v = new Vector4();
v.x = this.n11*a.x+n12*a.y+n13*a.z+n14*a.w;
v.y = this.n21*a.x+n22*a.y+n23*a.z+n24*a.w;
v.z = this.n31*a.x+n32*a.y+n33*a.z+n34*a.w;
if (a.w)
{
v.w = this.n41*a.x+n42*a.y+n43*a.z+n44*a.w;
}
else
{
v.w = 1.0;
}
return v;
},
multiply: function(a, b)
{
this.n11 = a.n11 * b.n11 + a.n12 * b.n21 + a.n13 * b.n31 + a.n14 * b.n41;
this.n12 = a.n11 * b.n12 + a.n12 * b.n22 + a.n13 * b.n32 + a.n14 * b.n42;
this.n13 = a.n11 * b.n13 + a.n12 * b.n23 + a.n13 * b.n33 + a.n14 * b.n43;
this.n14 = a.n11 * b.n14 + a.n12 * b.n24 + a.n13 * b.n34 + a.n14 * b.n44;
this.n21 = a.n21 * b.n11 + a.n22 * b.n21 + a.n23 * b.n31 + a.n24 * b.n41;
this.n22 = a.n21 * b.n12 + a.n22 * b.n22 + a.n23 * b.n32 + a.n24 * b.n42;
this.n23 = a.n21 * b.n13 + a.n22 * b.n23 + a.n23 * b.n33 + a.n24 * b.n34;
this.n24 = a.n21 * b.n14 + a.n22 * b.n24 + a.n23 * b.n34 + a.n24 * b.n44;
this.n31 = a.n31 * b.n11 + a.n32 * b.n21 + a.n33 * b.n31 + a.n34 * b.n41;
this.n32 = a.n31 * b.n12 + a.n32 * b.n22 + a.n33 * b.n32 + a.n34 * b.n42;
this.n33 = a.n31 * b.n13 + a.n32 * b.n23 + a.n33 * b.n33 + a.n34 * b.n43;
this.n34 = a.n31 * b.n14 + a.n32 * b.n24 + a.n33 * b.n34 + a.n34 * b.n44;
this.n41 = a.n41 * b.n11 + a.n42 * b.n21 + a.n43 * b.n31 + a.n44 * b.n41;
this.n42 = a.n41 * b.n12 + a.n42 * b.n22 + a.n43 * b.n32 + a.n44 * b.n42;
this.n43 = a.n41 * b.n13 + a.n42 * b.n23 + a.n43 * b.n33 + a.n44 * b.n43;
this.n44 = a.n41 * b.n14 + a.n42 * b.n24 + a.n43 * b.n34 + a.n44 * b.n44;
},
multiplySelf: function(m)
{
var n11 = this.n11, n12 = this.n12, n13 = this.n13, n14 = this.n14;
var n21 = this.n21, n22 = this.n22, n23 = this.n23, n24 = this.n24;
var n31 = this.n31, n32 = this.n32, n33 = this.n33, n34 = this.n34;
var n41 = this.n41, n42 = this.n42, n43 = this.n43, n44 = this.n44;
this.n11 = n11 * m.n11 + n12 * m.n21 + n13 * m.n31 + n14 * m.n41;
this.n12 = n11 * m.n12 + n12 * m.n22 + n13 * m.n32 + n14 * m.n42;
this.n13 = n11 * m.n13 + n12 * m.n23 + n13 * m.n33 + n14 * m.n43;
this.n14 = n11 * m.n14 + n12 * m.n24 + n13 * m.n34 + n14 * m.n44;
this.n21 = n21 * m.n11 + n22 * m.n21 + n23 * m.n31 + n24 * m.n41;
this.n22 = n21 * m.n12 + n22 * m.n22 + n23 * m.n32 + n24 * m.n42;
this.n23 = n21 * m.n13 + n22 * m.n23 + n23 * m.n33 + n24 * m.n43;
this.n24 = n21 * m.n14 + n22 * m.n24 + n23 * m.n34 + n24 * m.n44;
this.n31 = n31 * m.n11 + n32 * m.n21 + n33 * m.n31 + n34 * m.n41;
this.n32 = n31 * m.n12 + n32 * m.n22 + n33 * m.n32 + n34 * m.n42;
this.n33 = n31 * m.n13 + n32 * m.n23 + n33 * m.n33 + n34 * m.n43;
this.n34 = n31 * m.n14 + n32 * m.n24 + n33 * m.n34 + n34 * m.n44;
this.n41 = n41 * m.n11 + n42 * m.n21 + n43 * m.n31 + n44 * m.n41;
this.n42 = n41 * m.n12 + n42 * m.n22 + n43 * m.n32 + n44 * m.n42;
this.n43 = n41 * m.n13 + n42 * m.n23 + n43 * m.n33 + n44 * m.n43;
this.n44 = n41 * m.n14 + n42 * m.n24 + n43 * m.n34 + n44 * m.n44;
},
clone: function()
{
var m = new Matrix4();
m.n11 = this.n11; m.n12 = this.n12; m.n13 = this.n13; m.n14 = this.n14;
m.n21 = this.n21; m.n22 = this.n22; m.n23 = this.n23; m.n24 = this.n24;
m.n31 = this.n31; m.n32 = this.n32; m.n33 = this.n33; m.n34 = this.n34;
m.n41 = this.n41; m.n42 = this.n42; m.n43 = this.n43; m.n44 = this.n44;
return m;
},
toString: function()
{
return "| " + this.n11 + " " + this.n12 + " " + this.n13 + " " + this.n14 + " |\n" +
"| " + this.n21 + " " + this.n22 + " " + this.n23 + " " + this.n24 + " |\n" +
"| " + this.n31 + " " + this.n32 + " " + this.n33 + " " + this.n34 + " |\n" +
"| " + this.n41 + " " + this.n42 + " " + this.n43 + " " + this.n44 + " |";
}
});
Matrix4.translationMatrix = function(x, y, z)
{
var m = new Matrix4();
m.n14 = x;
m.n24 = y;
m.n34 = z;
return m;
}
Matrix4.scaleMatrix = function(x, y, z)
{
var m = new Matrix4();
m.n11 = x;
m.n22 = y;
m.n33 = z;
return m;
}
Matrix4.rotationXMatrix = function(theta)
{
var rot = new Matrix4();
rot.n22 = rot.n33 = Math.cos(theta);
rot.n32 = Math.sin(theta);
rot.n23 = -rot.n32;
return rot;
}
Matrix4.rotationYMatrix = function(theta)
{
var rot = new Matrix4();
rot.n11 = rot.n33 = Math.cos(theta);
rot.n13 = Math.sin(theta);
rot.n31 = -rot.n13;
return rot;
}
Matrix4.rotationZMatrix = function(theta)
{
var rot = new Matrix4();
rot.n11 = rot.n22 = Math.cos(theta);
rot.n21 = Math.sin(theta);
rot.n12 = -rot.n21;
return rot;
}
Matrix4.makeFrustum = function(left,right,bottom,top,near,far)
{
var m = new Matrix4();
var x = 2*near/(right-left);
var y = 2*near/(top-bottom);
var a = (right+left)/(right-left);
var b = (top+bottom)/(top-bottom);
var c = -(far+near)/(far-near);
var d = -2*far*near/(far-near);
m.n11=x;
m.n13=a;
m.n22=y;
m.n23=b;
m.n33=c;
m.n34=d;
m.n43=-1;
m.n44=0;
return m;
}
Matrix4.makePerspective = function(fovy, aspect, near, far)
{
var ymax = near * Math.tan(fovy * 0.00872664625972);
var ymin = -ymax;
var xmin = ymin * aspect;
var xmax = ymax * aspect;
return Matrix4.makeFrustum(xmin, xmax, ymin, ymax, near, far);
}
var Matrix4 = Class.extend
({
n11: null, n12: null, n13: null, n14: null,
n21: null, n22: null, n23: null, n24: null,
n31: null, n32: null, n33: null, n34: null,
x: null, y: null, z: null,
init: function()
{
this.identity();
},
identity: function()
{
this.n11 = 1; this.n12 = 0; this.n13 = 0; this.n14 = 0;
this.n21 = 0; this.n22 = 1; this.n23 = 0; this.n24 = 0;
this.n31 = 0; this.n32 = 0; this.n33 = 1; this.n34 = 0;
this.x = new Vector3(0,0,0);
this.y = new Vector3(0,0,0);
this.z = new Vector3(0,0,0);
},
lookAt: function(eye, center, up)
{
this.z.sub(center, eye);
this.z.normalize();
this.x.copy(this.z);
this.x.cross(up);
this.x.normalize();
this.y.copy(this.x);
this.y.cross(this.z);
this.y.normalize();
this.y.negate(); //
this.n11 = this.x.x;
this.n12 = this.x.y;
this.n13 = this.x.z;
this.n14 = -this.x.dot(eye);
this.n21 = this.y.x;
this.n22 = this.y.y;
this.n23 = this.y.z;
this.n24 = -this.y.dot(eye);
this.n31 = this.z.x;
this.n32 = this.z.y;
this.n33 = this.z.z;
this.n34 = -this.z.dot(eye);
},
transform: function(v)
{
var vx = v.x, vy = v.y, vz = v.z;
v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14;
v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24;
v.z = this.n31 * vx + this.n32 * vy + this.n33 * vz + this.n34;
},
multiply: function(a, b)
{
this.n11 = a.n11 * b.n11 + a.n12 * b.n21 + a.n13 * b.n31;
this.n12 = a.n11 * b.n12 + a.n12 * b.n22 + a.n13 * b.n32;
this.n13 = a.n11 * b.n13 + a.n12 * b.n23 + a.n13 * b.n33;
this.n14 = a.n11 * b.n14 + a.n12 * b.n24 + a.n13 * b.n34 + a.n14;
this.n21 = a.n21 * b.n11 + a.n22 * b.n21 + a.n23 * b.n31;
this.n22 = a.n21 * b.n12 + a.n22 * b.n22 + a.n23 * b.n32;
this.n23 = a.n21 * b.n13 + a.n22 * b.n23 + a.n23 * b.n33;
this.n24 = a.n21 * b.n14 + a.n22 * b.n24 + a.n23 * b.n34 + a.n24;
this.n31 = a.n31 * b.n11 + a.n32 * b.n21 + a.n33 * b.n31;
this.n32 = a.n31 * b.n12 + a.n32 * b.n22 + a.n33 * b.n32;
this.n33 = a.n31 * b.n13 + a.n32 * b.n23 + a.n33 * b.n33;
this.n34 = a.n31 * b.n14 + a.n32 * b.n24 + a.n33 * b.n34 + a.n34;
},
multiplySelf: function(m)
{
var n11 = this.n11, n12 = this.n12, n13 = this.n13, n14 = this.n14;
var n21 = this.n21, n22 = this.n22, n23 = this.n23, n24 = this.n24;
var n31 = this.n31, n32 = this.n32, n33 = this.n33, n34 = this.n34;
this.n11 = n11 * m.n11 + n12 * m.n21 + n13 * m.n31;
this.n12 = n11 * m.n12 + n12 * m.n22 + n13 * m.n32;
this.n13 = n11 * m.n13 + n12 * m.n23 + n13 * m.n33;
this.n14 = n11 * m.n14 + n12 * m.n24 + n13 * m.n34 + n14;
this.n21 = n21 * m.n11 + n22 * m.n21 + n23 * m.n31;
this.n22 = n21 * m.n12 + n22 * m.n22 + n23 * m.n32;
this.n23 = n21 * m.n13 + n22 * m.n23 + n23 * m.n33;
this.n24 = n21 * m.n14 + n22 * m.n24 + n23 * m.n34 + n24;
this.n31 = n31 * m.n11 + n32 * m.n21 + n33 * m.n31;
this.n32 = n31 * m.n12 + n32 * m.n22 + n33 * m.n32;
this.n33 = n31 * m.n13 + n32 * m.n23 + n33 * m.n33;
this.n34 = n31 * m.n14 + n32 * m.n24 + n33 * m.n34 + n34;
},
clone: function()
{
var m = new Matrix4();
m.n11 = this.n11; m.n12 = this.n12; m.n13 = this.n13; m.n14 = this.n14;
m.n21 = this.n21; m.n22 = this.n22; m.n23 = this.n23; m.n24 = this.n24;
m.n31 = this.n31; m.n32 = this.n32; m.n33 = this.n33; m.n34 = this.n34;
return m;
},
toString: function()
{
return "| " + this.n11 + " " + this.n12 + " " + this.n13 + " " + this.n14 + " |\n" +
"| " + this.n21 + " " + this.n22 + " " + this.n23 + " " + this.n24 + " |\n" +
"| " + this.n31 + " " + this.n32 + " " + this.n33 + " " + this.n34 + " |";
}
});
Matrix4.translationMatrix = function(x, y, z)
{
var m = new Matrix4();
m.n14 = x;
m.n24 = y;
m.n34 = z;
return m;
}
Matrix4.scaleMatrix = function(x, y, z)
{
var m = new Matrix4();
m.n11 = x;
m.n22 = y;
m.n33 = z;
return m;
}
Matrix4.rotationXMatrix = function(theta)
{
var rot = new Matrix4();
rot.n22 = rot.n33 = Math.cos(theta);
rot.n32 = Math.sin(theta);
rot.n23 = -rot.n32;
return rot;
}
Matrix4.rotationYMatrix = function(theta)
{
var rot = new Matrix4();
rot.n11 = rot.n33 = Math.cos(theta);
rot.n13 = Math.sin(theta);
rot.n31 = -rot.n13;
return rot;
}
Matrix4.rotationZMatrix = function(theta)
{
var rot = new Matrix4();
rot.n11 = rot.n22 = Math.cos(theta);
rot.n21 = Math.sin(theta);
rot.n12 = -rot.n21;
return rot;
}
src/core/Vector3.js
浏览文件 @ 106c77b9
......@@ -126,11 +126,6 @@ var Vector3 = Class.extend
return new Vector3(this.x, this.y, this.z);
},
toVector4: function()
{
return new Vector4(this.x,this.y,this.z, 1.0);
},
toString: function()
{
return 'Vector3 (' + this.x + ', ' + this.y + ', ' + this.z + ')';
......
src/renderers/CanvasRenderer.js
浏览文件 @ 106c77b9
......@@ -65,7 +65,7 @@ var CanvasRenderer = Renderer.extend
else if (element instanceof Particle)
{
this.context.beginPath();
this.context.arc(element.screen.x, element.screen.y, element.zsize, 0, pi2, true);
this.context.arc(element.screen.x, element.screen.y, element.size * element.screen.z, 0, pi2, true);
this.context.fill();
this.context.closePath();
}
......
src/renderers/GLRenderer.js
浏览文件 @ 106c77b9
......@@ -23,7 +23,9 @@ var GLRenderer = Renderer.extend
this.gl.depthFunc(this.gl.LESS);
this.gl.enable(this.gl.BLEND);
this.gl.blendFunc(this.gl.SRC_ALPHA,this.gl.ONE_MINUS_SRC_ALPHA);
this.gl.clearColor(0,0,0,0);
this.createProgram();
this.initParticles(32);
},
setSize: function( width, height )
......@@ -32,6 +34,82 @@ var GLRenderer = Renderer.extend
this.viewport.width = this.width;
this.viewport.height = this.height;
this.gl.viewport(0,0,this.width,this.height);
},
initParticles: function (segments)
{
var gl=this.gl;
var x,y;
var vertexArray=[0,0,0];
var faceArray=[];
piStep=6.282/segments;
for(var i=0;i<segments;i++){
x=Math.sin(piStep*i);
y=Math.cos(piStep*i);
vertexArray.push(x,y,0);
if(i>0)
{
faceArray.push(0,i,i+1);
}
}
faceArray.push(0,i,1);
var vtxShader=[
"attribute vec3 position;",
"uniform vec3 location;",
"uniform mat4 cameraMatrix;",
"uniform mat4 pMatrix;",
"uniform float size;",
"void main(){",
"vec4 pos=cameraMatrix*vec4(location,1.0);",
"pos=vec4(position*vec3(size),0.0)+pos;",
"gl_Position = pMatrix*pos;",
"}"
].join("");
frgShader=[
"uniform vec4 color;",
"void main(){",
"gl_FragColor=color;",
"}"
].join("");
var vertexShader=gl.createShader(gl.VERTEX_SHADER);
var fragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader, vtxShader);
gl.compileShader(vertexShader);
gl.shaderSource(fragmentShader,frgShader);
gl.compileShader(fragmentShader);
this.particleProgram = gl.createProgram();
gl.attachShader(this.particleProgram, vertexShader);
gl.attachShader(this.particleProgram, fragmentShader);
gl.linkProgram(this.particleProgram);
this.particleProgram.cameraMatrix=gl.getUniformLocation(this.particleProgram, "cameraMatrix");
this.particleProgram.pMatrix=gl.getUniformLocation(this.particleProgram, "pMatrix");
this.particleProgram.color=gl.getUniformLocation(this.particleProgram, "color");
this.particleProgram.size=gl.getUniformLocation(this.particleProgram, "size");
this.particleProgram.location=gl.getUniformLocation(this.particleProgram, "location");
this.particleProgram.position=gl.getAttribLocation(this.particleProgram, "position");
this.particleProgram.mvMatrixArray=new WebGLFloatArray(16);
this.particleProgram.pMatrixArray=new WebGLFloatArray(16);
this.particleProgram.webGLVertexBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, this.particleProgram.webGLVertexBuffer );
gl.bufferData( gl.ARRAY_BUFFER, new WebGLFloatArray(vertexArray), gl.STATIC_DRAW );
this.particleProgram.webGLFaceBuffer = gl.createBuffer();
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, this.particleProgram.webGLFaceBuffer );
gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(faceArray), gl.STATIC_DRAW );
this.particleProgram.faceNum=faceArray.length;
this.particleProgram.cameraMatrixArray=new WebGLFloatArray(16);
this.particleProgram.pMatrixArray=new WebGLFloatArray(16);
},
createProgram: function()
......@@ -46,7 +124,7 @@ var GLRenderer = Renderer.extend
"varying vec4 vcolor;",
"void main(){",
"vcolor=color;",
"gl_Position = pMatrix*vec4((mvMatrix*vec4(position,1.0)).xyz,1.0);",
"gl_Position = pMatrix*mvMatrix*vec4(position,1.0);",
"}"
].join("");
......@@ -61,10 +139,12 @@ var GLRenderer = Renderer.extend
var fragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader, vtxShader);
gl.compileShader(vertexShader);
gl.shaderSource(fragmentShader,frgShader);
gl.compileShader(fragmentShader);
this.program = gl.createProgram();
gl.attachShader(this.program, vertexShader);
gl.attachShader(this.program, fragmentShader);
......@@ -103,8 +183,7 @@ var GLRenderer = Renderer.extend
{
var gl=this.gl;
var vertexArray,colorArray,faceArray;
gl.viewport(0,0,this.width,this.height);
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
for (var i = 0; i < scene.objects.length; i++)
......@@ -113,12 +192,12 @@ var GLRenderer = Renderer.extend
if (object instanceof Mesh)
{
// Very inefficient but easiest way initially
var vertexArray = [];
var faceArray = [];
var colorArray = [];
var vertexIndex = 0;
var color;
var vIndex, cIndex, findex;
for (j = 0; j < object.geometry.faces.length; j++)
{
......@@ -133,7 +212,6 @@ var GLRenderer = Renderer.extend
}
if (face instanceof Face3)
{
//vertexArray[vindex++];
vertexArray.push( face.a.x, face.a.y, face.a.z );
vertexArray.push( face.b.x, face.b.y, face.b.z );
vertexArray.push( face.c.x, face.c.y, face.c.z );
......@@ -159,11 +237,11 @@ var GLRenderer = Renderer.extend
}
}
var vertexArray = new WebGLFloatArray(vertexArray);
var colorArray = new WebGLFloatArray(colorArray);
var faceArray = new WebGLUnsignedShortArray(faceArray);
vertexArray = new WebGLFloatArray(vertexArray);
colorArray = new WebGLFloatArray(colorArray);
faceArray = new WebGLUnsignedShortArray(faceArray);
if (!object.WebGLVertexBuffer) object.WebGLVertexBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, object.WebGLVertexBuffer );
gl.bufferData( gl.ARRAY_BUFFER, vertexArray, gl.DYNAMIC_DRAW );
......@@ -175,15 +253,14 @@ var GLRenderer = Renderer.extend
if(!object.WebGLFaceBuffer) object.WebGLFaceBuffer = gl.createBuffer();
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, object.WebGLFaceBuffer );
gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, faceArray, gl.DYNAMIC_DRAW );
gl.useProgram(this.program);
this.matrix.multiply( camera.matrix, object.matrix );
this.matrix2Array( this.matrix, this.program.mvMatrixArray );
this.matrix2Array( camera.projectionMatrix, this.program.pMatrixArray );
//alert([this.program.mvMatrixArray[0],this.program.mvMatrixArray[1],this.program.mvMatrixArray[2],this.program.mvMatrixArray[3],this.program.mvMatrixArray[4],this.program.mvMatrixArray[5],this.program.mvMatrixArray[6],this.program.mvMatrixArray[7],this.program.mvMatrixArray[8],this.program.mvMatrixArray[9],this.program.mvMatrixArray[10],this.program.mvMatrixArray[11],this.program.mvMatrixArray[12],this.program.mvMatrixArray[13],this.program.mvMatrixArray[14],this.program.mvMatrixArray[15]]);
gl.uniformMatrix4fv(this.program.pMatrix, true, this.program.pMatrixArray);
gl.uniformMatrix4fv(this.program.mvMatrix, true, this.program.mvMatrixArray);
......@@ -201,7 +278,39 @@ var GLRenderer = Renderer.extend
gl.drawElements(gl.TRIANGLES,faceArray.length, gl.UNSIGNED_SHORT, 0);
}
//TODO Particles!!
else if (object instanceof Particle)
{
var color
if (object.material instanceof ColorMaterial)
{
color=object.material.color;
}
else if (object.material instanceof FaceColorMaterial)
{
color = face.color;
}
gl.useProgram(this.particleProgram);
gl.bindBuffer(gl.ARRAY_BUFFER, this.particleProgram.webGLVertexBuffer);
gl.enableVertexAttribArray(this.particleProgram.position);
gl.vertexAttribPointer(this.particleProgram.position, 3, gl.FLOAT, false, 0, 0);
gl.uniform3f( this.particleProgram.location, object.position.x, object.position.y, object.position.z );
gl.uniform4f( this.particleProgram.color, color.r/255, color.g/255, color.b/255, color.a/255 );
gl.uniform1f( this.particleProgram.size, object.size);
this.matrix2Array( camera.matrix, this.particleProgram.cameraMatrixArray );
this.matrix2Array( camera.projectionMatrix, this.particleProgram.pMatrixArray );
gl.uniformMatrix4fv(this.particleProgram.pMatrix, true, this.particleProgram.pMatrixArray);
gl.uniformMatrix4fv(this.particleProgram.cameraMatrix, true, this.particleProgram.cameraMatrixArray);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.particleProgram.webGLFaceBuffer);
gl.drawElements(gl.TRIANGLES,this.particleProgram.faceNum, gl.UNSIGNED_SHORT, 0);
}
}
}
});
......
src/renderers/Renderer.js 100644 → 100755
浏览文件 @ 106c77b9
......@@ -32,7 +32,7 @@ var Renderer = Class.extend
sort: function(a, b)
{
return b.screen.z - a.screen.z;
return a.screen.z - b.screen.z;
},
render: function( scene, camera )
......@@ -40,18 +40,18 @@ var Renderer = Class.extend
var vertex, face, object;
var face3count = 0, face4count = 0;
var focuszoom = camera.focus * camera.zoom;
this.renderList = new Array();
for (var i = 0; i < scene.objects.length; i++)
{
object = scene.objects[i];
if (object instanceof Mesh)
{
this.matrix.multiply( camera.matrix, object.matrix );
// vertices
for (var j = 0; j < object.geometry.vertices.length; j++)
......@@ -61,13 +61,13 @@ var Renderer = Class.extend
vertex.screen.copy( vertex );
this.matrix.transform( vertex.screen );
camera.projectionMatrix.transform( vertex.screen );
vertex.visible = vertex.screen.z > 0 && object.screen.z < 1;
//convert to screen coords
vertex.screen.x *= this.widthHalf;
vertex.screen.y *= -this.heightHalf; // can't figure out why it's rendering upside down???
vertex.screen.z = focuszoom / (camera.focus + vertex.screen.z);
vertex.visible = vertex.screen.z > 0;
vertex.screen.x *= vertex.screen.z;
vertex.screen.y *= vertex.screen.z;
}
// faces
......@@ -75,7 +75,7 @@ var Renderer = Class.extend
for (j = 0; j < object.geometry.faces.length; j++)
{
face = object.geometry.faces[j];
// TODO: Use normals for culling
if (face instanceof Face3)
......@@ -85,7 +85,7 @@ var Renderer = Class.extend
(face.c.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0) )
{
face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z) * 0.3;
if (this.face3Pool[face3count] == null)
this.face3Pool[face3count] = new Face3(new Vertex(), new Vertex(), new Vertex());
......@@ -131,26 +131,22 @@ var Renderer = Class.extend
}
else if (object instanceof Particle)
{
object.screen=object.position.toVector4();
object.screen.copy(object.position);
camera.matrix.transform( object.screen );
camera.projectionMatrix.transform( object.screen );
var size=object.screen.x/object.screen.w-(object.screen.x+camera.projectionMatrix.n11)/(object.screen.w+camera.projectionMatrix.n14);
object.zsize=Math.abs(size)*object.size;
object.screen=object.screen.toVector3();
if (object.screen.z > 0 && object.screen.z < 1
&& object.screen.x+object.zsize > -1 && object.screen.x-object.zsize < 1
&& object.screen.y+object.zsize > -1 && object.screen.y-object.zsize < 1){
object.zsize *= this.widthHalf;
object.screen.x *= this.widthHalf;
object.screen.y *= this.heightHalf;
this.renderList.push( object );
}
object.screen.z = focuszoom / (camera.focus + object.screen.z);
if (object.screen.z < 0)
continue;
object.screen.x *= object.screen.z;
object.screen.y *= object.screen.z;
this.renderList.push( object );
}
}
this.renderList.sort(this.sort);
}
});
\ No newline at end of file
});
src/renderers/SVGRenderer.js
浏览文件 @ 106c77b9
......@@ -51,7 +51,7 @@ var SVGRenderer = Renderer.extend
svgNode = this.getCircleNode(circleCount++);
svgNode.setAttribute('cx', element.screen.x);
svgNode.setAttribute('cy', element.screen.y);
svgNode.setAttribute('r', element.zsize);
svgNode.setAttribute('r', element.size * element.screen.z);
}
if (element.material instanceof ColorMaterial)
......
utils/deployer.py
浏览文件 @ 106c77b9
import sys
import os
# MERGER
rev = 5;
# MERGER
rev = 4;
files = [];
files.append('Class.js');
files.append('core/Color.js');
files.append('core/Vector3.js');
files.append('core/Vector4.js');
files.append('core/Matrix4.js');
files.append('core/Vertex.js');
files.append('core/Face3.js');
......@@ -27,15 +26,14 @@ files.append('scenes/Scene.js');
files.append('renderers/Renderer.js');
files.append('renderers/CanvasRenderer.js');
files.append('renderers/SVGRenderer.js');
files.append('renderers/GLRenderer.js');
string = '';
for item in files:
src_file = open('../src/' + item,'r');
string += src_file.read() + "\n";
dep_file = open('temp.js','w');
string = '';
for item in files:
src_file = open('../src/' + item,'r');
string += src_file.read() + "\n";
dep_file = open('temp.js','w');
dep_file.write(string);
dep_file.close();
......@@ -50,9 +48,9 @@ os.system("java -jar yuicompressor-2.4.2.jar temp.js -o ../build/three.js --char
output = '../build/three.js';
string = "// three.js r" + str(rev) + " - http://github.com/mrdoob/three.js\n";
src_file = open(output,'r');
string += src_file.read();
src_file = open(output,'r');
string += src_file.read();
dep_file = open(output,'w');
dep_file = open(output,'w');
dep_file.write(string);
dep_file.close();
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或