From 91023d3f8ae372b03155c5d160a00c24c45f5b82 Mon Sep 17 00:00:00 2001 From: Paul Brunt Date: Sat, 1 May 2010 18:35:38 +0800 Subject: [PATCH] webgl finally rendering --- src/core/Matrix4.js | 2 +- src/renderers/GLRenderer.js | 96 ++++++++++++++++++++++--------------- src/renderers/Renderer.js | 2 +- 3 files changed, 60 insertions(+), 40 deletions(-) diff --git a/src/core/Matrix4.js b/src/core/Matrix4.js index 91f549d1..e7eb1e85 100644 --- a/src/core/Matrix4.js +++ b/src/core/Matrix4.js @@ -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; diff --git a/src/renderers/GLRenderer.js b/src/renderers/GLRenderer.js index dc9cb353..c0c24e37 100644 --- a/src/renderers/GLRenderer.js +++ b/src/renderers/GLRenderer.js @@ -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!! } diff --git a/src/renderers/Renderer.js b/src/renderers/Renderer.js index b7800617..e293cd5e 100644 --- a/src/renderers/Renderer.js +++ b/src/renderers/Renderer.js @@ -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