forked from arodic/jellyfish
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (136 loc) · 5.95 KB
/
index.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>WebGL - Jellyfish</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/lib/mjs.js"></script>
<script type="text/javascript" src="js/initWin.js"></script>
<script type="text/javascript" src="js/initUniforms.js"></script>
<script type="text/javascript" src="js/initTextures.js"></script>
<script type="text/javascript" src="js/initShaders.js"></script>
<script type="text/javascript" src="js/initBuffers.js"></script>
<script type="text/javascript" src="js/interact.js"></script>
<script type="text/javascript" src="js/debug.js"></script>
<script type="text/javascript" src="js/tick.js"></script>
<script type="text/javascript" src="js/simulator.js"></script>
<script type="text/javascript" src="js/drawJellyfish.js"></script>
<script type="text/javascript" src="js/drawScene.js"></script>
<style>
body {
font-family: 'Monda', sans-serif;
margin: 0;
overflow: hidden;
}
</style>
<script id="jellyfish-vs" type="x-shader/x-vertex">
precision highp float;
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec3 aVertexColor;
attribute vec3 aTextureCoord;
attribute vec4 aSkinWeight;
uniform mat4 uWorld;
uniform mat4 uViewInv;
uniform mat4 uWorldView;
uniform mat4 uWorldViewProj;
uniform mat4 uJoint0;
uniform mat4 uJoint1;
uniform mat4 uJoint2;
uniform mat4 uJoint3;
uniform mat4 uJoint0InvTranspose;
uniform float uCurrentJellyfishTime;
varying mediump vec4 vWorld;
varying mediump vec3 vTextureCoord;
varying mediump vec3 vDiffuse;
varying mediump vec3 vFresnel;
void main(void) {
//Vertex Animation
float dpi = 6.2831853;
float pi = 3.14159265;
float hpi = 1.570796325;
float time = mod(uCurrentJellyfishTime+aVertexPosition.y, dpi);
float offset = smoothstep(0.0,1.,max(0.,-aVertexPosition.y-0.8)/10.);
highp vec3 anim = (vec3(aVertexColor.x,aVertexColor.y,aVertexColor.z)/8.0*sin(time) * (1.-offset));
highp vec3 pos = aVertexPosition + anim;
//skinning
pos = vec3(uJoint0 * vec4(pos, 1.0))*aSkinWeight.x +
vec3(uJoint1 * vec4(pos, 1.0))*aSkinWeight.y +
vec3(uJoint2 * vec4(pos, 1.0))*aSkinWeight.z +
vec3(uJoint3 * vec4(pos, 1.0))*aSkinWeight.w;
vec3 nrm = vec3(uJoint0InvTranspose * vec4(aVertexNormal, 1.0));
//matrices
vWorld = uWorld * vec4(pos, 1.0);
highp vec4 WorldViewProj = uWorldViewProj * vec4(pos, 1.0);
//vertex normal
vec3 VertexNormal = normalize(nrm);
//vertex eye vector
vec3 WorldEyeVec = normalize(vWorld.xyz - uViewInv[3].xyz);
//diffuse
vec3 lightDir = vec3(0.0,1.0,0.0);
vec3 lightCol = vec3(0.6,0.4,0.1);
vec3 ambientCol = vec3(0.5,0.2,0.1);
float diffuseProduct = max(dot(normalize(VertexNormal.xyz), lightDir), 0.0);
vDiffuse = lightCol * vec3(diffuseProduct) + ambientCol;
//fresnel
vec3 fresnelColor = vec3(0.2,0.5,0.6);
float fresnelProduct = pow(1.0-max(abs(dot(VertexNormal, -WorldEyeVec)), 0.0), 2.0);
vFresnel = fresnelColor * vec3(fresnelProduct);
//texture coords
vTextureCoord = aTextureCoord;
gl_Position = WorldViewProj;
}
</script>
<script id="jellyfish-fs" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D uSampler0;
uniform sampler2D uSampler1;
uniform sampler2D uSampler2;
uniform float uCurrentTime;
varying vec4 vWorld;
varying vec3 vTextureCoord;
varying vec3 vDiffuse;
varying vec3 vFresnel;
void main(void) {
vec3 caustics = texture2D(uSampler1, vec2((vWorld.x)/48.+uCurrentTime/12., (vWorld.z-vWorld.y)/95.)).rgb;
vec4 colorMap = texture2D(uSampler0, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(((vDiffuse + caustics)*colorMap.rgb) + vFresnel, colorMap.a);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
webGLStart();
});
</script>
</head>
<body>
<div id="statusBar">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://akirodic.com/p/jellyfish/" data-text="Interact with beautiful jellyfish in your browser!" data-via="akirodic" data-hashtags="WebGL">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a href="https://twitter.com/akirodic" class="twitter-follow-button" data-show-count="false">Follow @akirodic</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="console">
<div class="console-field" id="debugJellyfish">
<b>jellyfish debug</b>
Frame rate: <span id="frameRate">NaN</span><br />
<span class="input-section">count</span>
<input type="text" class="textboxDebug" id="jCount" /><br />
<span class="input-section">size</span>
<input type="text" class="textboxDebug" id="jScale" />
<input type="text" class="textboxDebug" id="jScaleRandom" /><br />
<span class="input-section">Turbulence</span>
<input type="text" class="textboxDebug" id="jTurb" /><br />
<span class="input-section">speed</span>
<input type="text" class="textboxDebug" id="jSpeed" /><br />
</div>
</div>
<canvas id="webgl-canvas"></canvas>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68216254-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>