webgl|webgl 纹理 webgl纹理

【webgl|webgl 纹理】对于绘制多个点，并且多个点的颜色需要不一样。单个attribute是不能够完成的，这时候需要多个attribute来实现

多个attribute，需要多个buffer来共享数据。比如颜色数据批量传递给着色器

//颜色数据 const colors = new Float32Array([ 1, 0, 0, 0, 1, 0, 0, 0, 1, ]); //缓冲对象 const colorBuffer = gl.createBuffer(); //绑定缓冲对象 gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); //写入数据 gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW) //获取attribute 变量 const a_Color = gl.getAttribLocation(gl.program, 'a_Color') //修改attribute 变量 gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 0, 0) //赋能-批处理 gl.enableVertexAttribArray(a_Color)

按照上面的方式可以绘制不同颜色的点
attribute数据合一上面这个绘制方式会导致很多的重复代码，不利于代码的维护。我们可以把多个attribute统一。在统一之前需要明白下面的概念