diff --git a/README.md b/README.md
index 06fcfd4..dcaebbe 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,21 @@
-------------------------------------------------------------------------------
-CIS565: Project 5: WebGL
+WebGL Shaders (Simple Waves and Globe Rendering)
-------------------------------------------------------------------------------
Fall 2013
-------------------------------------------------------------------------------
-Due Friday 11/08/2013
--------------------------------------------------------------------------------
+
+Click any image to see a live demo.
+
+
+
+
+
+
+
+
+
+
-------------------------------------------------------------------------------
NOTE:
@@ -18,356 +29,75 @@ This project also requires a WebGL capable browser. The project is known to
have issues with Chrome on windows, but Firefox seems to run it fine.
-------------------------------------------------------------------------------
-INTRODUCTION:
--------------------------------------------------------------------------------
-In this project, you will get introduced to the world of GLSL in two parts:
-vertex shading and fragment shading. The first part of this project is the
-Image Processor, and the second part of this project is a Wave Vertex Shader.
-
-In the first part of this project, you will implement a GLSL vertex shader as
-part of a WebGL demo. You will create a dynamic wave animation using code that
-runs entirely on the GPU.
-
-In the second part of this project, you will implement a GLSL fragment shader
-to render an interactive globe in WebGL. This will include texture blending,
-bump mapping, specular masking, and adding a cloud layer to give your globe a
-uniquie feel.
-
--------------------------------------------------------------------------------
-CONTENTS:
--------------------------------------------------------------------------------
-The Project4 root directory contains the following subdirectories:
-
-* part1/ contains the base code for the Wave Vertex Shader.
-* part2/ contains the base code for the Globe Fragment Shader.
-* resources/ contains the screenshots found in this readme file.
-
--------------------------------------------------------------------------------
-PART 1 REQUIREMENTS:
--------------------------------------------------------------------------------
-
-In Part 1, you are given code for:
-
-* Drawing a VBO through WebGL
-* Javascript code for interfacing with WebGL
-* Functions for generating simplex noise
-
-You are required to implement the following:
-
-* A sin-wave based vertex shader:
-
-
-
-* A simplex noise based vertex shader:
-
-
-
-* One interesting vertex shader of your choice
-
--------------------------------------------------------------------------------
-PART 1 WALKTHROUGH:
+Wave Rendering
-------------------------------------------------------------------------------
-**Sin Wave**
-
-* For this assignment, you will need the latest version of Firefox.
-* Begin by opening index.html. You should see a flat grid of black and white
- lines on the xy plane:
-
-
+This section is just a simple demo of JS/WebGL Interaction and shader implementation.
+Three different waveforms can be animated:
-* In this assignment, you will animate the grid in a wave-like pattern using a
- vertex shader, and determine each vertex’s color based on its height, as seen
- in the example in the requirements.
-* The vertex and fragment shader are located in script tags in `index.html`.
-* The JavaScript code that needs to be modified is located in `index.js`.
-* Required shader code modifications:
- * Add a float uniform named u_time.
- * Modify the vertex’s height using the following code:
+**Sine Wave**
- ```glsl
- 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;
- ```
+
+
+
- * Use the GLSL mix function to blend together two colors of your choice based
- on the vertex’s height. The lowest possible height should be assigned one
- color (for example, `vec3(1.0, 0.2, 0.0)`) and the maximum height should be
- another (`vec3(0.0, 0.8, 1.0)`). Use a varying variable to pass the color to
- the fragment shader, where you will assign it `gl_FragColor`.
+* Open vert_wave.html to see this animation.
+* The 2D sine wave is generated by varying only the height of each vertex in the grid.
-* Required JavaScript code modifications:
- * A floating-point time value should be increased every animation step.
- Hint: the delta should be less than one.
- * To pass the time to the vertex shader as a uniform, first query the location
- of `u_time` using `context.getUniformLocation` in `initializeShader()`.
- Then, the uniform’s value can be set by calling `context.uniform1f` in
- `animate()`.
**Simplex Wave**
-* Now that you have the sin wave working, create a new copy of `index.html`.
- Call it `index_simplex.html`, or something similar.
-* Open up `simplex.vert`, which contains a compact GLSL simplex noise
- implementation, in a text editor. Copy and paste the functions included
- inside into your `index_simplex.html`'s vertex shader.
-* Try changing s_contrib and t_contrib to use simplex noise instead of sin/cos
- functions with the following code:
+
+
+
-```glsl
-vec2 simplexVec = vec2(u_time, position);
-float s_contrib = snoise(simplexVec);
-float t_contrib = snoise(vec2(s_contrib,u_time));
-```
+* Open simplex_wave.html to see this animation.
-**Wave Of Your Choice**
+**Water Surface Wave**
-* Create another copy of `index.html`. Call it `index_custom.html`, or
- something similar.
-* Implement your own interesting vertex shader! In your README.md with your
- submission, describe your custom vertex shader, what it does, and how it
- works.
+
+
+
+
+* Open water_wave.html to see this animation.
+* Unlike the previous waves, this wave moves verticies in all directions.
+* Each vertex is moved uniformly about a circle in some vertical plane
+ * This plane can be set in the VS by changing waveDir
+* The phase of each point is determined by their distance from the origin in the waveDir direction, resulting in linear wavefronts.
+* This simulates in a very simple way how particles move in the surface of ocean waves.
-------------------------------------------------------------------------------
-PART 2 REQUIREMENTS:
+Globe Rendering
-------------------------------------------------------------------------------
-In Part 2, you are given code for:
-
-* Reading and loading textures
-* Rendering a sphere with textures mapped on
-* Basic passthrough fragment and vertex shaders
-* A basic globe with Earth terrain color mapping
-* Gamma correcting textures
-* javascript to interact with the mouse
+Globe Renderer
* left-click and drag moves the camera around
* right-click and drag moves the camera in and out
-You are required to implement:
-
-* Bump mapped terrain
-* Rim lighting to simulate atmosphere
-* Night-time lights on the dark side of the globe
-* Specular mapping
-* Moving clouds
-
-You are also required to pick one open-ended effect to implement:
-
-* Procedural water rendering and animation using noise
-* Shade based on altitude using the height map
-* Cloud shadows via ray-tracing through the cloud map in the fragment shader
-* Orbiting Moon with texture mapping and shadow casting onto Earth
-* Draw a skybox around the entire scene for the stars.
-* Your choice! Email Liam and Patrick to get approval first
-
-Finally in addition to your readme, you must also set up a gh-pages branch
-(explained below) to expose your beautiful WebGL globe to the world.
-
-Some examples of what your completed globe renderer will look like:
-
-
-
-Figure 0. Completed globe renderer, daylight side.
-
-
-
-Figure 1. Completed globe renderer, twilight border.
-
-
-
-Figure 2. Completed globe renderer, night side.
-
--------------------------------------------------------------------------------
-PART 2 WALKTHROUGH:
--------------------------------------------------------------------------------
-
-Open part2/frag_globe.html in Firefox to run it. You’ll see a globe
-with Phong lighting like the one in Figure 3. All changes you need to make
-will be in the fragment shader portion of this file.
-
-
-
-Figure 3. Initial globe with diffuse and specular lighting.
-
-**Night Lights**
+Features:
+*Soft twilight border
-The backside of the globe not facing the sun is completely black in the
-initial globe. Use the `diffuse` lighting component to detect if a fragment
-is on this side of the globe, and, if so, shade it with the color from the
-night light texture, `u_Night`. Do not abruptly switch from day to night;
-instead use the `GLSL mix` function to smoothly transition from day to night
-over a reasonable period. The resulting globe will look like Figure 4.
-Consider brightening the night lights by multiplying the value by two.
+
+
+
-The base code shows an example of how to gamma correct the nighttime texture:
+* Bump mapped terrain
-```glsl
-float gammaCorrect = 1/1.2;
-vec4 nightColor = pow(texture2D(u_Night, v_Texcoord), vec4(gammaCorrect));
-```
+
+ 
+
-Feel free to play with gamma correcting the night and day textures if you
-wish. Find values that you think look nice!
-
-
-
-Figure 4. Globe with night lights and day/night blending at dusk/dawn.
-
-**Specular Map**
-
-Our day/night color still shows specular highlights on landmasses, which
-should only be diffuse lit. Only the ocean should receive specular highlights.
-Use `u_EarthSpec` to determine if a fragment is on ocean or land, and only
-include the specular component if it is in ocean.
-
-
-
-Figure 5. Globe with specular map. Compare to Figure 4. Here, the specular
-component is not used when shading the land.
-
-**Clouds**
-
-In day time, clouds should be diffuse lit. Use `u_Cloud` to determine the
-cloud color, and `u_CloudTrans` and `mix` to determine how much a daytime
-fragment is affected by the day diffuse map or cloud color. See Figure 6.
-
-In night time, clouds should obscure city lights. Use `u_CloudTrans` and `mix`
-to blend between the city lights and solid black. See Figure 7.
-
-Animate the clouds by offseting the `s` component of `v_Texcoord` by `u_time`
-when reading `u_Cloud` and `u_CloudTrans`.
-
-
-
-Figure 6. Clouds with day time shading.
-
-
-
-Figure 7. Clouds observing city nights on the dark side of the globe.
-
-**Bump Mapping**
-
-Add the appearance of mountains by perturbing the normal used for diffuse
-lighting the ground (not the clouds) by using the bump map texture, `u_Bump`.
-This texture is 1024x512, and is zero when the fragment is at sea-level, and
-one when the fragment is on the highest mountain. Read three texels from this
-texture: once using `v_Texcoord`; once one texel to the right; and once one
-texel above. Create a perturbed normal in tangent space:
-
-`normalize(vec3(center - right, center - top, 0.2))`
-
-Use `eastNorthUpToEyeCoordinates` to transform this normal to eye coordinates,
-normalize it, then use it for diffuse lighting the ground instead of the
-original normal.
-
-
-
-Figure 8. Bump mapping brings attention to mountains.
-
-**Rim Lighting**
-
-Rim lighting is a simple post-processed lighting effect we can apply to make
-the globe look as if it has an atmospheric layer catching light from the sun.
-Implementing rim lighting is simple; we being by finding the dot product of
-`v_Normal` and `v_Position`, and add 1 to the dot product. We call this value
-our rim factor. If the rim factor is greater than 0, then we add a blue color
-based on the rim factor to the current fragment color. You might use a color
-something like `vec4(rim/4, rim/2, rim/2, 1)`. If our rim factor is not greater
-than 0, then we leave the fragment color as is. Figures 0,1 and 2 show our
-finished globe with rim lighting.
-
-For more information on rim lighting,
-read http://www.fundza.com/rman_shaders/surface/fake_rim/fake_rim1.html.
-
--------------------------------------------------------------------------------
-GH-PAGES
--------------------------------------------------------------------------------
-Since this assignment is in WebGL you will make your project easily viewable by
-taking advantage of GitHub's project pages feature.
-
-Once you are done you will need to create a new branch named gh-pages:
-
-`git branch gh-pages`
-
-Switch to your new branch:
-
-`git checkout gh-pages`
-
-Create an index.html file that is either your renamed frag_globe.html or
-contains a link to it, commit, and then push as usual. Now you can go to
-
-`.github.io/`
-
-to see your beautiful globe from anywhere.
-
--------------------------------------------------------------------------------
-README
--------------------------------------------------------------------------------
-All students must replace or augment the contents of this Readme.md in a clear
-manner with the following:
-
-* A brief description of the project and the specific features you implemented.
-* At least one screenshot of your project running.
-* A 30 second or longer video of your project running. To create the video you
- can use http://www.microsoft.com/expression/products/Encoder4_Overview.aspx
-* A performance evaluation (described in detail below).
-
--------------------------------------------------------------------------------
-PERFORMANCE EVALUATION
--------------------------------------------------------------------------------
-The performance evaluation is where you will investigate how to make your
-program more efficient using the skills you've learned in class. You must have
-performed at least one experiment on your code to investigate the positive or
-negative effects on performance.
-
-We encourage you to get creative with your tweaks. Consider places in your code
-that could be considered bottlenecks and try to improve them.
-
-Each student should provide no more than a one page summary of their
-optimizations along with tables and or graphs to visually explain any
-performance differences.
+* Night-time lights on the dark side of the globe
+* Sunrise-based rim lighting to simulate atmosphere
+ * Rather than drawing uniform rim lighting, I only shade the sunward side. This leads to cool sunrise effects:
--------------------------------------------------------------------------------
-THIRD PARTY CODE POLICY
--------------------------------------------------------------------------------
-* Use of any third-party code must be approved by asking on the Google groups.
- If it is approved, all students are welcome to use it. Generally, we approve
- use of third-party code that is not a core part of the project. For example,
- for the ray tracer, we would approve using a third-party library for loading
- models, but would not approve copying and pasting a CUDA function for doing
- refraction.
-* Third-party code must be credited in README.md.
-* Using third-party code without its approval, including using another
- student's code, is an academic integrity violation, and will result in you
- receiving an F for the semester.
--------------------------------------------------------------------------------
-SELF-GRADING
--------------------------------------------------------------------------------
-* On the submission date, email your grade, on a scale of 0 to 100, to Liam,
- liamboone@gmail.com, with a one paragraph explanation. Be concise and
- realistic. Recall that we reserve 30 points as a sanity check to adjust your
- grade. Your actual grade will be (0.7 * your grade) + (0.3 * our grade). We
- hope to only use this in extreme cases when your grade does not realistically
- reflect your work - it is either too high or too low. In most cases, we plan
- to give you the exact grade you suggest.
-* Projects are not weighted evenly, e.g., Project 0 doesn't count as much as
- the path tracer. We will determine the weighting at the end of the semester
- based on the size of each project.
+
+
+
+* Specular mapping (only water is specularly reflective)
+* Moving clouds with procedurally generated shadows.
----
-SUBMISSION
----
-As with the previous project, you should fork this project and work inside of
-your fork. Upon completion, commit your finished project back to your fork, and
-make a pull request to the master repository. You should include a README.md
-file in the root directory detailing the following
+
+ 
+
-* A brief description of the project and specific features you implemented
-* At least one screenshot of your project running.
-* A link to a video of your project running.
-* Instructions for building and running your project if they differ from the
- base code.
-* A performance writeup as detailed above.
-* A list of all third-party code used.
-* This Readme file edited as described above in the README section.
diff --git a/part2/earthbump1024.png b/globe/earthbump1024.png
similarity index 100%
rename from part2/earthbump1024.png
rename to globe/earthbump1024.png
diff --git a/part2/earthcloud1024.png b/globe/earthcloud1024.png
similarity index 100%
rename from part2/earthcloud1024.png
rename to globe/earthcloud1024.png
diff --git a/part2/earthlight1024.png b/globe/earthlight1024.png
similarity index 100%
rename from part2/earthlight1024.png
rename to globe/earthlight1024.png
diff --git a/part2/earthmap1024.png b/globe/earthmap1024.png
similarity index 100%
rename from part2/earthmap1024.png
rename to globe/earthmap1024.png
diff --git a/part2/earthspec1024.png b/globe/earthspec1024.png
similarity index 100%
rename from part2/earthspec1024.png
rename to globe/earthspec1024.png
diff --git a/part2/earthtrans1024.png b/globe/earthtrans1024.png
similarity index 100%
rename from part2/earthtrans1024.png
rename to globe/earthtrans1024.png
diff --git a/part2/frag_globe.html b/globe/frag_globe.html
similarity index 52%
rename from part2/frag_globe.html
rename to globe/frag_globe.html
index 6aa5609..c660ff6 100644
--- a/part2/frag_globe.html
+++ b/globe/frag_globe.html
@@ -45,7 +45,9 @@
//View-Space directional light
//A unit vector
uniform vec3 u_CameraSpaceDirLight;
-
+ uniform vec3 u_ModelSpaceDirLight;//Model space version for ray cast convenience
+
+
//Diffuse texture map for the day
uniform sampler2D u_DayDiffuse;
//Ambient texture map for the night side
@@ -70,28 +72,75 @@
varying vec3 v_positionMC; // position in model coordinates
mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC);
-
+ vec3 raySphereIntersect(vec3 ro, vec3 rd, float r);
+ vec2 dirInSphereToTexcoords(vec3 dir);
void main(void)
{
// surface normal - normalized after rasterization
vec3 normal = normalize(v_Normal);
+
+ float flatdiffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+
+ //Bump Mapping
+ float bumpCenter = texture2D(u_Bump, v_Texcoord).x;
+ float bumpRight = texture2D(u_Bump, v_Texcoord+vec2(1.0/1024.0, 0.0)).x;
+ float bumpTop = texture2D(u_Bump, v_Texcoord+vec2(0.0, 1.0/512.0)).x;
+
+ vec3 bump = normalize(vec3(bumpCenter - bumpRight, bumpCenter - bumpTop, 0.2));
+
+ normal = eastNorthUpToEyeCoordinates(v_positionMC, v_Normal)*bump;
+
+
+
// 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 bumpdiffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+ //determine twilight shading mix alpha
+ float dayalpha = pow(1.0-flatdiffuse,5.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;
+ specular = pow(specular, 20.0)*texture2D(u_EarthSpec, v_Texcoord).x;//Choice is arbitrary, map is white/black
+
+ float gammaCorrect = 1.6/1.2; //gamma correct by 1.6/1.2
+
+
+ //======Calculate cloud shadows======
+ float cloudAltitude = 0.075;//Term is relative to globe radius == 1.0
+ vec3 rayOrigin = v_positionMC*(1.0+bumpCenter*cloudAltitude);//Mountains could be as tall as clouds but no taller
+ vec3 rayDir = normalize(u_ModelSpaceDirLight);
+
+
+ vec3 shadowRayIntersectDir = raySphereIntersect(rayOrigin, rayDir, 1.0+cloudAltitude);
+
+ vec2 v_CloudShadowTexcoord = dirInSphereToTexcoords(shadowRayIntersectDir) + vec2(u_time, 0.0);
+ float cloudShadowRayTrans = 1.0;//texture2D(u_CloudTrans, v_CloudShadowTexcoord).x;
+
+ vec3 dayColor = cloudShadowRayTrans*((0.6 * bumpdiffuse) + (0.4 * specular))*texture2D(u_DayDiffuse, v_Texcoord).rgb;
vec3 nightColor = texture2D(u_Night, v_Texcoord).rgb;
- //apply gamma correction to nighttime texture
+
+ //apply gamma correction to nighttime texture (before mixing clouds)
nightColor = pow(nightColor,vec3(gammaCorrect));
-
- vec3 color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor;
+
+ //Mix in cloud data
+ vec2 cloudTexCoords = v_Texcoord + vec2(u_time, 0.0);
+ float cloudTrans = texture2D(u_CloudTrans, cloudTexCoords).x;
+ vec3 cloudColor = texture2D(u_Cloud, cloudTexCoords).rgb;
+
+ dayColor = mix(flatdiffuse*cloudColor, dayColor, cloudTrans);
+ nightColor = mix(vec3(0.0,0.0,0.0), nightColor, cloudTrans);
+
+ float rimFactor = pow(clamp(1.0 + dot(v_Normal, v_Position), 0.0, 1.0),1.5);
+ if(v_Normal.z < 0.0)
+ rimFactor = 0.0;//Minimize visibility of rasterization artifacts.
+
+ vec3 rimColor = rimFactor*vec3(0.25, 0.5, 0.5);
+
+ //Only show rim in daylight
+ vec3 color = rimColor*(1.0-dayalpha) + mix(dayColor, nightColor, dayalpha);
gl_FragColor = vec4(color, 1.0);
}
@@ -109,6 +158,47 @@
bitangentEC.x, bitangentEC.y, bitangentEC.z,
normalEC.x, normalEC.y, normalEC.z);
}
+
+
+ vec3 raySphereIntersect(vec3 ro, vec3 rd, float r)
+ {
+ //Solver parameters
+ float b = dot(rd, ro);
+
+ float radicand = b * b - (dot(ro,ro) - r*r);
+
+ if(radicand < 0.0){
+ return normalize(ro);//If no intersection (should never happen) Assume no deviation from vert
+ }
+
+ float root = sqrt(radicand);
+ float s1 = (-b + root);
+ float s2 = (-b - root);
+
+
+ float s = 0.0;
+ if (s1 < 0.0 && s2 < 0.0) {
+ return normalize(ro);//If no intersection (should never happen) Assume no deviation from vert
+ } else if (s1 > 0.0 && s2 > 0.0) {
+ s = min(s1, s2);
+ } else {
+ s = max(s1, s2);
+ }
+
+ return normalize(ro+s*rd);
+
+ }
+
+ vec2 dirInSphereToTexcoords(vec3 dir)
+ {
+ float th = atan(dir.z, dir.x);
+ float phi = acos(dir.y);
+ float u = (th) / (2.0 * 3.14159265);
+ float v = phi/3.14159265;
+
+ return vec2(u,v);
+ }
+
diff --git a/part2/frag_globe.js b/globe/frag_globe.js
similarity index 93%
rename from part2/frag_globe.js
rename to globe/frag_globe.js
index 1d8a877..1c18966 100644
--- a/part2/frag_globe.js
+++ b/globe/frag_globe.js
@@ -31,7 +31,7 @@
mat4.perspective(45.0, canvas.width/canvas.height, 0.1, 100.0, persp);
var radius = 5.0;
- var azimuth = Math.PI;
+ var azimuth = 0.0;
var elevation = 0.0001;
var eye = sphericalToCartesian(radius, azimuth, elevation);
@@ -48,6 +48,7 @@
var u_ViewLocation;
var u_PerspLocation;
var u_CameraSpaceDirLightLocation;
+ var u_ModelSpaceDirLightLocation;
var u_DayDiffuseLocation;
var u_NightLocation;
var u_CloudLocation;
@@ -76,6 +77,7 @@
u_BumpLocation = gl.getUniformLocation(program,"u_Bump");
u_timeLocation = gl.getUniformLocation(program,"u_time");
u_CameraSpaceDirLightLocation = gl.getUniformLocation(program,"u_CameraSpaceDirLight");
+ u_ModelSpaceDirLightLocation = gl.getUniformLocation(program, "u_ModelSpaceDirLight");
gl.useProgram(program);
})();
@@ -250,13 +252,18 @@
mat4.inverse(mv, invTrans);
mat4.transpose(invTrans);
- var lightdir = vec3.create([1.0, 0.0, 1.0]);
+ var lightdir = vec3.create([1.0, 0.0, 1.0]);//Direction of the light in world space
var lightdest = vec4.create();
vec3.normalize(lightdir);
mat4.multiplyVec4(view, [lightdir[0], lightdir[1], lightdir[2], 0.0], lightdest);
- lightdir = vec3.createFrom(lightdest[0],lightdest[1],lightdest[2]);
- vec3.normalize(lightdir);
-
+ var lightdirCam = vec3.createFrom(lightdest[0],lightdest[1],lightdest[2]);//View Space
+ vec3.normalize(lightdirCam);
+
+
+ var modelInv = mat4.create();
+ mat4.inverse(model, modelInv);
+ mat4.multiplyVec4(modelInv, [lightdir[0], lightdir[1], lightdir[2], 0.0], lightdir);
+
///////////////////////////////////////////////////////////////////////////
// Render
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
@@ -265,8 +272,11 @@
gl.uniformMatrix4fv(u_ViewLocation, false, view);
gl.uniformMatrix4fv(u_PerspLocation, false, persp);
gl.uniformMatrix4fv(u_InvTransLocation, false, invTrans);
-
- gl.uniform3fv(u_CameraSpaceDirLightLocation, lightdir);
+ gl.uniform1f(u_timeLocation, -time*0.1);
+
+
+ gl.uniform3fv(u_ModelSpaceDirLightLocation, lightdir);
+ gl.uniform3fv(u_CameraSpaceDirLightLocation, lightdirCam);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, dayTex);
@@ -313,4 +323,4 @@
initializeTexture(transTex, "earthtrans1024.png");
initializeTexture(lightTex, "earthlight1024.png");
initializeTexture(specTex, "earthspec1024.png");
-}());
+}());
\ No newline at end of file
diff --git a/part1/gl-matrix.js b/globe/gl-matrix.js
similarity index 100%
rename from part1/gl-matrix.js
rename to globe/gl-matrix.js
diff --git a/part1/webGLUtility.js b/globe/webGLUtility.js
similarity index 100%
rename from part1/webGLUtility.js
rename to globe/webGLUtility.js
diff --git a/resources/emptyGrid.png b/resources/emptyGrid.png
deleted file mode 100644
index 2ee870f..0000000
Binary files a/resources/emptyGrid.png and /dev/null differ
diff --git a/resources/globe_bumpmap.png b/resources/globe_bumpmap.png
index fa91a9f..d3392c5 100644
Binary files a/resources/globe_bumpmap.png and b/resources/globe_bumpmap.png differ
diff --git a/resources/globe_day.png b/resources/globe_day.png
deleted file mode 100644
index e3cbf1f..0000000
Binary files a/resources/globe_day.png and /dev/null differ
diff --git a/resources/globe_daycloud.png b/resources/globe_daycloud.png
deleted file mode 100644
index ff00096..0000000
Binary files a/resources/globe_daycloud.png and /dev/null differ
diff --git a/resources/globe_initial.png b/resources/globe_initial.png
deleted file mode 100644
index 1e3bde5..0000000
Binary files a/resources/globe_initial.png and /dev/null differ
diff --git a/resources/globe_night.png b/resources/globe_night.png
deleted file mode 100644
index 6401768..0000000
Binary files a/resources/globe_night.png and /dev/null differ
diff --git a/resources/globe_nightcloud.png b/resources/globe_nightcloud.png
deleted file mode 100644
index 781aec0..0000000
Binary files a/resources/globe_nightcloud.png and /dev/null differ
diff --git a/resources/globe_nobumpmap.PNG b/resources/globe_nobumpmap.PNG
new file mode 100644
index 0000000..2080d71
Binary files /dev/null and b/resources/globe_nobumpmap.PNG differ
diff --git a/resources/globe_noshadow.PNG b/resources/globe_noshadow.PNG
new file mode 100644
index 0000000..1348284
Binary files /dev/null and b/resources/globe_noshadow.PNG differ
diff --git a/resources/globe_nospecmap.png b/resources/globe_nospecmap.png
deleted file mode 100644
index c370735..0000000
Binary files a/resources/globe_nospecmap.png and /dev/null differ
diff --git a/resources/globe_se_asia.PNG b/resources/globe_se_asia.PNG
new file mode 100644
index 0000000..fb88112
Binary files /dev/null and b/resources/globe_se_asia.PNG differ
diff --git a/resources/globe_shadows.PNG b/resources/globe_shadows.PNG
new file mode 100644
index 0000000..e963638
Binary files /dev/null and b/resources/globe_shadows.PNG differ
diff --git a/resources/globe_specmap.png b/resources/globe_specmap.png
deleted file mode 100644
index 7ff01a5..0000000
Binary files a/resources/globe_specmap.png and /dev/null differ
diff --git a/resources/globe_sunrise.PNG b/resources/globe_sunrise.PNG
new file mode 100644
index 0000000..f1a1a04
Binary files /dev/null and b/resources/globe_sunrise.PNG differ
diff --git a/resources/globe_twilight.png b/resources/globe_twilight.png
index ac5ea5c..8d11d3d 100644
Binary files a/resources/globe_twilight.png and b/resources/globe_twilight.png differ
diff --git a/resources/simplex.gif b/resources/simplex.gif
new file mode 100644
index 0000000..e2e4af7
Binary files /dev/null and b/resources/simplex.gif differ
diff --git a/resources/simplex.wmv b/resources/simplex.wmv
new file mode 100644
index 0000000..7654792
Binary files /dev/null and b/resources/simplex.wmv differ
diff --git a/resources/sine.gif b/resources/sine.gif
new file mode 100644
index 0000000..4c51330
Binary files /dev/null and b/resources/sine.gif differ
diff --git a/resources/sine.wmv b/resources/sine.wmv
new file mode 100644
index 0000000..8eb78c4
Binary files /dev/null and b/resources/sine.wmv differ
diff --git a/resources/water.gif b/resources/water.gif
new file mode 100644
index 0000000..27b578e
Binary files /dev/null and b/resources/water.gif differ
diff --git a/resources/water.wmv b/resources/water.wmv
new file mode 100644
index 0000000..5d513f5
Binary files /dev/null and b/resources/water.wmv differ
diff --git a/part2/gl-matrix.js b/waves/gl-matrix.js
similarity index 100%
rename from part2/gl-matrix.js
rename to waves/gl-matrix.js
diff --git a/part1/noise3D.js b/waves/noise3D.js
similarity index 100%
rename from part1/noise3D.js
rename to waves/noise3D.js
diff --git a/part1/simplex.vert b/waves/simplex.vert
similarity index 100%
rename from part1/simplex.vert
rename to waves/simplex.vert
diff --git a/waves/simplex_wave.html b/waves/simplex_wave.html
new file mode 100644
index 0000000..15b6c76
--- /dev/null
+++ b/waves/simplex_wave.html
@@ -0,0 +1,86 @@
+
+
+
+Vertex Simplex Noise Wave
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/part1/vert_wave.html b/waves/vert_wave.html
similarity index 69%
rename from part1/vert_wave.html
rename to waves/vert_wave.html
index 57107ca..3f6f690 100644
--- a/part1/vert_wave.html
+++ b/waves/vert_wave.html
@@ -1,7 +1,7 @@
-Vertex Wave
+Vertex Sine Wave
@@ -14,10 +14,14 @@
attribute vec2 position;
uniform mat4 u_modelViewPerspective;
-
+ uniform float u_time;
+ varying float height;
+
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);
+ height = s_contrib*t_contrib;
gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
}
@@ -25,9 +29,11 @@
diff --git a/part1/vert_wave.js b/waves/vert_wave.js
similarity index 95%
rename from part1/vert_wave.js
rename to waves/vert_wave.js
index b90b9cf..a43f0a3 100644
--- a/part1/vert_wave.js
+++ b/waves/vert_wave.js
@@ -3,8 +3,8 @@
/*global window,document,Float32Array,Uint16Array,mat4,vec3,snoise*/
/*global getShaderSource,createWebGLContext,createProgram*/
- var NUM_WIDTH_PTS = 32;
- var NUM_HEIGHT_PTS = 32;
+ var NUM_WIDTH_PTS = 200;
+ var NUM_HEIGHT_PTS = 200;
var message = document.getElementById("message");
var canvas = document.getElementById("canvas");
@@ -31,6 +31,8 @@
var positionLocation = 0;
var heightLocation = 1;
var u_modelViewPerspectiveLocation;
+ var u_timeLocation;
+
(function initializeShader() {
var program;
@@ -39,8 +41,8 @@
var program = createProgram(context, vs, fs, message);
context.bindAttribLocation(program, positionLocation, "position");
+ u_timeLocation = context.getUniformLocation(program,"u_time");
u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
-
context.useProgram(program);
})();
@@ -126,6 +128,8 @@
numberOfIndices = indices.length;
})();
+ var time = 0.0;
+ var delT = 0.01;
(function animate(){
///////////////////////////////////////////////////////////////////////////
// Update
@@ -137,12 +141,14 @@
mat4.multiply(view, model, mv);
var mvp = mat4.create();
mat4.multiply(persp, mv, mvp);
-
+ time = time + delT;
+
///////////////////////////////////////////////////////////////////////////
// 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);
diff --git a/waves/water_wave.html b/waves/water_wave.html
new file mode 100644
index 0000000..7623151
--- /dev/null
+++ b/waves/water_wave.html
@@ -0,0 +1,51 @@
+
+
+
+Water Wave
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/part2/webGLUtility.js b/waves/webGLUtility.js
similarity index 100%
rename from part2/webGLUtility.js
rename to waves/webGLUtility.js