/
LightedCube.html
135 lines (117 loc) · 5.27 KB
/
LightedCube.html
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="./lib/cuon-matrix.js"></script>
</head>
<body>
<canvas id="webgl" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('webgl')
const gl = canvas.getContext('webgl')
const VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute vec4 a_Normal;
uniform vec4 u_Color;
uniform mat4 u_MvpMatrix;
uniform vec3 u_LightColor;
uniform vec3 u_LightDirection;
varying vec4 v_Color;
void main() {
gl_Position = u_MvpMatrix * a_Position;
vec3 normal = normalize(a_Normal.xyz);
float nDotL = max(dot(u_LightDirection, normal), 0.0);
vec3 diffuse = u_LightColor * u_Color.rgb * nDotL;
v_Color = vec4(diffuse, u_Color.a);
}
`
const FSHADER_SOURCE = `
precision mediump float;
varying vec4 v_Color;
void main() {
gl_FragColor = v_Color;
}
`
const vshader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vshader, VSHADER_SOURCE)
gl.compileShader(vshader)
const fshader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fshader, FSHADER_SOURCE)
gl.compileShader(fshader)
const program = gl.createProgram()
gl.attachShader(program, vshader)
gl.attachShader(program,fshader)
gl.linkProgram(program)
gl.useProgram(program)
gl.enable(gl.DEPTH_TEST)
gl.clearColor(0, 0, 0, 1)
const vertices = new Float32Array([
1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0,-1.0, 1.0, 1.0,-1.0, 1.0, // v0-v1-v2-v3 front
1.0, 1.0, 1.0, 1.0,-1.0, 1.0, 1.0,-1.0,-1.0, 1.0, 1.0,-1.0, // v0-v3-v4-v5 right
1.0, 1.0, 1.0, 1.0, 1.0,-1.0, -1.0, 1.0,-1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
-1.0, 1.0, 1.0, -1.0, 1.0,-1.0, -1.0,-1.0,-1.0, -1.0,-1.0, 1.0, // v1-v6-v7-v2 left
-1.0,-1.0,-1.0, 1.0,-1.0,-1.0, 1.0,-1.0, 1.0, -1.0,-1.0, 1.0, // v7-v4-v3-v2 down
1.0,-1.0,-1.0, -1.0,-1.0,-1.0, -1.0, 1.0,-1.0, 1.0, 1.0,-1.0 // v4-v7-v6-v5 back
])
const colors = new Float32Array([
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v1-v2-v3 front
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v3-v4-v5 right
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v5-v6-v1 up
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v1-v6-v7-v2 left
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v7-v4-v3-v2 down
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0 // v4-v7-v6-v5 back
])
const normals = new Float32Array([
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 up
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, // v7-v4-v3-v2 down
0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0 // v4-v7-v6-v5 back
])
const indices = new Uint8Array([
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // right
8, 9,10, 8,10,11, // up
12,13,14, 12,14,15, // left
16,17,18, 16,18,19, // down
20,21,22, 20,22,23 // back
])
const a_Position = gl.getAttribLocation(program, 'a_Position')
const vertexBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0)
gl.enableVertexAttribArray(a_Position)
// const a_Color = gl.getAttribLocation(program, 'a_Color')
// const colorBuffer = gl.createBuffer()
// gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer)
// gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW)
// gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 0, 0)
// gl.enableVertexAttribArray(a_Color)
const u_Color = gl.getUniformLocation(program, 'u_Color')
gl.uniform4f(u_Color, 1, 0, 0, 1)
const a_Normal = gl.getAttribLocation(program, 'a_Normal')
const normalBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer)
gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW)
gl.vertexAttribPointer(a_Normal, 3, gl.FLOAT, false, 0, 0)
gl.enableVertexAttribArray(a_Normal)
const u_MvpMatrix = gl.getUniformLocation(program, 'u_MvpMatrix')
const mvpMatrix = new Matrix4()
mvpMatrix.setPerspective(30, 1, 1, 100).lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0)
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements)
const u_LightColor = gl.getUniformLocation(program, 'u_LightColor')
gl.uniform3f(u_LightColor, 1, 1, 1)
const u_LightDirection = gl.getUniformLocation(program, 'u_LightDirection')
const lightDirection = new Vector3([0.5, 3, 4])
lightDirection.normalize()
gl.uniform3fv(u_LightDirection, lightDirection.elements)
const indexBuffer = gl.createBuffer()
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0)
</script>
</body>
</html>