<!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"> attribute vec3 v3Position; void main(void) { gl_Position = vec4(v3Position, 1.0); } </script> <script id="shader-fs" type="x-shader/x-fragment"> void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } </script> <script> var canvas = document.getElementById('canvas'); var webgl = canvas.getContext('webgl'); var v3PositionIndex = 0; //用来设置视口 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.linkProgram(programObject); if (!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)) { alert("error: programObject"); } webgl.useProgram(programObject); var jsArrayData = [ 0.0, 0.5, 0.0, -0.5, -0.5, -0.0, 0.5, -1.0, 0.0 ]; //创建缓冲区对象 var traingleBuffer = webgl.createBuffer(); //绑定缓冲区对象 webgl.bindBuffer(webgl.ARRAY_BUFFER, traingleBuffer); //顶点数组data数据传入缓冲区 webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW); webgl.enableVertexAttribArray(v3PositionIndex); //缓冲区中的数据按照一定的规律传递给位置变量apos webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0); webgl.drawArrays(webgl.TRIANGLES, 0, 3); </script> </body></html>