Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Finish Project5, Bo Zhang, all the details are written in readme, including a video link. #3

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions Links.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
http://msdn.microsoft.com/en-us/library/ie/dn302449(v=vs.85).aspx
http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers
http://jsfiddle.net/mortennobel/URvtx/
http://bl.ocks.org/g-k/5847236
http://jayconrod.com/posts/34/water-simulation-in-glsl
https://glsleffects.codeplex.com/wikipage?title=Ripple
http://www.dreamincode.net/forums/topic/66480-perlin-noise/
https://github.com/mrdoob/stats.js
http://gamedev.stackexchange.com/questions/60313/implementing-a-skybox-with-glsl-version-330
Binary file added Pics/All Effects.bmp
Binary file not shown.
Binary file added Pics/HeightMap Shader.bmp
Binary file not shown.
Binary file added Pics/Ripple.bmp
Binary file not shown.
Binary file added Pics/Vertex Wave.bmp
Binary file not shown.
Binary file added Pics/Water.bmp
Binary file not shown.
365 changes: 44 additions & 321 deletions README.md

Large diffs are not rendered by default.

354 changes: 249 additions & 105 deletions frag_globe.html
Original file line number Diff line number Diff line change
@@ -1,119 +1,263 @@
<html>

<head>
<title>Fragment Globe</title>
<meta charset ="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <!-- Use Chrome Frame in IE -->
</head>

<body>
<div id="message" style="position:absolute;top:100px"></div> <!-- Pixel offset to avoid FPS counter -->
<canvas id="canvas" style="border: none;" width="1024" height="768" tabindex="1"></canvas>

<script id="vs" type="x-shader/x-vertex">
precision highp float;

uniform mat4 u_Model;
uniform mat4 u_View;
uniform mat4 u_Persp;
uniform mat4 u_InvTrans;

attribute vec3 Position;
attribute vec3 Normal;
attribute vec2 Texcoord;

varying vec3 v_Normal;
varying vec2 v_Texcoord;
varying vec3 v_Position;
varying vec3 v_positionMC;

void main(void)
{
v_Normal = (u_InvTrans*vec4(Normal,0.0)).xyz;
v_Texcoord = Texcoord;
vec4 world = u_Model * vec4(Position, 1.0);
vec4 camera = u_View * world;
v_Position = camera.xyz;
v_positionMC = Position;
gl_Position = u_Persp * camera;
}
<head>
<title>Fragment Globe</title>
<meta charset ="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <!-- Use Chrome Frame in IE -->
</head>

<body>
<div id="message" style="position:absolute;top:100px"></div> <!-- Pixel offset to avoid FPS counter -->
<canvas id="canvas" style="border: none;" width="1024" height="768" tabindex="1"></canvas>
<script id="vs" type="x-shader/x-vertex">
precision highp float;

uniform mat4 u_Model;
uniform mat4 u_View;
uniform mat4 u_Persp;
uniform mat4 u_InvTrans;

attribute vec3 Position;
attribute vec3 Normal;
attribute vec2 Texcoord;

varying vec3 v_Normal;
varying vec2 v_Texcoord;
varying vec3 v_Position;
varying vec3 v_positionMC;

void main(void)
{
v_Normal = (u_InvTrans*vec4(Normal,0.0)).xyz;
v_Texcoord = Texcoord;
vec4 world = u_Model * vec4(Position, 1.0);
vec4 camera = u_View * world;
v_Position = camera.xyz;
v_positionMC = Position;
gl_Position = u_Persp * camera;
}
</script>

<script id="fs" type="x-shader/x-fragment">
precision highp float;

//View-Space directional light
//A unit vector
uniform vec3 u_CameraSpaceDirLight;

//Diffuse texture map for the day
uniform sampler2D u_DayDiffuse;
//Ambient texture map for the night side
uniform sampler2D u_Night;
//Color map for the clouds
uniform sampler2D u_Cloud;
//Transparency map for the clouds. Note that light areas are where clouds are NOT
//Dark areas are where clouds are present
uniform sampler2D u_CloudTrans;
//Mask of which areas of the earth have specularity
//Oceans are specular, landmasses are not
uniform sampler2D u_EarthSpec;
//Bump map
uniform sampler2D u_Bump;

uniform float u_time;
uniform mat4 u_InvTrans;

varying vec3 v_Normal; // surface normal in camera coordinates
varying vec2 v_Texcoord;
varying vec3 v_Position; // position in camera coordinates
varying vec3 v_positionMC; // position in model coordinates

mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC);

void main(void)
{
// surface normal - normalized after rasterization
vec3 normal = normalize(v_Normal);
// normalized eye-to-position vector in camera coordinates
vec3 eyeToPosition = normalize(v_Position);

float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
<script id="fs" type="x-shader/x-fragment">
precision highp float;

//View-Space directional light
//A unit vector
uniform vec3 u_CameraSpaceDirLight;

//Diffuse texture map for the day
uniform sampler2D u_DayDiffuse;
//Ambient texture map for the night side
uniform sampler2D u_Night;
//Color map for the clouds
uniform sampler2D u_Cloud;
//Transparency map for the clouds. Note that light areas are where clouds are NOT
//Dark areas are where clouds are present
uniform sampler2D u_CloudTrans;
//Mask of which areas of the earth have specularity
//Oceans are specular, landmasses are not
uniform sampler2D u_EarthSpec;
//Bump map
uniform sampler2D u_Bump;

uniform float u_time;
uniform mat4 u_InvTrans;

//Added
uniform int u_heightmap;
uniform vec3 u_hcolor1;
uniform vec3 u_hcolor2;
uniform vec3 u_hcolor3;
uniform int u_waternoise;

vec3 toReflectedLight = reflect(-u_CameraSpaceDirLight, normal);
float specular = max(dot(toReflectedLight, -eyeToPosition), 0.0);
specular = pow(specular, 20.0);

float gammaCorrect = 1.0/1.2; //gamma correct by 1/1.2
varying vec3 v_Normal; // surface normal in camera coordinates
varying vec2 v_Texcoord;
varying vec3 v_Position; // position in camera coordinates
varying vec3 v_positionMC; // position in model coordinates


mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC);

//Perlin noise
//No bit operations, use a rand generator
float findnoise(float x, float y) {
return fract(sin(dot(vec2(x,y) ,vec2(12.9898,78.233))) * 43758.5453);
}

float interpolate(float a, float b, float x) {
float ft=x * 3.1415926;
float f=(1.0-cos(ft))* 0.5;
return a*(1.0-f)+b*f;
}

float noise(float x, float y) {
float floorx = floor(x);
float floory = floor(y);

float s = findnoise(floorx, floory);
float t = findnoise(floorx+1.0, floory);
float u = findnoise(floorx, floory+1.0);
float v = findnoise(floorx+1.0, floory+1.0);

float int1 = interpolate(s, t, x - floorx);
float int2 = interpolate(u, v, x - floorx);

return interpolate(int1, int2, y - floory);
}

float perlin(vec2 v) {
float getnoise = 0.0;
float p = 1.1;
float zoom = 0.5;
const int octaves = 6;

vec3 dayColor = texture2D(u_DayDiffuse, v_Texcoord).rgb;
vec3 nightColor = texture2D(u_Night, v_Texcoord).rgb;
//apply gamma correction to nighttime texture
nightColor = pow(nightColor,vec3(gammaCorrect));
for (int a=0; a<octaves-1; a++) {
float frequency = pow(2.0, float(a)); //This increases the frequency with every loop of the octave.
float amplitude = pow(p, float(a)); //This decreases the amplitude with every loop of the octave.
getnoise = getnoise + noise(v.x*frequency/zoom,v.y*frequency/zoom) *amplitude;
}

vec3 color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor;
gl_FragColor = vec4(color, 1.0);
return getnoise;
}

mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC)

void main(void)
{
//Specular Map
float EarthSpec = texture2D(u_EarthSpec, v_Texcoord).r; //0 for land,1 for ocean
float diffpart = 0.6,specpart = 0.4;
float center = 0.0,right=0.0,above = 0.0;
vec3 normal= normalize(vec3(0.0, 0.0, 0.2));
if(EarthSpec<0.5)
{
center = texture2D(u_Bump, v_Texcoord).r;
float r = clamp(v_Texcoord.s + 1.0/1024.0, 0.0, 1.0);
if(v_Texcoord.s*1024.0 + 1.0>1024.0)
r = 1.0/1024.0;

right = texture2D(u_Bump, vec2(r,v_Texcoord.t)).r;
float u = clamp(v_Texcoord.t + 1.0/512.0, 0.0, 1.0);
if(v_Texcoord.t*512.0 + 1.0>512.0)
u = 1.0/512.0;

above = texture2D(u_Bump, vec2(v_Texcoord.s,u)).r;
normal = normalize(vec3(center - right, center - above, 0.2));

}
else if(u_waternoise==1)
{
// normalized surface tangent in model coordinates
vec3 tangentMC = normalize(vec3(-positionMC.z, positionMC.x, 0.0));
// normalized surface tangent in eye coordiantes
vec3 tangentEC = normalize(mat3(u_InvTrans) * tangentMC);
// normalized surface bitangent in eye coordinates
vec3 bitangentEC = normalize(cross(normalEC, tangentEC));

return mat3(
tangentEC.x, tangentEC.y, tangentEC.z,
bitangentEC.x, bitangentEC.y, bitangentEC.z,
normalEC.x, normalEC.y, normalEC.z);
vec2 seaPosition = vec2(v_Position.x-0.5*u_time, v_Position.y);
float dx = 0.2;
center = perlin(seaPosition);
right = perlin(seaPosition + vec2(dx, 0.0));
above = perlin(seaPosition + vec2(0.0, dx));

normal = normalize(vec3(normalize(vec2(center - right, center - above)),1.0));
}
</script>

<script src ="js/lib/gl-matrix.js" type ="text/javascript"></script>
<script src ="js/webGLUtility.js" type ="text/javascript"></script>
<script src ="js/frag_globe.js" type ="text/javascript"></script>
</body>
normal = eastNorthUpToEyeCoordinates(v_positionMC,v_Normal) * normal;
normal = normalize(normal);

// normalized eye-to-position vector in camera coordinates
vec3 eyeToPosition = normalize(v_Position);

float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);

vec3 toReflectedLight = reflect(-u_CameraSpaceDirLight, normal);
float specular = max(dot(toReflectedLight, -eyeToPosition), 0.0);
specular = pow(specular, 20.0);

float gammaCorrect = 1.0/1.2; //gamma correct by 1/1.2

vec3 dayColor = texture2D(u_DayDiffuse, v_Texcoord).rgb;
vec3 nightColor = texture2D(u_Night, v_Texcoord).rgb;
//apply gamma correction to nighttime texture
nightColor = pow(nightColor,vec3(gammaCorrect));

if(EarthSpec<0.5)
{
specpart = 0.0;
specular = 0.0;
diffpart = 1.0;
}

vec3 color;

float altitude = texture2D(u_Bump, v_Texcoord).r;
vec3 d_color = ((diffpart * diffuse) + (specpart * specular)) * dayColor;
vec3 n_color = nightColor;
if(EarthSpec<0.1 && u_heightmap==1)
{
vec3 hcolor;
if(altitude>=0.0 && altitude <= 0.3)
hcolor = u_hcolor1/255.0;
else if(altitude>0.3 && altitude <= 0.6)
{
float mixa = (altitude - 0.3) / 0.3;
hcolor = mix(u_hcolor1/255.0,u_hcolor2/255.0,mixa);
}
else if(altitude>0.6)
{
float mixa = (altitude - 0.6) / 0.4;
hcolor = mix(u_hcolor2/255.0,u_hcolor3/255.0,mixa);
}

d_color = mix(d_color,hcolor,altitude);
}



//Clouds
vec3 cloudsColor = texture2D(u_Cloud,vec2(v_Texcoord.s - 0.05 * u_time,v_Texcoord.t)).rgb;
float cloudMix = texture2D(u_CloudTrans,vec2(v_Texcoord.s - 0.05 * u_time,v_Texcoord.t)).r;
d_color = mix(cloudsColor,d_color,cloudMix);
n_color = 1.5 * mix(vec3(0.0,0.0,0.0),n_color,cloudMix);

//Night Lights
float rperiod = 0.1; //transition from day to night
float diffjudge = dot(u_CameraSpaceDirLight, normal);
if(diffjudge >= rperiod)
color = d_color;
else if(diffjudge <= -rperiod)
color = n_color;
else
{
float alpha = (diffjudge + rperiod)/(2.0*rperiod);
color = mix(n_color,d_color,alpha);
}

//Rim Lighting
float rim = dot(v_Normal,v_Position) + 1.0;
vec3 rimcolor = vec3(0.0,0.0,0.0);
if(rim>0.0)
rimcolor = vec3(rim/4.0, rim/2.0, rim/2.0);

rimcolor = clamp(rimcolor, vec3(0.0, 0.0, 0.0), vec3(1.0, 1.0, 1.0));
gl_FragColor = vec4(color + rimcolor, 1.0);
}

mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC)
{
// normalized surface tangent in model coordinates
vec3 tangentMC = normalize(vec3(-positionMC.z, positionMC.x, 0.0));
// normalized surface tangent in eye coordiantes
vec3 tangentEC = normalize(mat3(u_InvTrans) * tangentMC);
// normalized surface bitangent in eye coordinates
vec3 bitangentEC = normalize(cross(normalEC, tangentEC));

return mat3(
tangentEC.x, tangentEC.y, tangentEC.z,
bitangentEC.x, bitangentEC.y, bitangentEC.z,
normalEC.x, normalEC.y, normalEC.z);
}
</script>

<script src ="js/lib/gl-matrix.js" type ="text/javascript"></script>
<script src ="js/webGLUtility.js" type ="text/javascript"></script>
<script src ="js/frag_globe.js" type ="text/javascript"></script>
<script src="js/lib/dat.gui.min.js" type="text/javascript"></script>
<script src="js/lib/stats.min.js" type="text/javascript" ></script>
</body>

</html>
</html>
Loading