WebGL入门（一）绘制一个点

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./glMatrix.min.js"></script>
</head>
<body><canvas id="webglCanvas" width="500" height="500"></canvas><script>var webgl // 全局声明webglvar projMat4 // 全局声明投影矩阵var projMat4 = mat4.create() // 创建一个4*4的矩阵var vertexString = `attribute vec4 a_Position;uniform mat4 proj;void main() {gl_Position = proj * a_Position;gl_PointSize = 60.0;}` // 顶点着色器字符串var fragmentString = `precision mediump float;void main() {gl_FragColor = vec4(0, 1.0, 1.0, 1.0);}` // 片元着色器字符串// 入口初始化函数function init(){initWebgl()initShader()// 初始化着色器initBuffer()// 数据缓冲区draw()// 绘制}// webgl初始化function initWebgl(){let webglDiv = document.getElementById('webglCanvas')webgl = webglDiv.getContext('webgl')webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.height) // 设置视口,四个参数分别是x,y,width,height mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1, 1, projMat4) // 设置正交投影矩阵    }// 初始化着色器,shader初始化函数function initShader(){let vertexShader = webgl.createShader(webgl.VERTEX_SHADER) // 创建顶点着色器let fragmentShader = webgl.createShader(webgl.FRAGMENT_SHADER) // 创建片元着色器webgl.shaderSource(vertexShader, vertexString) // 顶点着色器绑定字符串webgl.shaderSource(fragmentShader, fragmentString) // 片元着色器绑定字符串webgl.compileShader(vertexShader) // 编译顶点着色器webgl.compileShader(fragmentShader) // 编译片元着色器let program = webgl.createProgram() // 创建着色器程序webgl.attachShader(program, vertexShader) // 顶点着色器绑定到着色器程序webgl.attachShader(program, fragmentShader) // 片元着色器绑定到着色器程序webgl.linkProgram(program) // 链接着色器程序webgl.useProgram(program) // 使用着色器程序webgl.program = program // 将着色器程序绑定到webgl上}// 数据缓冲区初始化函数function initBuffer(){let pointPosition = new Float32Array([100.0, 100.0, 0.0, 1.0]) // 创建一个点的位置let aPosition = webgl.getAttribLocation(webgl.program, 'a_Position') // 获取顶点着色器中的a_Position变量let buffer = webgl.createBuffer() // 创建缓冲区对象webgl.bindBuffer(webgl.ARRAY_BUFFER, buffer) // 绑定缓冲区对象webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW) // 上传数据到缓冲区webgl.vertexAttribPointer(aPosition, 4, webgl.FLOAT, false, 0, 0) // 将缓冲区数据绑定到a_Positionwebgl.enableVertexAttribArray(aPosition) // 启用顶点属性数组let uniforproj = webgl.getUniformLocation(webgl.program, 'proj') // 获取顶点着色器中的proj变量webgl.uniformMatrix4fv(uniforproj, false, projMat4) // 将投影矩阵传入顶点着色器,三个参数分别是变量,是否转置,矩阵}// 绘制函数function draw(){webgl.clearColor(0.0, 0.0, 0.0, 1.0) // 设置清空颜色webgl.clear(webgl.COLOR_BUFFER_BIT) // 清空颜色缓冲区webgl.drawArrays(webgl.POINTS, 0, 1) // 绘制点,三个参数分别是绘制类型,起始位置,顶点数量}init()</script>
</body>
</html>