How to draw lines
Draw lines using the gl.LINES drawing mode.
article
canvas
data
| Vertice | Index | x | y |
|---|---|---|---|
| 0 | 0 | 2 | 2 |
| 1 | 1 | 10 | 2 |
| 2 | 2 | 2 | 3.5 |
| 3 | 3 | 10 | 3.5 |
| 4 | 4 | 2 | 6 |
| 5 | 5 | 10 | 14 |
| 6 | 6 | 12 | 2 |
| 7 | 7 | 20 | 3 |
| 8 | 8 | 12 | 5 |
| 9 | 9 | 20 | 6.5 |
| 10 | 10 | 12 | 8 |
| 11 | 11 | 20 | 10 |
pixel
r
0
g
0
b
0
a
0
x
0
y
0
Fragment Shader
xxxxxxxxxx1
precision mediump float;2
3
uniform vec2 u_resolution;4
5
void main() {6
gl_FragColor = vec4(1., 0., 0.0, 1.0);7
}8
Vertex Shader
xxxxxxxxxx1
precision mediump float;2
3
attribute vec2 a_position;4
uniform vec2 u_resolution;5
6
void main() {7
vec2 pos = a_position / u_resolution * 2.0 - 1.0;8
gl_Position = vec4(pos.x, -pos.y, 0.0, 1.0);9
}10