WebGl通过缓冲区绘制多个点

Posted 2021-01-29 yiluxiangbei

使用缓冲区对象向顶点着色器传入多个点

1. 创建缓冲区对象gl.createBuffer()

2. 绑定缓冲区对象gl.bindBuffer()

3. 将数据写入缓冲区对象gl.bufferData()

4. 将缓冲区对象分配给一个attribute对象gl.vertexAttribPointer()

5. 开启attribute变量 gl.enableVertexAttribArray()

 

 1  // 顶点着色器，设置坐标和设置尺寸。
 2         var VSHADER_SOURCE =
 3             `
 4     attribute vec4 a_Position;
 5     attribute float a_PointSize;
 6     void main(){
 7       gl_Position=a_Position;
 8       gl_PointSize=a_PointSize;
 9     }
10     `
11 
12         //片元着色器
13         var FSHADER_SOURCE =
14             `
15     void main(){
16         gl_FragColor=vec4(1.0,0.0,0.0,1.0);
17       }
18     `
19 
20         function main() {
21             var canvas = document.getElementById(‘webgl‘);
22             var gl = getWebGLContext(canvas);
23             if (!gl) {
24                 return;
25             }
26             //初始化着色器
27             if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
28                 return;
29             }
30 
31             //必须初始化着色器后， 获取attribute变量的存储位置 getAttribLocation(program,name);
32             var a_Position = gl.getAttribLocation(gl.program, ‘a_Position‘);
33 
34             // 获取大小的存储位置
35             var a_PointSize = gl.getAttribLocation(gl.program, ‘a_PointSize‘);
36 
37             if (a_Position < 0) {
38                 console.log(‘a_Position0‘);
39                 return;
40             }
41             // // 将顶点位置传输给attribute
42             // gl.vertexAttrib3f(a_Position,0.0,0.0,.0,0);
43 
44             gl.vertexAttrib1f(a_PointSize, 20.0);
45 
46             // 设置顶点位置，并返回数量
47             var n = initVertextBuffers(gl);
48             //设置背景色
49             gl.clearColor(0.0, 0.0, 0.0, 1.0);
50             // 清空canvas
51             gl.clear(gl.COLOR_BUFFER_BIT);
52 
53             // 绘制一个点 从第一个顶点绘制3个点
54             gl.drawArrays(gl.POINTS, 0, n);
55 
56         }
57         main();
58 
59         function initVertextBuffers(gl) {
60             // Float32Array 类型化数组执行起来效率更快。 webGL类型化数组与普通数组不同，不支持pop，push方法。
61             var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
62             var n = 3;//点的个数
63             //创建缓冲区对象
64             var vertexBuffer = gl.createBuffer();
65             if (!vertexBuffer) {
66                 console.log(‘Failed to create the buffer object‘);
67                 return -1;
68             }
69 
70             // 将缓冲区对象绑定到目标
71             gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
72             // 向缓冲区写入数据(只能写在目标)
73             gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
74             var a_Position = gl.getAttribLocation(gl.program, ‘a_Position‘);
75 
76             // 将缓冲区对象分配给a_Position变量
77             gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
78 
79             // 连接a_Position变量与分配给它的缓冲区对象
80             gl.enableVertexAttribArray(a_Position);
81             return n;
82         }

View Code