-
Notifications
You must be signed in to change notification settings - Fork 0
/
vertexAnim.html
86 lines (72 loc) · 2.54 KB
/
vertexAnim.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
<html>
<head>
<meta charset="utf-8">
<title>Learn3D</title>
<link rel="stylesheet" href="public/webgl.css" type="text/css">
</head>
<script src="public/gl-matrix.js"></script>
<script src="vertexAnim.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 512px;
height: 512px;
background-color: rgb(238, 238, 238);
}
div#horizontal {
display: flex;
}
</style>
<body onload="main();" ondblclick="end();" onkeypress="onKeyPress(event)" >
<canvas id="glcanvas" width="512" height="512"></canvas>
<div id="horizontal">
<button style="display:block; margin:5; width: 200px; height: 30px" onclick="updateShader()">编译并运行下面着色程序</button>
<button style="display:block; margin:5; width: 60px; height: 30px" onclick="resume()">继续</button>
<button style="display:block; margin:5; width: 60px; height: 30px" onclick="pause()">暂停</button>
</div>
<div id="vertical">
<div id="horizontal" style="width: 90em;">
<div id="vertical">
<b>VertexShader</b>
<textarea spellcheck="false" rows="33" cols="95" id="id_vertex_shader">
attribute vec4 aPosition;
attribute vec2 aTexCoord;
uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;
uniform float uAngle;
uniform float uWidthSpan;
uniform float uHeightSpan;
varying vec2 vTexCoord;
#define PI 3.14159265359
void main() {
float angleSpanH = 4.0 * PI;
float startX = -uWidthSpan / 2.0;
float curAngleH = uAngle + ((aPosition.x - startX) / uWidthSpan) * angleSpanH;
float tzH = sin(curAngleH) * 0.2;
float angleSpanZ = 4.0 * PI;
float startY = -uHeightSpan / 2.0;
float curAngleZ = uAngle + PI / 3.0 + ((aPosition.y - startY) / uHeightSpan) * angleSpanZ;
float tzZ = sin(curAngleZ) * 0.1;
vec4 pntPos = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aPosition.x, aPosition.y, tzH, 1); // + tzZ
gl_Position = pntPos;
vTexCoord = aTexCoord;
}
</textarea>
</div>
<div id="vertical">
<b>FragmentShader</b>
<textarea spellcheck="false" rows="33" cols="95" id="id_fragment_shader">
precision mediump float;
uniform sampler2D uTexSampler;
varying vec2 vTexCoord;
void main() {
gl_FragColor = texture2D(uTexSampler, vTexCoord);
}
</textarea>
</div>
</div><br>
</div>
</body>
</html>