@@ -167,9 +167,9 @@ $(document).ready(function(){ normArray.push(n[2]); // Set some colors - colorArray.push(0.2); // R - colorArray.push(0.4); // G - colorArray.push(0.7); // B + colorArray.push(1.0); // R + colorArray.push(0.0); // G + colorArray.push(0.0); // B colorArray.push(1); // A } @@ -180,26 +180,68 @@ $(document).ready(function(){ buffers.color = gl.createBuffer(gl.STATIC_DRAW, 4, gl.FLOAT, colorArray); // Apply the buffers to OpenGL - gl.enable(gl.CULL_FACE); - gl.frontFace(gl.CCW); gl.vertexPointer(buffers.vertex); gl.normalPointer(buffers.normal); gl.colorPointer(buffers.color); // Flag OpenGL that we will be using buffers - gl.enableClientState(gl.VERTEX_ARRAY); - gl.enableClientState(gl.NORMAL_ARRAY); - gl.enableClientState(gl.COLOR_ARRAY); // Draw + //gl.drawArrays(gl.LINES, 0, 14); + gl.drawArrays(gl.TRIANGLE_STRIP, 0, 14); // Turn off Buffers - gl.disableClientState(gl.VERTEX_ARRAY); - gl.disableClientState(gl.NORMAL_ARRAY); - gl.disableClientState(gl.COLOR_ARRAY); } + planeObject = function(){ + this.vertices = [ + -1,-1,0, 1,-1,0, -1,1,0, + -1,1,0, 1,-1,0, 1,1,0, + + 1,-1,0, -1,-1,0, -1,1,0, + 1,-1,0, -1,1,0, 1,1,0, + ]; + this.texcoords = [ + 0,1, 1,1, 0,0, + 0,0, 1,1, 1,0, + 0,1, 1,1, 1,0, + 0,1, 1,0, 0,0, + ]; + this.normals = [ + 0,0,1, 0,0,1, 0,0,1, + 0,0,1, 0,0,1, 0,0,1, + 0,0,-1, 0,0,-1, 0,0,-1, + 0,0,-1, 0,0,-1, 0,0,-1, + ]; + this.colors = [ + 1,0,1,1, 0,0,1,1, 1,0,1,1, + 1,0,1,1, 0,0,1,1, 1,0,1,1, + 1,0,1,1, 0,0,1,1, 1,0,1,1, + 1,0,1,1, 0,0,1,1, 1,0,1,1, + ]; + this.vertex_buffer = gl.createBuffer(gl.STATIC_DRAW, 3, gl.FLOAT, this.vertices); + this.texcoord_buffer = gl.createBuffer(gl.STATIC_DRAW, 2, gl.FLOAT, this.texcoords); + this.normal_buffer = gl.createBuffer(gl.STATIC_DRAW, 3, gl.FLOAT, this.normals); + this.color_buffer = gl.createBuffer(gl.STATIC_DRAW, 4, gl.FLOAT, this.colors); + + } + + var color = function(r, g, b, a){ + gl.material(gl.FRONT_AND_BACK, gl.AMBIENT, [r, g, b, a]); + } + + plane = new planeObject(); + var drawplane = function(){ + gl.vertexPointer(plane.vertex_buffer); + gl.texCoordPointer(plane.texcoord_buffer); + gl.normalPointer(plane.normal_buffer); + gl.colorPointer(plane.color_buffer); + // if we are doing wireframe mode + // gl.drawArrays(gl.LINES, 0, plane.vertices.length / 3); + + gl.drawArrays(gl.TRIANGLES, 0, plane.vertices.length / 3); + } setInterval(function() { if (document.getElementById('pause').checked) @@ -207,11 +249,12 @@ $(document).ready(function(){ // gl.clearColor(0.1, 0.1, 0.1, 1.0); - gl.clear(gl.COLOR_BUFFER_BIT | gl.GL_DEPTH_BUFFER_BIT); - + gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT); + // gl.enable(gl.DEPTH_TEST) // Set the camera in world space // camera.applyToWorld(gl, thisScn); - gl.loadIdentity(); + + gl.loadIdentity(); var pos = new Array(5.0, 0.0, -5.0); var dir = new Array(-5.0, 0.0, 5.0); var left = vectorCrossProduct(dir, new Array(0.0, 1.0, 0.0)); @@ -219,7 +262,9 @@ $(document).ready(function(){ gl.multMatrix(lookAt(pos, dir, up)); gl.translate(-pos[0], -pos[1], -pos[2]); - + gl.enableClientState(gl.VERTEX_ARRAY); + gl.enableClientState(gl.NORMAL_ARRAY); + gl.enableClientState(gl.COLOR_ARRAY); // Do Rendering if(everyframe){ everyframe(); @@ -227,6 +272,9 @@ $(document).ready(function(){ // Swap buffers to render gl.swapBuffers(); + gl.disableClientState(gl.VERTEX_ARRAY); + gl.disableClientState(gl.NORMAL_ARRAY); + gl.disableClientState(gl.COLOR_ARRAY); }, 30); @@ -237,10 +285,17 @@ $(document).ready(function(){ $("#run_code").click(function(){ eval($("#code").val()); }); + var t = 0; + everyframe = function(){ + gl.rotate(t, 0, 1, 0); + drawcube(); + gl.translate(-3, 0, 0); + drawcube(); + t++; + } + }); - var everyframe = function(){ - } window.addEventListener('load', function () { @@ -263,7 +318,6 @@ if (! window.loaded_first_script) <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="audioin.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#666666" /><embed src="audioin.swf" quality="high" bgcolor="#666666" width="550" height="138" name="audioin" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> - <textarea name="code" rows="8" cols="40" id='code' style='position:absolute;top:0;left:0;border:0;background:none;color:#fff;padding:10px;width:800px;height:600px;'></textarea> <p id='run_code'>run code</p> <form onsubmit="flush_buffer(); return false"> jsxus.html @@ -7,22 +7,60 @@ var startup = function(){ alert("Sorry, your browser does not have the moz-gles11 canvas extension"); canvas.parentNode.replaceChild(canvas.firstChild, canvas); }else{ + gl.matrixMode(gl.PROJECTION); gl.loadIdentity(); - gl.multMatrix(makePerspective(45, canvas.width / canvas.height, 0.1, 200)); - + gl.multMatrix(makePerspective(45, canvas.width / canvas.height, 0.1, 100)); + gl.matrixMode(gl.MODELVIEW); - gl.loadIdentity(); - - // Lighting + + gl.clearColor(0.4, 0.1, 0.1, 1); + + // gl.enable(gl.FOG); + // gl.fogParameter(gl.FOG_MODE, gl.LINEAR); + // gl.fogParameter(gl.FOG_START, 3.7); + // gl.fogParameter(gl.FOG_END, 4.5); + // gl.fogParameter(gl.FOG_COLOR, background); + + gl.enable(gl.DEPTH_TEST); + gl.cullFace(gl.BACK); + gl.enable(gl.CULL_FACE); + + gl.enable(gl.LIGHTING); - gl.light(gl.LIGHT0, gl.AMBIENT, [0.1, 0.1, 0.1, 1.0]); - gl.light(gl.LIGHT0, gl.DIFFUSE, [1.0, 1.0, 1.0, 1.0]); - gl.light(gl.LIGHT0, gl.SPECULAR, [1.0, 1.0, 1.0, 1.0]); - gl.light(gl.LIGHT0, gl.POSITION, [0.0, 270.0, 0.0, 1.0]); - gl.light(gl.LIGHT0, gl.SPOT_CUTOFF, 180); - gl.light(gl.LIGHT0, gl.SPOT_DIRECTION, [0.0, -1.0, 0.0, 1.0]); + gl.light(gl.LIGHT0, gl.AMBIENT, [1, 1, 1, 1]); + gl.light(gl.LIGHT0, gl.DIFFUSE, [1, 1, 1, 1]); + gl.light(gl.LIGHT0, gl.POSITION, [100, 0, 500, 0]); + gl.light(gl.LIGHT0, gl.SPECULAR, [1, 1, 1, 1]); + gl.material(gl.FRONT_AND_BACK, gl.SPECULAR, [4,4,4,1]); + gl.material(gl.FRONT_AND_BACK, gl.SHININESS, 32); gl.enable(gl.LIGHT0); - + gl.enableClientState(gl.NORMAL_ARRAY); + // + // + // + // + // + // gl.matrixMode(gl.PROJECTION); + // gl.multMatrix(makePerspective(45, canvas.width / canvas.height, 0.1, 100)); + // + // gl.matrixMode(gl.MODELVIEW); + // gl.loadIdentity(); + // gl.enable(gl.CULL_FACE); + // gl.frontFace(gl.CCW); + // gl.cullFace(gl.BACK); + // // gl.enable(gl.DEPTH_TEST); + // // gl.cullFace(gl.BACK); + // // gl.clearDepth(1.0) + // // Lighting + // gl.enable(gl.LIGHTING); + // gl.light(gl.LIGHT0, gl.AMBIENT, [0.1, 0.1, 0.1, 1.0]); + // gl.light(gl.LIGHT0, gl.DIFFUSE, [1.0, 1.0, 1.0, 1.0]); + // gl.light(gl.LIGHT0, gl.SPECULAR, [1.0, 1.0, 1.0, 1.0]); + // gl.light(gl.LIGHT0, gl.POSITION, [0.0, 270.0, 0.0, 1.0]); + // gl.light(gl.LIGHT0, gl.SPOT_CUTOFF, 180); + // gl.light(gl.LIGHT0, gl.SPOT_DIRECTION, [0.0, -1.0, 0.0, 1.0]); + // gl.enable(gl.LIGHT0); + } } startup.js 3015123df04d5cac245546add52a1595e4ede1a5 jonbroFERrealz jonbro5556@jonathan-brodskys-macbook-pro-15.local http://github.com/jonbro/jsaxus/commit/c9284d0400d51d6a5add79bb1ccdd0f93f783946 c9284d0400d51d6a5add79bb1ccdd0f93f783946 2008-07-14T19:37:05-07:00 2008-07-14T19:37:05-07:00 got this back to working. good gawd. color, depth tests, and the plane object are back in. 7682f186a2d6f83f2b3ea83a4f372c8f3908bdde jonbroFERrealz jonbro5556@jonathan-brodskys-macbook-pro-15.local