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.

Sign up for GitHub

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

Project5 done #19

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Project5 done #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b7e6eac
finish part1
XJMa Nov 3, 2014
baa94b5
finish part2
XJMa Nov 4, 2014
ed2e40f
add result
XJMa Nov 4, 2014
6089919
more pics
XJMa Nov 4, 2014
9ada8b4
Update README.md
XJMa Nov 4, 2014
af142db
more pic
XJMa Nov 4, 2014
e595441
Update README.md
XJMa Nov 4, 2014
0c51177
Update README.md
XJMa Nov 4, 2014
705c18f
Update README.md
XJMa Nov 4, 2014
dbe88b4
a little change
XJMa Nov 4, 2014
806449e
Merge branch 'master' of https://github.com/XJMa/Project5-WebGL
XJMa Nov 4, 2014
f3ddec1
add video
XJMa Nov 4, 2014
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
366 changes: 37 additions & 329 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

176 changes: 176 additions & 0 deletions Xinjie_frag_globe - Copy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
<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;
}
</script>

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

//View-Space directional light
//A unit vector
uniform vec3 u_CameraSpaceDirLight;
uniform vec3 u_DirLight;
//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);
float EarthSpec = texture2D(u_EarthSpec, v_Texcoord).r;
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){//bump map
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));
}
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));



//Clouds
vec2 v_Texcoord2 = v_Texcoord + vec2(u_time * 0.2, 0.0);
vec3 cloudsColor = texture2D(u_Cloud,v_Texcoord2).rgb;
float cloudMix = texture2D(u_CloudTrans,v_Texcoord2).r;
//cloud shadow
mat3 transformMatrix = eastNorthUpToEyeCoordinates(v_positionMC, normalize(v_Normal));
vec3 cloudShadowOffset = transformMatrix * u_DirLight;
vec2 cloudShadowOffset2 = v_Texcoord2 + vec2(-cloudShadowOffset.x * 0.01,-cloudShadowOffset.y * 0.01);
//vec2 v_TexcoordCloudShadow = vec2(v_Texcoord.s - 0.01 * u_time,v_Texcoord.t) + vec2(-u_CameraSpaceDirLight.x*0.007, -u_CameraSpaceDirLight.y*0.007);
float cloudTransShadow = texture2D(u_CloudTrans, cloudShadowOffset2).r;

//dayColor = mix((0.6 * diffuse + 0.4 * specular*EarthSpec )* dayColor, vec3(0.0,0.0,0.0), 1.0-cloudTransShadow);
dayColor =(0.6 * diffuse + 0.4 * specular*EarthSpec )* dayColor;
dayColor = mix(cloudsColor, dayColor, cloudMix);
nightColor = 1.5 * mix(vec3(0.0,0.0,0.0),nightColor,cloudMix);

//night lights
float rperiod = 0.1; // transition from day to night
float diffjudge = dot(u_CameraSpaceDirLight, normal);
vec3 color;
if(diffjudge >= rperiod)
color = dayColor;
else if(diffjudge <= -rperiod)
color = nightColor;
else
{
float alpha = (diffjudge + rperiod)/(2.0*rperiod);
color = mix(nightColor,dayColor,alpha);
}
//Rim Lighting
float rim = dot(v_Normal,v_Position) + 1.5;
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>
</body>

</html>
65 changes: 61 additions & 4 deletions frag_globe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
//View-Space directional light
//A unit vector
uniform vec3 u_CameraSpaceDirLight;

uniform vec3 u_DirLight;
//Diffuse texture map for the day
uniform sampler2D u_DayDiffuse;
//Ambient texture map for the night side
Expand Down Expand Up @@ -75,6 +75,26 @@
{
// surface normal - normalized after rasterization
vec3 normal = normalize(v_Normal);
float EarthSpec = texture2D(u_EarthSpec, v_Texcoord).r;
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){//bump map
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));
}
normal = eastNorthUpToEyeCoordinates(v_positionMC,v_Normal) * normal;
normal = normalize(normal);
// normalized eye-to-position vector in camera coordinates
vec3 eyeToPosition = normalize(v_Position);

Expand All @@ -90,9 +110,46 @@
vec3 nightColor = texture2D(u_Night, v_Texcoord).rgb;
//apply gamma correction to nighttime texture
nightColor = pow(nightColor,vec3(gammaCorrect));

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



//Clouds
vec2 v_Texcoord2 = v_Texcoord - vec2(u_time * 0.2, 0.0);
vec3 cloudsColor = texture2D(u_Cloud,v_Texcoord2).rgb;
float cloudMix = texture2D(u_CloudTrans,v_Texcoord2).r;
//cloud shadow
mat3 transformMatrix = eastNorthUpToEyeCoordinates(v_positionMC, normalize(v_Normal));
vec3 cloudShadowOffset = transformMatrix * u_DirLight;
vec2 cloudShadowOffset2 = v_Texcoord2 + vec2(-cloudShadowOffset.x * 0.01,-cloudShadowOffset.y * 0.01);
//vec2 v_TexcoordCloudShadow = vec2(v_Texcoord.s - 0.01 * u_time,v_Texcoord.t) + vec2(-u_CameraSpaceDirLight.x*0.007, -u_CameraSpaceDirLight.y*0.007);
float cloudTransShadow = texture2D(u_CloudTrans, cloudShadowOffset2).r;

dayColor = mix((0.6 * diffuse + 0.4 * specular*EarthSpec )* dayColor, vec3(0.0,0.0,0.0), 1.0-cloudTransShadow);
//dayColor =(0.6 * diffuse + 0.4 * specular*EarthSpec )* dayColor;
dayColor = mix(cloudsColor, dayColor, cloudMix);
nightColor = 1.5 * mix(vec3(0.0,0.0,0.0),nightColor,cloudMix);

//night lights
float rperiod = 0.1; // transition from day to night
float diffjudge = dot(u_CameraSpaceDirLight, normal);
vec3 color;
if(diffjudge >= rperiod)
color = dayColor;
else if(diffjudge <= -rperiod)
color = nightColor;
else
{
float alpha = (diffjudge + rperiod)/(2.0*rperiod);
color = mix(nightColor,dayColor,alpha);
}
//Rim Lighting
float rim = dot(v_Normal,v_Position) + 1.5;
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)
Expand Down
7 changes: 4 additions & 3 deletions js/frag_globe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
var u_ViewLocation;
var u_PerspLocation;
var u_CameraSpaceDirLightLocation;
var u_DirLightLocation;//for cloud shadow
var u_DayDiffuseLocation;
var u_NightLocation;
var u_CloudLocation;
Expand Down Expand Up @@ -76,7 +77,7 @@
u_BumpLocation = gl.getUniformLocation(program,"u_Bump");
u_timeLocation = gl.getUniformLocation(program,"u_time");
u_CameraSpaceDirLightLocation = gl.getUniformLocation(program,"u_CameraSpaceDirLight");

u_DirLightLocation = gl.getUniformLocation(program,"u_DirLight");
gl.useProgram(program);
})();

Expand Down Expand Up @@ -267,7 +268,7 @@
gl.uniformMatrix4fv(u_InvTransLocation, false, invTrans);

gl.uniform3fv(u_CameraSpaceDirLightLocation, lightdir);

gl.uniform3fv(u_DirLightLocation, vec3.create([1.0, 0.0, 1.0]));
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, dayTex);
gl.uniform1i(u_DayDiffuseLocation, 0);
Expand All @@ -287,7 +288,7 @@
gl.bindTexture(gl.TEXTURE_2D, specTex);
gl.uniform1i(u_EarthSpecLocation, 5);
gl.drawElements(gl.TRIANGLES, numberOfIndices, gl.UNSIGNED_SHORT,0);

gl.uniform1f(u_timeLocation, time);
time += 0.001;
window.requestAnimFrame(animate);
}
Expand Down
Loading