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

Project 5 Submission. #13

Open
wants to merge 6 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
379 changes: 30 additions & 349 deletions README.md

Large diffs are not rendered by default.

49 changes: 49 additions & 0 deletions part1/custom.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<html>

<head>
<title>Vertex Wave</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">
attribute vec2 position;
varying vec3 color;

uniform mat4 u_modelViewPerspective;
uniform float u_time;

void main(void)
{
float x = position.x - 0.5;
float y = position.y - 0.5;
float radius = sqrt(x * x + y * y);
float height = sin(radius*2.0*3.14159 + u_time/2.0);
//float s_contrib = sin(position.x*2.0*3.14159 + u_time/2.0);
//float t_contrib = cos(position.y*2.0*3.14159 + u_time/2.0);
//float height = s_contrib*t_contrib;
color = mix(vec3(1.0, 0.0, 0.0), vec3(0.0, 0.0, 1.0), height);
gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
}
</script>

<script id="fs" type="x-shader/x-fragment">
precision mediump float;
varying vec3 color;

void main(void)
{
gl_FragColor = vec4(color, 1.0);
}
</script>

<script src ="gl-matrix.js" type ="text/javascript"></script>
<script src ="webGLUtility.js" type ="text/javascript"></script>
<script src ="vert_wave.js" type ="text/javascript"></script>
</body>

</html>
89 changes: 89 additions & 0 deletions part1/simplex.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<html>

<head>
<title>Vertex Wave</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">
attribute vec2 position;
varying vec3 color;

uniform mat4 u_modelViewPerspective;
uniform float u_time;

vec3 permute(vec3 x);
float simplexNoise(vec2 v);

void main(void)
{
vec2 simplexVec = vec2(u_time, position);
float s_contrib = simplexNoise(simplexVec);
float t_contrib = simplexNoise(vec2(s_contrib,u_time));
float height = s_contrib*t_contrib;
color = mix(vec3(1.0, 0.0, 0.0), vec3(0.0, 0.0, 1.0), height);
gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
}

vec3 permute(vec3 x) {
x = ((x*34.0)+1.0)*x;
return x - floor(x * (1.0 / 289.0)) * 289.0;
}

float simplexNoise(vec2 v)
{
const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);

vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);

vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;

i = i - floor(i * (1.0 / 289.0)) * 289.0;

vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+ i.x + vec3(0.0, i1.x, 1.0 ));

vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
m = m*m ;
m = m*m ;

vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;

m *= inversesqrt( a0*a0 + h*h );

vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
</script>

<script id="fs" type="x-shader/x-fragment">
precision mediump float;
varying vec3 color;

void main(void)
{
gl_FragColor = vec4(color, 1.0);
}
</script>

<script src ="gl-matrix.js" type ="text/javascript"></script>
<script src ="webGLUtility.js" type ="text/javascript"></script>
<script src ="vert_wave.js" type ="text/javascript"></script>
</body>

</html>
16 changes: 11 additions & 5 deletions part1/vert_wave.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,28 @@

<script id="vs" type="x-shader/x-vertex">
attribute vec2 position;

varying vec3 color;

uniform mat4 u_modelViewPerspective;

uniform float u_time;

void main(void)
{
float height = 0.0;
float s_contrib = sin(position.x*2.0*3.14159 + u_time);
float t_contrib = cos(position.y*2.0*3.14159 + u_time);
float height = s_contrib*t_contrib;
color = mix(vec3(1.0, 0.0, 0.0), vec3(0.0, 0.0, 1.0), height);
gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
}
</script>

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

varying vec3 color;

void main(void)
{
gl_FragColor = vec4(vec3(0.0), 1.0);
gl_FragColor = vec4(color, 1.0);
}
</script>

Expand Down
12 changes: 9 additions & 3 deletions part1/vert_wave.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@
var positionLocation = 0;
var heightLocation = 1;
var u_modelViewPerspectiveLocation;

var u_timeLocation;

(function initializeShader() {
var program;
var vs = getShaderSource(document.getElementById("vs"));
Expand All @@ -40,6 +41,7 @@
var program = createProgram(context, vs, fs, message);
context.bindAttribLocation(program, positionLocation, "position");
u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
u_timeLocation = context.getUniformLocation(program, "u_time");

context.useProgram(program);
})();
Expand Down Expand Up @@ -125,7 +127,9 @@
uploadMesh(positions, heights, indices);
numberOfIndices = indices.length;
})();


var time = 0;

(function animate(){
///////////////////////////////////////////////////////////////////////////
// Update
Expand All @@ -137,12 +141,14 @@
mat4.multiply(view, model, mv);
var mvp = mat4.create();
mat4.multiply(persp, mv, mvp);

time += 0.01;

///////////////////////////////////////////////////////////////////////////
// Render
context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);

context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
context.uniform1f(u_timeLocation, time);
context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);

window.requestAnimFrame(animate);
Expand Down
41 changes: 35 additions & 6 deletions part2/frag_globe.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@
attribute vec3 Position;
attribute vec3 Normal;
attribute vec2 Texcoord;

attribute vec3 skyboxPosition;
attribute vec2 skyboxTexCoord;

varying vec3 v_Normal;
varying vec2 v_Texcoord;
varying vec3 v_Position;
Expand Down Expand Up @@ -78,20 +80,47 @@
// 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 bumpCenter = texture2D(u_Bump, v_Texcoord).r;
float bumpRight = texture2D(u_Bump, v_Texcoord+vec2(1.0/1024.0, 0.0)).r;
float bumpTop = texture2D(u_Bump, v_Texcoord+vec2(0.0, 1.0/512.0)).r;
vec3 perturbedNormal = normalize(vec3(bumpCenter - bumpRight, bumpCenter - bumpTop, 0.2));
vec3 newNormal = eastNorthUpToEyeCoordinates(v_positionMC, normal) * perturbedNormal;
newNormal = normalize(newNormal);

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

vec3 toReflectedLight = reflect(-u_CameraSpaceDirLight, newNormal);
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;
dayColor = mix(dayColor, vec3(1.0), bumpCenter);
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;

bool isLand = texture2D(u_EarthSpec, v_Texcoord).r < 0.5;
if (isLand) specular = 0.0;

vec2 cloudOffset = vec2(u_time/30.0, 0.0);
vec3 cloudColor = texture2D(u_Cloud, v_Texcoord+cloudOffset).rgb;
float cloudTrans = 1.0-texture2D(u_CloudTrans, v_Texcoord+cloudOffset).r;

vec3 color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor;
color = mix(color, cloudColor, clamp(cloudTrans-0.4, 0.0, 1.0));

float dayNightThresh = 0.2;
if (diffuse < dayNightThresh)
{
nightColor = mix(nightColor, vec3(0.0), cloudTrans);
color = mix(nightColor, color, diffuse/dayNightThresh);
}

float rim = dot(normal, eyeToPosition) + 1.0;
if (rim > 0.0) color = mix(color, vec3(rim/2.0, rim, rim)*0.6, clamp(rim-0.5, 0.0, 1.0));

gl_FragColor = vec4(color, 1.0);
}

Expand Down
Loading