<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script id="shader-vs" type="x-shader/x-vertex"> precision lowp float; attribute vec3 v3Position; attribute vec4 inColor; varying vec4 outColor; void main(void) { outColor = inColor; gl_Position = vec4(v3Position, 1.0); } </script> <script id="shader-fs" type="x-shader/x-fragment"> precision lowp float; varying vec4 outColor; void main(void) { gl_FragColor = outColor; } </script> <script> var canvas = document.getElementById('canvas'); var webgl = canvas.getContext('webgl'); var v3PositionIndex = 0; var inColor = 1; //用来设置视口 webgl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight); webgl.clearColor(0.0, 0.0, 0.0, 1.0); webgl.clear(webgl.COLOR_BUFFER_BIT); //创建shader var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER); var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER); //指定shader数据 webgl.shaderSource(vertexShaderObject, document.getElementById("shader-vs").innerText); webgl.shaderSource(fragmentShaderObject, document.getElementById("shader-fs").innerText); //编译shader webgl.compileShader(vertexShaderObject); webgl.compileShader(fragmentShaderObject); if (!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)) { alert("error: vertexShaderObject"); } if (!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)) { alert("error: fragmentShaderObject"); } //创建program var programObject = webgl.createProgram(); //连接shader webgl.attachShader(programObject, vertexShaderObject); webgl.attachShader(programObject, fragmentShaderObject); //为v3Position赋值 webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position"); webgl.bindAttribLocation(programObject, inColor, "inColor"); webgl.linkProgram(programObject); if (!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)) { alert("error: programObject"); } webgl.useProgram(programObject); var jsArrayData = [// x, y, z, r, g, b, a -0.5, 0.5, 0.0, 1.0, 0.0, 0.0, 1.0, 0.5, 0.5, -0.0, 0.0, 1.0, 0.0, 1.0, 0.5, -0.5, 0.0, 0.0, 0.0, 1.0, 1.0, -0.5, -0.5, 0.0, 1.0, 1.0, 0.0, 1.0 ]; var indexDatas = [ 0, 1, 2, 0, 2, 3 ]; //创建缓冲区对象 var traingleBuffer = webgl.createBuffer(); //绑定缓冲区对象 webgl.bindBuffer(webgl.ARRAY_BUFFER, traingleBuffer); //顶点数组data数据传入缓冲区 webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW); var indexBuffer = webgl.createBuffer(); webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer); webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexDatas), webgl.STATIC_DRAW); webgl.enableVertexAttribArray(v3PositionIndex); webgl.enableVertexAttribArray(inColor); //缓冲区中的数据按照一定的规律传递给位置变量apos webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 4 * 7, 0); webgl.vertexAttribPointer(inColor, 4, webgl.FLOAT, false, 4 * 7, 12); webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0) </script> </body></html>