webgl|webgl 绘制多个点 webgl绘制多个点

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

const vertices=new Float32Array([ //xy 0.0,0.1, //顶点 -0.1,-0.1, //顶点 0.1, -0.1//顶点 ])

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

const vertexBuffer=gl.createBuffer();

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

gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);

gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);

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);

- 锐客网#canvas { /* width: 100px; */ /* height: 100px; */ /* background: red; */ }

webgl|webgl 绘制多个点