Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
130 lines (111 sloc) 4.57 KB
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rings</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="spinner"></div>
<div id="container"></div>
<script id="vertexShaderTree" type="x-shader/x-vertex">
precision mediump float;
varying vec3 vecNormal;
varying vec4 vecPos;
varying float screenY;
uniform vec2 uResolution;
float map(float x, float in_min, float in_max, float out_min, float out_max){
return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
void main() {
vecNormal = normalMatrix * normal;
// as the light later will be given in world coordinate space,
// vPos has to be in world coordinate space too
vecPos = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
screenY = position.y/uResolution.y;
gl_Position = vecPos;
}
</script>
<script id="fragmentShaderTree" type="x-shader/x-vertex">
precision mediump float;
// Comment this line to do not use the point light
#define CUSTOM_POINTLIGHTS
#define MAX_NUM_RINGS 18
varying vec3 vecNormal;
varying vec4 vecPos;
varying float screenY;
uniform vec3 ringColor;
uniform int ringNumber;
uniform vec3 treeColor;
uniform float rms;
uniform float scaleRing;
uniform float ringThickness;
uniform vec2 uResolution;
struct PointLight {
vec3 position;
vec3 color;
};
uniform PointLight pointLights[ NUM_POINT_LIGHTS ];
float cubicPulse( float c, float w, float x ){
x = abs(x - c);
if( x>w ) return 0.0;
x /= w;
return 1.0 - x*x*(3.0-2.0*x);
}
void main() {
#ifdef CUSTOM_POINTLIGHTS
vec4 addedLights = vec4(0.0,0.0,0.0, 1.0);
for(int l = 0; l < NUM_POINT_LIGHTS; l++) {
vec3 adjustedLight = pointLights[l].position + cameraPosition;
vec3 lightDirection = normalize(vecPos.xyz - adjustedLight);
addedLights.rgb += clamp(dot(-lightDirection, vecNormal), 0.0, 1.0) * pointLights[l].color;
}
float inc = 1.0/float(ringNumber);
float padding = 0.0;
vec4 tmpCol = vec4(treeColor, 1.0);
for (int i = 0; i< MAX_NUM_RINGS; i++) {
if (i == ringNumber ) break;
float y = cubicPulse(mod(rms * scaleRing, 1.0),ringThickness,screenY - padding);
// apply light on the whole tree's mesh
//tmpCol += vec4( ringColor.xyz * vec3(y), 1.0);
// apply lights only on the rings
tmpCol += mix(
vec4( ringColor.xyz * vec3(y), 1.0),
addedLights * vec4(vec3(y), 1.0),
addedLights * vec4(vec3(y), 1.0)
);
padding += inc;
}
// apply light on the whole tree's mesh
//vec4 col = mix(vec4(tmpCol.xyz, 1.0), addedLights, addedLights);
// apply lights only on the rings
vec4 col = tmpCol;
#else
float inc = 1.0/float(ringNumber);
float padding = 0.0;
//arbitrary light position
vec3 lightPos = vec3(0.5, 0.2, 0.5);
vec3 lightDirection = normalize(vecPos.xyz - lightPos);
float dProd = max(0.6,dot(vecNormal, lightDirection));
vec4 tmpCol = vec4(treeColor, 1.0);
for (int i = 0; i< MAX_NUM_RINGS; i++) {
if (i == ringNumber ) break;
float y = cubicPulse(mod(rms * scaleRing, 1.0),ringThickness,screenY - padding);
//apply light only to the rings
tmpCol += vec4( vec3( dProd ) *vec3( y ) * vec3(ringColor), y);
padding +=inc;
}
vec4 col = tmpCol;
#endif
gl_FragColor = col;
}
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
<script type="text/javascript" src="../js/maxiLib.js"></script>
<script type="text/javascript" src="../js/dat.gui.min.js"></script>
<script type="text/javascript" src="../js/OrbitControls.js"></script>
<script type="text/javascript" src="../js/stats.min.js"></script>
<script type="text/javascript" src="../js/PLYLoader.js"></script>
<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body></html>