webgl 中 drawArrays 和drawElements

webgl 中 drawArrays 和drawElements

使用 drawArrays 绘制正方形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<body>
    <canvas id="canvas"></canvas>
    <script type="shader-source" id="vertexShader">
        //浮点数设置为中等精度
		precision mediump float;
		//接收 JavaScript 传递过来的点的坐标（X, Y）
		attribute vec2 a_Position;
		// 接收canvas的尺寸。
		attribute vec2 a_Screen_Size;
		attribute vec4 a_Color;
		varying vec4 v_Color;

		void main(){
			// 将 canvas 的坐标值 转换为 [-1.0, 1.0]的范围。
			vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
			// canvas的 Y 轴坐标方向和设备坐标系的相反。
			position = position * vec2(1.0, -1.0);
			// 最终的顶点坐标。
			gl_Position = vec4(position, 0.0, 1.0);
			// 将顶点颜色传递给片元着色器
			v_Color = a_Color;

		}
	</script>
    <script type="shader-source" id="fragmentShader">
        //浮点数设置为中等精度
		precision mediump float;
		//全局变量，用来接收 JavaScript传递过来的颜色。
		varying vec4 v_Color;

		void main(){
			// 将颜色处理成 GLSL 允许的范围[0， 1]。
			vec4 color = v_Color / vec4(255, 255, 255, 1);
			// 点的最终颜色。
			gl_FragColor = color;
		}
	</script>
    <script src="../utils/webgl-helper.js"></script>
    <script>
    //获取canvas
    let canvas = getCanvas('#canvas');
    //设置canvas尺寸为满屏
    resizeCanvas(canvas);
    //获取绘图上下文
    let gl = getContext(canvas);
    //创建着色器程序
    let program = createSimpleProgramFromScript(gl, 'vertexShader', 'fragmentShader');

    //使用该着色器程序
    gl.useProgram(program);

    // 随机生成一个颜色。
    let color = randomColor();
    // 找到着色器中的全局变量 u_Color;
    let u_Color = gl.getUniformLocation(program, 'u_Color');
    // 将随机颜色传递给给全局变量
    gl.uniform4f(u_Color, color.r, color.g, color.b, color.a);
    // 获取 canvas 尺寸。
    let a_Screen_Size = gl.getAttribLocation(program, 'a_Screen_Size');
    // 将 canvas 尺寸传递给顶点着色器。
    gl.vertexAttrib2f(a_Screen_Size, canvas.width, canvas.height);

    // 定义组成矩形的两个三角形，共计六个顶点，每个顶点包含2个坐标分量和4个颜色分量。
    let positions = [
    	//V0
    	30, 30, 255, 0, 0, 1,
    	//V1
    	30, 300, 0, 255, 0, 1, 
    	//V2
    	300, 300, 0, 255, 0, 1, 
    	//V0
    	30, 30, 255, 255, 0, 1,
    	//V2 
    	300, 300, 255, 255, 0, 1, 
    	//V3
    	300, 30, 0, 0, 255, 1
    ];

    let a_Position = gl.getAttribLocation(program, 'a_Position');
	let a_Color = gl.getAttribLocation(program, 'a_Color');

    gl.enableVertexAttribArray(a_Position);
	gl.enableVertexAttribArray(a_Color);
	// 创建缓冲区
    let buffer = gl.createBuffer();
    // 绑定缓冲区为当前缓冲
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // 设置 a_Position 属性从缓冲区读取数据方式
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 24, 0);
	// 设置 a_Color 属性从缓冲区读取数据方式
	gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 24, 8);
	// 向缓冲区传递数据
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
    //设置清屏颜色为黑色。
    gl.clearColor(0, 0, 0, 1);

    
    /*渲染*/
    function render(gl) {
        gl.clear(gl.COLOR_BUFFER_BIT);
        if (positions.length > 0) {
            gl.drawArrays(gl.TRIANGLES, 0, positions.length / 6);
        }
    }
    render(gl);
    </script>
</body>

image-20210925164844955

不知道大家有没有发现，我们在绘制一个矩形的时候，实际上只需要 V0, V1, V2, V3 四个顶点即可，可是我们却存储了六个顶点，每个顶点占据 4 * 6 = 24 个字节，绘制一个简单的矩形我们就浪费了 24 * 2 = 48 字节的空间，那真正的 WebGL 应用都是由成百上千个，甚至几十万、上百万个顶点组成，这个时候，重复的顶点信息所造成的内存浪费就不容小觑了。

那有没有其他的方式改进一下呢？

答案当然是肯定的，WebGL 除了提供 gl.drawArrays 按顶点绘制的方式以外，还提供了一种按照顶点索引进行绘制的方法：gl.drawElements，使用这种方式，可以避免重复定义顶点，进而节省存储空间

demo

gl.drawElements 绘制正方形

void gl.drawElements(mode, count, type, offset);

  • mode：指定绘制图元的类型，是画点，还是画线，或者是画三角形。
  • count：指定绘制图形的顶点个数。
  • type：指定索引缓冲区中的值的类型,常用的两个值：gl.UNSIGNED_BYTE和gl.UNSIGNED_SHORT，前者为无符号8位整数值，后者为无符号16位整数。
  • offset：指定索引数组中开始绘制的位置，以字节为单位。

在绘制矩形的时候，除了准备存储顶点信息的数组，还要准备存储顶点索引的数组。

1
2
3
4
5
6
7
8
9
10
11
12
//存储顶点信息的数组
var positions = [
    30, 30, 255, 0, 0, 1,    //V0
    30, 300, 255, 0, 0, 1,   //V1
    300, 300, 255, 0, 0, 1,  //V2
    300, 30, 0, 255, 0, 1    //V3
];
//存储顶点索引的数组
var indices = [
    0, 1, 2, //第一个三角形
    0, 2, 3  //第二个三角形
];

创建 buffer 存储顶点、颜色信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
   let a_Position = gl.getAttribLocation(program, 'a_Position');
let a_Color = gl.getAttribLocation(program, 'a_Color');

   gl.enableVertexAttribArray(a_Position);
gl.enableVertexAttribArray(a_Color);
// 创建缓冲区
   let buffer = gl.createBuffer();
   // 绑定缓冲区为当前缓冲
   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
   // 设置 a_Position 属性从缓冲区读取数据方式
   gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 24, 0);
// 设置 a_Color 属性从缓冲区读取数据方式
gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 24, 8);
// 向缓冲区传递数据
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

还需要创建一个buff，存储顶点索引

1
2
3
4
5
6
//创建索引缓冲区
let indicesBuffer = gl.createBuffer();
//绑定索引缓冲区
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
//向索引缓冲区传递索引数据
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

这里要和 ARRAY_BUFFER 区分开来，索引 buffer 的绑定点是gl.ELEMENT_ARRAY_BUFFER。

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<body>
    <canvas id="canvas"></canvas>
    <script type="shader-source" id="vertexShader">
        //浮点数设置为中等精度
		precision mediump float;
		//接收 JavaScript 传递过来的点的坐标（X, Y）
		attribute vec2 a_Position;
		// 接收canvas的尺寸。
		attribute vec2 a_Screen_Size;
		attribute vec4 a_Color;
		varying vec4 v_Color;

		void main(){
			// 将 canvas 的坐标值 转换为 [-1.0, 1.0]的范围。
			vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
			// canvas的 Y 轴坐标方向和设备坐标系的相反。
			position = position * vec2(1.0, -1.0);
			// 最终的顶点坐标。
			gl_Position = vec4(position, 0.0, 1.0);
			// 将顶点颜色传递给片元着色器
			v_Color = a_Color;

		}
	</script>
    <script type="shader-source" id="fragmentShader">
        //浮点数设置为中等精度
		precision mediump float;
		//全局变量，用来接收 JavaScript传递过来的颜色。
		varying vec4 v_Color;

		void main(){
			// 将颜色处理成 GLSL 允许的范围[0， 1]。
			vec4 color = v_Color / vec4(255, 255, 255, 1);
			// 点的最终颜色。
			gl_FragColor = color;
		}
	</script>
    <script src="../utils/webgl-helper.js"></script>
    <script>
    //获取canvas
    let canvas = getCanvas('#canvas');
    //设置canvas尺寸为满屏
    resizeCanvas(canvas);
    //获取绘图上下文
    let gl = getContext(canvas);
    //创建着色器程序
    let program = createSimpleProgramFromScript(gl, 'vertexShader', 'fragmentShader');

    //使用该着色器程序
    gl.useProgram(program);
    

    // 随机生成一个颜色。
    let color = randomColor();
    // 找到着色器中的全局变量 u_Color;
    let u_Color = gl.getUniformLocation(program, 'u_Color');
    // 将随机颜色传递给给全局变量
    gl.uniform4f(u_Color, color.r, color.g, color.b, color.a);
    // 获取 canvas 尺寸。
    let a_Screen_Size = gl.getAttribLocation(program, 'a_Screen_Size');
    // 将 canvas 尺寸传递给顶点着色器。
    gl.vertexAttrib2f(a_Screen_Size, canvas.width, canvas.height);

    // 定义组成矩形的两个三角形，共计六个顶点，每个顶点包含2个坐标分量和4个颜色分量。
    let positions = [
    	//V0
    	30, 30, 255, 0, 0, 1,
    	//V1
    	30, 300, 0, 255, 0, 1, 
    	//V2
    	300, 300, 0, 255, 0, 1, 
    	//V3
    	300, 30, 0, 0, 255, 1
    ];

    let a_Position = gl.getAttribLocation(program, 'a_Position');
	let a_Color = gl.getAttribLocation(program, 'a_Color');

    gl.enableVertexAttribArray(a_Position);
	gl.enableVertexAttribArray(a_Color);
	// 创建缓冲区
    let buffer = gl.createBuffer();
    // 绑定缓冲区为当前缓冲
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // 设置 a_Position 属性从缓冲区读取数据方式
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 24, 0);
	// 设置 a_Color 属性从缓冲区读取数据方式
	gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 24, 8);
	// 向缓冲区传递数据
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    //定义绘制索引数组
    let indices = [0, 1, 2, 0, 2, 3];
    //创建索引缓冲区
    let indicesBuffer = gl.createBuffer();
    //绑定索引缓冲区
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
    //向索引缓冲区传递索引数据
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

    //设置清屏颜色为黑色。
    gl.clearColor(0, 0, 0, 1);

    
    /*渲染*/
    function render(gl) {
        gl.clear(gl.COLOR_BUFFER_BIT);
        //利用索引方式进行绘制
        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
    }
    render(gl);
    </script>
</body>
webgl
webgl 中 drawArrays 和drawElements
http://example.com/2024/05/23/webgl/webgl 中 drawArrays 和drawElements/
Author
John Doe
Posted on
May 23, 2024
Licensed under