<canvas style="border: red solid 3px;" id=‘webgl‘ width=‘500‘ height=‘500‘>不支持</canvas><script> ???//顶点着色器程序 ???var VSH = ???????‘attribute vec4 a_Position;\n‘ + ???????‘attribute float a_PointSize;\n‘ + ???????‘void main(){\n‘ + ???????????‘gl_Position = a_Position;\n‘ + //坐标 ???????????‘gl_PointSize = a_PointSize;\n‘ + //尺寸 ???????‘}\n‘; ???//片元着色器程序 ???var FSH = ???????‘void main(){\n‘ + ???????????‘gl_FragColor = vec4(1.0,0.5,0.9,1.0);\n‘ + //颜色 ???????‘}\n‘; ???var canvas = document.getElementById(‘webgl‘); ???var gl = getWebGLContext(canvas); ???initShaders(gl, VSH, FSH); //初始化着色器 ???var a_Position = gl.getAttribLocation(gl.program, ‘a_Position‘); //获取attribute -> a_Position变量的存储地址 ???gl.vertexAttrib3f(a_Position, 0.5, 0.0, 0.0); ???//将顶点的位置传给attribute变量 ???var a_PointSize = gl.getAttribLocation(gl.program, ‘a_PointSize‘); //获取attribute -> a_PointSize变量的存储地址 ???gl.vertexAttrib1f(a_PointSize, 150.0); ???//将顶点的位置传给attribute变量 ???gl.clearColor(0.0, 0.0, 1.0, 1.0); //指定背景色 ???gl.clear(gl.COLOR_BUFFER_BIT); //填充 ???gl.drawArrays(gl.POINTS, 0, 1); //绘制一个点 ???/* ???????因为绘制的是单独的点，所以是gl.POINTS ???????第二个参数为0，表示从第一个顶点画起 ???????第三个参数为1，表示在程序中只绘制了一个点 ???*/</script>WebGL通过getAttribLocation向顶点坐标器传递信息
原文地址：https://www.cnblogs.com/tongyuzhe/p/10452969.html