我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址 ：空
在上一章节中我们使用的是2个buffer，向着色器中传递数据，本章节中我们学习使用一个buffer传递数据。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><canvas id='canvas'></canvas><script>let canvas = document.getElementById('canvas');let gl = canvas.getContext('webgl');//顶点着色器let vertexShaderSource = `attribute vec2 a_Position;attribute float a_PointSize;void main(){gl_Position = vec4(a_Position,0.0,1.0) ;gl_PointSize = a_PointSize;}`//片元着色器let fragmentShaderSouce = `precision mediump float;void main(){gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`// 创建顶点着色器let vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, vertexShaderSource)gl.compileShader(vertexShader)//创建片元着色器let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader, fragmentShaderSouce)gl.compileShader(fragmentShader)//创建渲染程序let program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);//使用当前渲染程序gl.useProgram(program)//检查片元着色器的是否正确if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {throw gl.getProgramInfoLog(program);}//三角形的坐标let positonArray = new Float32Array([0.5, 0.5, 10.0,-0.5, -0.5, 20.0,0.5, -0.5, 30.0,-0.5, 0.5, 40.0])//每个坐标点但的大小let sizeArray = new Float32Array([10.0, 20.0, 30.0, 40.0])let size = sizeArray.BYTES_PER_ELEMENT//位置坐标变量let a_Position = gl.getAttribLocation(program, 'a_Position');//点的大小let a_PointSize = gl.getAttribLocation(program, 'a_PointSize')//创建坐标的bufferlet buffer = gl.createBuffer();//绑定buffergl.bindBuffer(gl.ARRAY_BUFFER, buffer)//将三角形的坐标数据放入缓冲区gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW)// a_Position 赋值gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, size*3, 0);// 使能顶点位置gl.enableVertexAttribArray(a_Position);//创建顶点大小的bufferlet pointSizeBuffer = gl.createBuffer();//绑定buffergl.bindBuffer(gl.ARRAY_BUFFER, pointSizeBuffer);// 将点的大小数据放入缓冲区gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW);// a_PointSize 赋值gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, size*3, size*2)// 使能顶点大小gl.enableVertexAttribArray(a_PointSize);//绘制gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);//绘制点 从第0个开始，绘制4次gl.drawArrays(gl.POINTS, 0, 4)</script>
</body></html>
