WebGl 多缓冲区传递颜色和坐标（矩形）
程序员文章站
2022-12-23 12:08:17
效果： 代码： ......
效果：
代码：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>webgl 多缓冲区传递颜色和坐标（矩形）</title>
6 </head>
7 <body>
8
9 <canvas id="mycanvas" width="500" height="300" style='border:1px solid red'></canvas>
10
11 </body>
12
13 <script>
14
15 window.onload = function () {
16
17 //获取上下文
18 var canvas = document.getelementbyid('mycanvas');
19 var gl = canvas.getcontext('webgl');
20
21 //定义矩形数据 并 将其储存在缓存对象
22 var vertices = [
23 -0.5,0.5,0.0,
24 -0.5,-0.5,0.0,
25 0.5,-0.5,0.0,
26 0.5,0.5,0.0
27 ];
28 var colors = [
29 0,0,1,
30 1,0,0,
31 0,1,0,
32 1,0,1,
33 ];
34 var indices = [3,2,1,3,1,0];
35
36 var vertex_buffer = gl.createbuffer();
37 gl.bindbuffer(gl.array_buffer,vertex_buffer);
38 gl.bufferdata(gl.array_buffer, new float32array(vertices), gl.static_draw);
39
40 var index_buffer = gl.createbuffer();
41 gl.bindbuffer(gl.element_array_buffer,index_buffer);//注意 是 element_array_buffer 不是 array_buffer
42 gl.bufferdata(gl.element_array_buffer, new uint16array(indices), gl.static_draw);
43
44 var color_buffer = gl.createbuffer ();
45 gl.bindbuffer(gl.array_buffer,color_buffer);
46 gl.bufferdata(gl.array_buffer, new float32array(colors), gl.static_draw);
47
48 //创建和编译着色器程序
49 var vertcode = 'attribute vec3 coordinates;'+
50 'attribute vec3 color;'+
51 'varying vec3 vcolor;'+
52
53 'void main(void) {' +
54 ' gl_position = vec4(coordinates, 1.0);' +
55 'vcolor = color;'+
56 '}';
57 var fragcode = 'precision mediump float;'+
58 'varying vec3 vcolor;'+
59 'void main(void) {'+
60 'gl_fragcolor = vec4(vcolor, 1.0);'+
61 '}';
62
63 var vertshader = gl.createshader(gl.vertex_shader);
64 gl.shadersource(vertshader, vertcode);
65 gl.compileshader(vertshader);
66
67 var fragshader = gl.createshader(gl.fragment_shader);
68 gl.shadersource(fragshader, fragcode);
69 gl.compileshader(fragshader);
70
71 var shaderprogram = gl.createprogram();
72 gl.attachshader(shaderprogram, vertshader);
73 gl.attachshader(shaderprogram, fragshader);
74 gl.linkprogram(shaderprogram);
75 gl.useprogram(shaderprogram);
76
77
78 //与缓冲区对象相关联着色器程序
79 gl.bindbuffer(gl.array_buffer,vertex_buffer);//这里要注意的是 现在存在多个缓冲区 取属性值得时候 一定先告诉从哪个缓冲区取值 否则默认是最后一个bindbuffer()指定的；
80 var coord = gl.getattriblocation(shaderprogram, "coordinates");
81 gl.vertexattribpointer(coord, 3, gl.float, false, 0, 0);
82 gl.enablevertexattribarray(coord);
83
84 gl.bindbuffer(gl.array_buffer,color_buffer);//这里要注意的是 现在存在多个缓冲区 取属性值得时候 一定先告诉从哪个缓冲区取值 否则默认是最后一个bindbuffer()指定的；
85 var color = gl.getattriblocation(shaderprogram, "color");
86 gl.vertexattribpointer(color, 3, gl.float, false,0,0) ;
87 gl.enablevertexattribarray(color);
88
89
90 //绘制所需的对象
91 gl.clearcolor(0.5, 0.5, 0.5, 0.9);
92 gl.enable(gl.depth_test);
93 gl.clear(gl.color_buffer_bit);
94 gl.viewport(0,0,canvas.width,canvas.height);
95 gl.drawelements(gl.triangles, indices.length, gl.unsigned_short,0);
96
97 }
98
99 </script>
100
101 </html>