window.onload=webGLStart; 7 var gl; 8 function webGLStart() 9 { gl=initGL(canvas);square=createSquare(gl);matrix=initMatrices();shaderProgram=initShaders();draw(gl,square,matrix,shaderProgram);onLoad();} 20 function initGL(canvas){ 21 var gl; { gl.viewport(0,0,canvas.width,canvas.height); } 27 catch(e) 28 { 29 var msg="Error creating WebGL Context!: "+ e.toString(); } 32 return gl; 33 } 34 function createSquare(gl) 35 { gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer); 38 var verts = [ 39 1.0, 1.0, 0.0, 40 -1.0, 1.0, 0.0, 41 1.0, -1.0, 0.0, 42 -1.0, -1.0, 0.0 gl.bufferData(gl.ARRAY_BUFFER, square={buffer:vertexBuffer,vertSize:3,nVerts:4,primtype:gl.TRIANGLE_STRIP}; square; 47 } 48 function initMatrices() 49 { modelViewMatrix=new Float32Array( 52 [1,0,0,0, 53 0,1,0,0, 54 0,0,1,0, 55 0,0,-30.333,1] 56 ); projectionMatrix=new Float32Array([ 59 2.41421,0,0,0, 60 0,2.41421,0,0, 61 0,0,-1.002002,-1, 62 0,0,-0.2002002,0 63 ]); 64 var matrix={mvm:modelViewMatrix,pjm:projectionMatrix}; 65 return matrix; 66 } 67 function initShaders() 68 { 69 /*着色器（Shader）位于显卡上，分为顶点着色器和片元着色器两种，数量各以千记。 70 其中顶点着色器运行顶点着色器程序，负责对每个顶点的位置颜色信息的计算； 71 片元着色器运行片元着色器程序，负责对顶点之间的内容进行“插值”，得出每个像素的颜色； vertexShaderSource= 75 " attribute vec3 vertexPos;\n"+ 76 " uniform mat4 modelViewMatrix;\n"+ 77 " uniform mat4 projectionMatrix;\n"+ 78 " void main(void) {\n"+ 79 " //返回变换并投影后的顶点数据\n"+ 80 " gl_Position=projectionMatrix*modelViewMatrix*vec4(vertexPos,1.0);\n"+ 81 " }\n"; fragmentShaderSource= 84 " void main(void){\n"+ 85 " //返回像素颜色：永远输出白色\n"+ 86 " gl_FragColor=vec4(1.0,1.0,1.0,1.0);\n"+ 87 " }\n"; vertexShader=gl.createShader(gl.VERTEX_SHADER); 92 gl.shaderSource(vertexShader, vertexShaderSource); 93 gl.compileShader(vertexShader); 94 if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { 95 alert(gl.getShaderInfoLog(shader)); 96 } fragmentShader=gl.createShader(gl.FRAGMENT_SHADER); 99 gl.shaderSource(fragmentShader, fragmentShaderSource); 100 gl.compileShader(fragmentShader); 101 if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { 102 alert(gl.getShaderInfoLog(shader)); 103 } shaderProgram = gl.createProgram(); 107 gl.attachShader(shaderProgram, vertexShader); 108 gl.attachShader(shaderProgram, fragmentShader); 109 gl.linkProgram(shaderProgram); 110 gl.getProgramParameter(shaderProgram, gl.LINK_STATUS); shaderProgram;} { gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(shaderProgram);gl.enableVertexAttribArray(gl.getAttribLocation(shaderProgram, "vertexPos"));gl.vertexAttribPointer(gl.getAttribLocation(shaderProgram, "vertexPos"),obj.vertSize,gl.FLOAT,gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "projectionMatrix"),false,matrix.pjm); gl.drawArrays(obj.primtype,0,obj.nVerts);}

onLoad() 4 { 5 var container=document.getElementById("container"); scene=new THREE.Scene(); (webglAvailable()){ 11 var renderer=new THREE.WebGLRenderer(); 12 }else{ } container.appendChild(renderer.domElement); camera=new THREE.PerspectiveCamera(45,container.offsetWidth/container.offsetHeight,1,4000); scene.add(camera);geometry=mesh= scene.add(mesh); } 29 function webglAvailable() { 32 var canvas=document.createElement("canvas"); 33 return !!(window.WebGLRenderingContext 34 &&(canvas.getContext("webgl")||canvas.getContext("experimental-webgl")) 35 ); 36 }catch(e){ ; 38 } 39 }

webgl与three.js基础介绍