-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathanimus.html
128 lines (117 loc) · 3.51 KB
/
animus.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
<!-- Copyright 2010 Robert Scott Dionne. All Rights Reserved. -->
<html>
<head>
<!--
<script type="application/javascript" src="animus.js"></script>
-->
<script type="application/javascript">
var srcs = [
'base.js',
'quaternion.js',
'vector.js',
'dualnumber.js',
'dualquaternion.js',
'dualvector.js',
'boxman.js',
'grid.js',
'app.js',
'program.js',
'renderer.js',
'shader.js',
'keys.js',
'animator.js',
'pose.js',
'skeleton.js',
'animus.js'
];
srcs.forEach(function(src) {
document.write(
'<script type="application/javascript" src="' +
src + '"></' + 'script>');
});
</script>
<script id="quatlib" type="x-shader/x-vertex">
vec3 rotate(vec4 q, vec3 v) {
vec3 r = q.xyz;
float a = q.w;
return v + cross(2.0 * r, cross(r, v) + a * v);
}
</script>
<script id="v0" type="x-shader/x-vertex">
// Per skeleton uniforms
uniform mat4 uProjection;
// Per limb uniforms
uniform vec4 uJointPalette[58];
// Per vertex attributes
attribute vec3 aPosition;
attribute vec3 aNormal;
attribute vec3 aColor;
attribute float aJoint;
// Per vertex varyings
varying vec3 vPosition;
varying vec3 vNormal;
varying vec3 vColor;
void getJoint(float i, out vec4 joint[2]) {
joint[0] = uJointPalette[2 * int(i)];
joint[1] = uJointPalette[2 * int(i) + 1];
}
void main() {
vec4 transformation[2];
getJoint(aJoint, transformation);
// Dual quaternion transformation code adapted from
// Geometric Skinning with Approximate Dual Quaternion Blending:
// http://isg.cs.tcd.ie/kavanl/papers/sdq-tog08.pdf
// See dqsFast():
// http://isg.cs.tcd.ie/kavanl/dq/dqs.cg
float length = length(transformation[0]);
vec4 transf[2];
transf[0] = transformation[0] / length;
transf[1] = transformation[1] / length;
vec3 pos = rotate(transf[0], aPosition * 50.);
vec3 transl = 2.0 * (transf[0].w * transf[1].xyz -
transf[1].w * transf[0].xyz + cross(transf[0].xyz, transf[1].xyz));
pos += transl;
vNormal = rotate(transf[0], aNormal);
vColor = aColor;
gl_Position = uProjection * vec4(pos, 1.0);
vPosition = pos;
}
</script>
<script id="f0" type="x-shader/x-fragment">
uniform lowp bool uLighting;
// Per fragment varyings
varying highp vec3 vPosition;
varying highp vec3 vNormal;
varying lowp vec3 vColor;
const highp vec3 LIGHT_POSITION = vec3(0., 0., 0.);
const highp float AMBIENT = 0.25;
void main() {
highp vec3 light = LIGHT_POSITION - vPosition;
highp float dot = dot(normalize(light), vNormal);
highp float diffuse = uLighting ? max(dot, AMBIENT) : 1.;
gl_FragColor = vec4(diffuse * vColor, 1.);
}
</script>
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.float {
position: absolute;
top: 0px;
}
</style>
</head>
<body>
<div style="float: left;">
<canvas id="c0"></canvas>
</div>
<div class="float">
<p><b>ms/frame</b> = <span id="stats"></span></p>
<p><b>t</b> = <span id="t"></span></p>
</div>
</body>
</html>