home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-28 14:26:05 +10:00
Code Issues Packages Projects Releases Wiki Activity

webgl finally rendering

Browse Source
This commit is contained in:
Paul Brunt
2010-05-01 21:45:32 +08:00
committed by Mr.doob
parent 0e017c800d
commit 91023d3f8a
3 changed files with 60 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/Matrix4.js
+1 -1
View File
@@ -38,7 +38,7 @@ var Matrix4 = Class.extend
this.y.copy(this.x);
this.y.cross(this.z);
this.y.normalize();
//this.y.negate(); //
this.y.negate(); //
this.n11 = this.x.x;
this.n12 = this.x.y;
src/renderers/GLRenderer.js
+58 -38
View File
@@ -17,11 +17,23 @@ var GLRenderer = Renderer.extend
throw "cannot create webgl context";
}
this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
this.gl.clearDepth(1.0);
this.gl.enable(this.gl.DEPTH_TEST);
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.createProgram();
},
setSize: function( width, height )
{
this._super( width, height );
this.viewport.width = this.width;
this.viewport.height = this.height;
},
createProgram: function()
{
var gl=this.gl;
@@ -34,7 +46,7 @@ var GLRenderer = Renderer.extend
"varying vec4 vcolor;",
"void main(){",
"vcolor=color;",
"gl_Position = pMatrix*mvMatrix*vec4(position,1.0);",
"gl_Position = pMatrix*vec4((mvMatrix*vec4(position,1.0)).xyz,1.0);",
"}"
].join("");
@@ -71,33 +83,33 @@ var GLRenderer = Renderer.extend
{
array[0]=matrix.n11;
array[1]=matrix.n12;
array[3]=matrix.n13;
array[4]=matrix.n14;
array[5]=matrix.n21;
array[6]=matrix.n22;
array[7]=matrix.n23;
array[8]=matrix.n24;
array[9]=matrix.n31;
array[10]=matrix.n32;
array[11]=matrix.n33;
array[12]=matrix.n34;
array[13]=matrix.n41;
array[14]=matrix.n42;
array[15]=matrix.n43;
array[16]=matrix.n44;
array[2]=matrix.n13;
array[3]=matrix.n14;
array[4]=matrix.n21;
array[5]=matrix.n22;
array[6]=matrix.n23;
array[7]=matrix.n24;
array[8]=matrix.n31;
array[9]=matrix.n32;
array[10]=matrix.n33;
array[11]=matrix.n34;
array[12]=matrix.n41;
array[13]=matrix.n42;
array[14]=matrix.n43;
array[15]=matrix.n44;
},
render: function( scene, camera )
{
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++)
{
object = scene.objects[i];
if (object instanceof Mesh)
{
// Very inefficient but easiest way initially
@@ -106,42 +118,51 @@ var GLRenderer = Renderer.extend
var colorArray = [];
var vertexIndex = 0;
var color;
var vIndex, cIndex, findex;
for (j = 0; j < object.geometry.faces.length; j++)
{
face = object.geometry.faces[j];
color = face.color;
if (face instanceof Face3){
if (object.material instanceof ColorMaterial)
{
color=object.material.color;
}
else if (object.material instanceof FaceColorMaterial)
{
color = face.color;
}
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 );
colorArray.push( color.r, color.g, color.b, color.a );
colorArray.push( color.r, color.g, color.b, color.a );
colorArray.push( color.r, color.g, color.b, color.a );
colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
faceArray.push( vertexIndex, vertexIndex+1, vertexIndex+2 );
vertexIndex += 3;
}
else if (face instanceof Face4)
{
{
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 );
vertexArray.push( face.d.x, face.d.y, face.d.z );
colorArray.push( color.r, color.g, color.b, color.a );
colorArray.push( color.r, color.g, color.b, color.a );
colorArray.push( color.r, color.g, color.b, color.a );
colorArray.push( color.r, color.g, color.b, color.a );
colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
faceArray.push( vertexIndex, vertexIndex+1, vertexIndex+2 );
faceArray.push( vertexIndex, vertexIndex+3, vertexIndex+3 );
faceArray.push( vertexIndex, vertexIndex+2, vertexIndex+3 );
vertexIndex += 4;
}
}
var vertexArray = new WebGLFloatArray(vertexArray);
var colorArray = new WebGLFloatArray(colorArray);
var faceArray = new WebGLUnsignedShortArray(faceArray);
if (!object.WebGLVertexBuffer) object.WebGLVertexBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, object.WebGLVertexBuffer );
@@ -149,10 +170,9 @@ var GLRenderer = Renderer.extend
if (!object.WebGLColorBuffer) object.WebGLColorBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, object.WebGLColorBuffer );
gl.bufferData( gl.ARRAY_BUFFER, vertexArray, gl.DYNAMIC_DRAW );
gl.bufferData( gl.ARRAY_BUFFER, colorArray, gl.DYNAMIC_DRAW );
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 );
@@ -163,11 +183,11 @@ var GLRenderer = Renderer.extend
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);
for(var i=0; i<8; i++) gl.disableVertexAttribArray(i);
for(var n=0; n<8; n++) gl.disableVertexAttribArray(i);
gl.bindBuffer(gl.ARRAY_BUFFER, object.WebGLVertexBuffer);
gl.enableVertexAttribArray(this.program.position);
@@ -178,8 +198,8 @@ var GLRenderer = Renderer.extend
gl.vertexAttribPointer(this.program.color, 4, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.WebGLFaceBuffer);
alert(faceArray.length);
gl.drawElements(gl.TRIANGLES,faceArray.length, gl.UNSIGNED_SHORT, 0);
}
//TODO Particles!!
}
src/renderers/Renderer.js
+1 -1
View File
@@ -67,7 +67,7 @@ var Renderer = Class.extend
//convert to screen coords
vertex.screen.x *= this.widthHalf;
vertex.screen.y *= this.heightHalf;
vertex.screen.y *= -this.heightHalf; // can't figure out why it's rendering upside down???
}
// faces