Skip to content

Finished project 5. #1

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

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

Finished project 5. #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f5d9dea
Initial checkin
dkotfis Nov 1, 2014
04d6679
Trying to fix readme.
dkotfis Nov 1, 2014
a63081b
More readme cleanup.
dkotfis Nov 1, 2014
d92ab61
And more
dkotfis Nov 1, 2014
5e89a52
Added clickable demos.
dkotfis Nov 1, 2014
29c7e94
Final cleanup
dkotfis Nov 2, 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
364 changes: 20 additions & 344 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

47 changes: 40 additions & 7 deletions frag_globe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<html>
<html>

<head>
<title>Fragment Globe</title>
Expand Down Expand Up @@ -78,21 +78,54 @@
// normalized eye-to-position vector in camera coordinates
vec3 eyeToPosition = normalize(v_Position);

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

//Compute ground diffuse term with bump mapping
float b_center = texture2D(u_Bump, v_Texcoord).r;
float b_right = texture2D(u_Bump, v_Texcoord + vec2(1.0/1024.0, 0.0)).r;
float b_top = texture2D(u_Bump, v_Texcoord + vec2(0.0, 1.0/512.0)).r;
vec3 bumpNormal = eastNorthUpToEyeCoordinates(v_positionMC, v_Normal)*normalize(vec3(b_center-b_right, b_center-b_top, 0.2));
float diffuseGround = clamp(dot(u_CameraSpaceDirLight, bumpNormal), 0.0, 1.0);

//Compute elevation shading term based on bump map
float altShade = 0.5 + 0.5*b_center;

//Compute specular (applied for water only)
vec3 toReflectedLight = reflect(-u_CameraSpaceDirLight, normal);
float specular = max(dot(toReflectedLight, -eyeToPosition), 0.0);
float specular = max(dot(toReflectedLight, -eyeToPosition), 0.0) * texture2D(u_EarthSpec, v_Texcoord).r;
specular = pow(specular, 20.0);

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

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

//Apply Gamma correction
nightColor = pow(nightColor,vec3(gammaCorrect));

vec3 color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor;
gl_FragColor = vec4(color, 1.0);
//Compute rim coloring
float rimFactor = clamp(dot(v_Normal, v_Position) + 1.0, 0.0, 0.5);
vec3 rimColor = vec3(0.0, 0.0, 0.0);
if (rimFactor > 0.0) {
rimColor = vec3(rimFactor/4.0, rimFactor/2.0, rimFactor/2.0);
}

//Compute ground and cloud colors
vec3 cloudColor = (0.6 * diffuseCloud) * texture2D(u_Cloud, v_Texcoord).rgb;
vec3 groundColor = ((0.6 * diffuseGround) + (0.4 * specular)) * altShade * dayColor;

//Mix ground with cloud color for day color
vec3 colorDay = mix(cloudColor, groundColor, texture2D(u_CloudTrans,v_Texcoord).r);

//Mix night side with cloud darkness
vec3 colorNight = mix(vec3(0.0), nightColor, texture2D(u_CloudTrans,v_Texcoord).r);

//Mix day and night
vec3 color = mix(colorNight, colorDay, (mixFactor+1.0)/2.0 + 0.2);

//Add rim color to result
gl_FragColor = vec4(color+rimColor, 1.0);
}

mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC)
Expand Down
152 changes: 152 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
<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;

//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 diffuseCloud = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
float mixFactor = clamp(dot(u_CameraSpaceDirLight, normal), -1.0, 1.0);

//Compute ground diffuse term with bump mapping
float b_center = texture2D(u_Bump, v_Texcoord).r;
float b_right = texture2D(u_Bump, v_Texcoord + vec2(1.0/1024.0, 0.0)).r;
float b_top = texture2D(u_Bump, v_Texcoord + vec2(0.0, 1.0/512.0)).r;
vec3 bumpNormal = eastNorthUpToEyeCoordinates(v_positionMC, v_Normal)*normalize(vec3(b_center-b_right, b_center-b_top, 0.2));
float diffuseGround = clamp(dot(u_CameraSpaceDirLight, bumpNormal), 0.0, 1.0);

//Compute elevation shading term based on bump map
float altShade = 0.5 + 0.5*b_center;

//Compute specular (applied for water only)
vec3 toReflectedLight = reflect(-u_CameraSpaceDirLight, normal);
float specular = max(dot(toReflectedLight, -eyeToPosition), 0.0) * texture2D(u_EarthSpec, v_Texcoord).r;
specular = pow(specular, 20.0);

float gammaCorrect = 1.0/1.2;

vec3 dayColor = texture2D(u_DayDiffuse, v_Texcoord).rgb;
vec3 nightColor = texture2D(u_Night, v_Texcoord).rgb;

//Apply Gamma correction
nightColor = pow(nightColor,vec3(gammaCorrect));

//Compute rim coloring
float rimFactor = clamp(dot(v_Normal, v_Position) + 1.0, 0.0, 0.5);
vec3 rimColor = vec3(0.0, 0.0, 0.0);
if (rimFactor > 0.0) {
rimColor = vec3(rimFactor/4.0, rimFactor/2.0, rimFactor/2.0);
}

//Compute ground and cloud colors
vec3 cloudColor = (0.6 * diffuseCloud) * texture2D(u_Cloud, v_Texcoord).rgb;
vec3 groundColor = ((0.6 * diffuseGround) + (0.4 * specular)) * altShade * dayColor;

//Mix ground with cloud color for day color
vec3 colorDay = mix(cloudColor, groundColor, texture2D(u_CloudTrans,v_Texcoord).r);

//Mix night side with cloud darkness
vec3 colorNight = mix(vec3(0.0), nightColor, texture2D(u_CloudTrans,v_Texcoord).r);

//Mix day and night
vec3 color = mix(colorNight, colorDay, (mixFactor+1.0)/2.0 + 0.2);

//Add rim color to result
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>
1 change: 0 additions & 1 deletion js/frag_globe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,6 @@
function animate() {
///////////////////////////////////////////////////////////////////////////
// Update

var model = mat4.create();
mat4.identity(model);
mat4.rotate(model, 23.4/180*Math.PI, [0.0, 0.0, 1.0]);
Expand Down
Loading