How to render a cube
Render a rotating cube using 12 vertices.
article
canvas
data
| Vertice | Index | x | y |
|---|---|---|---|
| 0 | 0 | 8 | 8 |
| 1 | 1 | 0 | 56 |
| 2 | 2 | 8 | 0 |
| 3 | 3 | 8 | 56 |
| 4 | 4 | 0 | 56 |
| 5 | 5 | 8 | 0 |
| 6 | 6 | 8 | 56 |
| 7 | 7 | 0 | 56 |
| 8 | 8 | 56 | 0 |
pixel
r
0
g
0
b
0
a
0
x
0
y
0
Fragment Shader
precision mediump float;uniform vec2 u_resolution;void main() { vec2 uv = gl_FragCoord.xy / u_resolution.xy; gl_FragColor = vec4(uv.x, uv.y, 0.7, 1.0);}Vertex Shader
precision mediump float;attribute vec2 a_position;uniform vec2 u_resolution;void main() { vec2 pos = a_position / u_resolution * 2.0 - 1.0; gl_Position = vec4(pos.x, -pos.y, 0.0, 1.0);}