webgl-3d-animation
Version:
Interactive 3D animation using WebGL showing a 2D predator prey ecology on a grid which is real-time mapped onto the surface of a 3D torus. node.js server side gives access to WAV format files which are rendered using Web Audio API
173 lines (132 loc) • 6.09 kB
HTML
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Chrysaora - WebGL</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>
<script id="jellyfish-vs" type="x-shader/x-vertex">
precision mediump 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 float uCurrentTime;
uniform mat4 uJoint0;
uniform mat4 uJoint1;
uniform mat4 uJoint2;
uniform mat4 uJoint3;
uniform mat4 uJoint0InvTranspose;
uniform float uCurrentJellyfishTime;
varying vec4 vWorld;
varying vec3 vTextureCoord;
varying vec3 vDiffuse;
varying 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://aleksandarrodic.com/p/jellyfish/" data-text="Interact with beautiful jellyfish in your browser!" data-via="xyz_ak" 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/xyz_ak" class="twitter-follow-button" data-show-count="false">Follow @xyz_ak</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 type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-258449-15']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>