-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdeer.html
122 lines (87 loc) · 3.6 KB
/
deer.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
<!DOCTYPE html>
<html>
<head>
<title>Deer</title>
<meta charset="utf-8">
<style>
* { padding: 0; margin: 0; box-sizing: border-box; }
body { background-color: #000000; }
#renderer {
width: 100%; height: 100%;
position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
border: 5px solid black;
border-radius: 7px;
background-color: #ffffff;
}
</style>
</head>
<body>
<canvas id="renderer"></canvas>
<script src="lib/gl-matrix.js"></script>
<script src="lib/gl-matrix-extension.js"></script>
<script src="lib/dx.js"></script>
<script src="lib/firstPersonContext.js"></script>
<script src="lib/stdShader.js"></script>
<script src="lib/shape.js"></script>
<script src="lib/parseWavObj.js"></script>
<script>(async () => {
// init
const canvas = document.getElementById("renderer");
const gl = canvas.getContext("webgl");
const dx = DX(gl);
const ac = AnimationContext(gl, {keyboardView: true, mouseView: true});
stdShader.init(dx);
Shape.init(dx);
// shape
const red = dx.Texture([[255, 0, 0, 255]], 1, 1);
const green = dx.Texture([[0, 255, 0, 255]], 1, 1);
const blue = dx.Texture([[0, 0, 255, 255]], 1, 1);
const raw = await (await fetch("shapes/deer.obj")).text();
const deerShape = Shape.Triangles(parseWavObj(raw));
const redDeer = Object.assign({}, deerShape, {texture: red});
const greenDeer = Object.assign({}, deerShape, {texture: green});
const blueDeer = Object.assign({}, deerShape, {texture: blue});
// drawing
const deg = Math.PI / 180;
const {viewMatrix, perspectiveMatrix, projectionMatrix} = ac;
var objMat = mat4.create();
const lightMatrix = mat4.create();
mat4.apply(lightMatrix, lightMatrix, mat4.rotateY, -45*deg);
mat4.apply(lightMatrix, lightMatrix, mat4.rotateX, 45*deg);
const pjMat = mat4.create();
const lMat = mat4.create();
function draw(shape) {
mat4.multiply(pjMat, projectionMatrix, objMat);
mat4.multiply(lMat, lightMatrix, mat4.getRotationMatrix(lMat, objMat));
dx.draw(shape, stdShader, {projectionMatrix: pjMat, lightMatrix: lMat});
}
var angle = 0;
const rate = 10 / 1000; // deg/ms
ac.setRender(function (deltaAnimationTime) {
angle += deltaAnimationTime * rate;
if (angle > 360) angle -= 360;
dx.clear();
mat4.fromScaling(objMat, [1.0, 1.0, 1.0]);
mat4.apply(objMat, objMat, mat4.rotateY, -110*deg);
mat4.apply(objMat, objMat, mat4.translate, [-400, 0, 0]);
mat4.apply(objMat, objMat, mat4.rotateY, angle*deg);
draw(redDeer);
mat4.fromScaling(objMat, [0.5, 0.5, 0.5]);
mat4.apply(objMat, objMat, mat4.rotateY, -90*deg);
mat4.apply(objMat, objMat, mat4.translate, [0, 0, 400]);
mat4.apply(objMat, objMat, mat4.rotateY, angle*deg);
draw(blueDeer);
mat4.fromScaling(objMat, [0.75, 0.75, 0.75]);
mat4.apply(objMat, objMat, mat4.rotateY, -70*deg);
mat4.apply(objMat, objMat, mat4.translate, [300, 0, 0]);
mat4.apply(objMat, objMat, mat4.rotateY, angle*deg);
draw(greenDeer);
});
ac.translate([0, -1500, -3000]);
ac.tilt(9);
ac.updateProjection();
ac.startAnimation();
})().catch(e => console.log(e));
</script>
</body>
</html>