webgl 绘制多个点

在是使用 js 定点位的时候,需要建立一份顶点数据给着色器.让着色器根据这份顶点数据绘图

  • 建立顶点数据,两个浮点数据构成一个顶点,分别代表 x,y
const vertices=new Float32Array([
    //x    y
    0.0,  0.1, //顶点
    -0.1,-0.1, //顶点
    0.1, -0.1  //顶点
])

顶点数据存储在 js 缓冲里面的,着色器拿不到,所以我们需要建立一个着色器和一个公共区

  • 建立缓冲对象
const vertexBuffer=gl.createBuffer();

缓冲区是独立存在的,需要让缓冲器和着色器建立联系

gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
  • 往缓冲器写入数据
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
  • 把缓冲器对象分配给 attribute 对象
const a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
  • 开启顶点数据的批处理功能
gl.enableVertexAttribArray(a_Position);
  • 绘图
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 3);
  • 完整代码如下


    
        
        
    
    
    
        
    
    
    
    


你可能感兴趣的