<html>
<head>
<title>Bouncing Cows!</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
.controls {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
}
.controls button {
width: 100%;
height: 50px;
-moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
-webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
box-shadow:inset 0px 1px 0px 0px #7a8eb9;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad), color-stop(1, #5972a7));
background:-moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-o-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad', endColorstr='#5972a7',GradientType=0);
background-color:#637aad;
border:1px solid #314179;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
font-weight:bold;
padding:6px 12px;
text-decoration:none;
}
.controls button:active {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7), color-stop(1, #637aad));
background:-moz-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-o-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-ms-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5972a7', endColorstr='#637aad',GradientType=0);
background-color:#5972a7;
}
</style>
</head>
<body>
<script id="trampolineFragShader" type="x-shader/x-fragment">
varying vec3 vColor;
varying float intens;
const float thresh = 0.05;
uniform float width;
uniform float height;
uniform float time;
varying vec3 vecNormal;
varying vec3 vecPos;
varying vec3 rawPos;
uniform vec3 pointLightColor[MAX_POINT_LIGHTS];
uniform vec3 pointLightPosition[MAX_POINT_LIGHTS];
uniform float pointLightDistance[MAX_POINT_LIGHTS];
float rand(vec2 co){
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
/*
Iterated Fractional Brownian Motion
Based on:
http://www.iquilezles.org/www/articles/warp/warp.htm
*/
// makes a pseudorandom number between 0 and 1
float hash(float n) {
return fract(sin(n)*93942.234);
}
// smoothsteps a grid of random numbers at the integers
float noise(vec2 p) {
vec2 w = floor(p);
vec2 k = fract(p);
k = k*k*(3.-2.*k); // smooth it
float n = w.x + w.y*57.;
float a = hash(n);
float b = hash(n+1.);
float c = hash(n+57.);
float d = hash(n+58.);
return mix(
mix(a, b, k.x),
mix(c, d, k.x),
k.y);
}
// rotation matrix
mat2 m = mat2(0.6,0.8,-0.8,0.6);
// fractional brownian motion (i.e. photoshop clouds)
float fbm(vec2 p) {
float f = 0.;
f += 0.5000*noise(p); p *= 2.02*m;
f += 0.2500*noise(p); p *= 2.01*m;
f += 0.1250*noise(p); p *= 2.03*m;
f += 0.0625*noise(p);
f /= 0.9375;
return f;
}
void main(void) {
vec3 newColor = vec3(0.2, 0.2, 0.2) * (1.0 - intens) + vec3(0.5, 0.6, 1.0) * intens;
float noise = rand(vec2(vColor.r, vColor.g)) * 0.13;
newColor += vec3(gl_FragCoord.xy / max(width, height), length(gl_FragCoord.xy) / max(width, height)) * 0.2;
vec2 p = vec2(vColor.xy*6.);
float t = time * 0.04; // + 10.0 * vVelocity;
// calling fbm on itself
vec2 a = vec2(fbm(p+t*3.), fbm(p-t*3.+8.1));
vec2 b = vec2(fbm(p+t*4. + a*7. + 3.1), fbm(p-t*4. + a*7. + 91.1));
float c = fbm(b*9. + t*20.);
// increase contrast
c = smoothstep(0.15,0.98,c);
// mix in some color
vec3 col = vec3(c);
// col.rb += b*0.97;
col.b = 0.0;
newColor += col * 0.05;
if (fract(rawPos.x) < thresh || fract(rawPos.y) < thresh)
{
float val = min(fract(rawPos.x), fract(rawPos.y)) / thresh;
val = abs(0.5 - val) + 0.5;
val = 1.0 - 1.0 / exp(val * 5.0);
gl_FragColor = vec4(mix(vec3(0.0, 0.0, 0.0), newColor, val), 1.0);
}
else
{
gl_FragColor = vec4(newColor, noise + 0.9);
}
// Pretty basic lambertian lighting...
vec4 addedLights = vec4(0.0,0.0,0.0, 0.0);
for(int l = 0; l < MAX_POINT_LIGHTS; l++) {
vec3 lightDirection = normalize(vecPos
-pointLightPosition[l]);
addedLights.rgb += clamp(dot(-lightDirection,
vecNormal), 0.0, 1.0)
* pointLightColor[l] * 1.0 / distance(vecPos, pointLightPosition[l]);
}
gl_FragColor += addedLights;
}
</script>
<script id="trampolineVertShader" type="x-shader/x-vertex">
uniform float size;
varying vec3 vColor;
varying vec3 vecNormal;
varying vec3 vecPos;
varying vec3 rawPos;
varying float intens;
void main() {
gl_Position = projectionMatrix *
modelViewMatrix * vec4(position, 1.0 );
vColor = (position + size / 2.0) / size;
intens = - position.z * 2.0;
vecNormal = (modelMatrix * vec4(normal, 0.0)).xyz;
vecPos = (modelMatrix * vec4(position, 1.0 )).xyz;
rawPos = position;
}
</script>
<script src="three.min.js"></script>
<script src="STLLoader.js"></script>
<script src="TrackballControls.js"></script>
<script src="CopyShader.js"></script>
<script src="BGCopyShader.js"></script>
<script src="FXAAShader.js"></script>
<script src="EffectComposer.js"></script>
<script src="MaskPass.js"></script>
<script src="RenderPass.js"></script>
<script src="ShaderPass.js"></script>
<script src="VignetteShader.js"></script>
<script src="wait.js"></script>
<script src="cow.js"></script>
<script src="trampoline.js"></script>
<script src="ufo.js"></script>
<script src="test1.js">
</script>
<div class="controls">
<button onClick="$ufo.move(0, -2)">Up</button>
<button onClick="$ufo.move(0, 2)">Down</button>
<button onClick="$ufo.move(-2, 0)">Left</button>
<button onClick="$ufo.move(2, 0)">Right</button>
<button onClick="$ufo.handleKey({which:32})">Drop (Space)</button>
<button onClick="$ufo.handleKey({which:82})">Cowabunga! (r)</button>
</div>
</body>
</html>
source/threejs/cows.html