From 9442dfd7a5a3b917aa827d030bbd68ce56918468 Mon Sep 17 00:00:00 2001 From: Vimanyu Jain Date: Thu, 7 Nov 2013 01:58:20 -0500 Subject: [PATCH 1/8] base workflow working --- part1/vert_wave.html | 11 +++-- part1/vert_wave.js | 9 ++-- part1/vert_wave_simplex.html | 86 ++++++++++++++++++++++++++++++++++++ part2/frag_globe.html | 30 ++++++++++--- part2/frag_globe.js | 3 +- 5 files changed, 126 insertions(+), 13 deletions(-) create mode 100644 part1/vert_wave_simplex.html diff --git a/part1/vert_wave.html b/part1/vert_wave.html index 57107ca..972d256 100644 --- a/part1/vert_wave.html +++ b/part1/vert_wave.html @@ -14,20 +14,25 @@ attribute vec2 position; uniform mat4 u_modelViewPerspective; + uniform float u_time; + varying vec3 ocolor; 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; gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0); + ocolor = mix(vec3(1.0, 0.2, 0.0) ,vec3(0.0, 0.8, 1.0),height); } diff --git a/part1/vert_wave.js b/part1/vert_wave.js index b90b9cf..57bfbbd 100644 --- a/part1/vert_wave.js +++ b/part1/vert_wave.js @@ -31,6 +31,7 @@ var positionLocation = 0; var heightLocation = 1; var u_modelViewPerspectiveLocation; + var u_timeLocation ; (function initializeShader() { var program; @@ -40,7 +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); })(); @@ -83,6 +84,7 @@ var positionsIndex = 0; var indicesIndex = 0; var length; + for (var j = 0; j < NUM_WIDTH_PTS; ++j) { @@ -125,7 +127,7 @@ uploadMesh(positions, heights, indices); numberOfIndices = indices.length; })(); - + var time = 0; (function animate(){ /////////////////////////////////////////////////////////////////////////// // Update @@ -140,8 +142,9 @@ /////////////////////////////////////////////////////////////////////////// // Render + time += 0.001; context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT); - + context.uniform1f(u_timeLocation,time); context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp); context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0); diff --git a/part1/vert_wave_simplex.html b/part1/vert_wave_simplex.html new file mode 100644 index 0000000..77bee33 --- /dev/null +++ b/part1/vert_wave_simplex.html @@ -0,0 +1,86 @@ + + + +Vertex Wave + + + + + +
+ + + + + + + + + + + + diff --git a/part2/frag_globe.html b/part2/frag_globe.html index 6aa5609..ec022f3 100644 --- a/part2/frag_globe.html +++ b/part2/frag_globe.html @@ -78,21 +78,39 @@ // 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 rim = dot(v_Position,v_Normal) + 1.0 ; + vec4 rimColor = vec4(0.0,0.0,0.0,0.0); + if (rim > 0.0) + rimColor = vec4(rim/4.0, rim/2.0, rim/2.0, 0.0); + vec3 center = texture2D(u_Bump, vec2(v_Texcoord.x,v_Texcoord.y)).rgb ; + vec3 right = texture2D(u_Bump, vec2(v_Texcoord.x + 1.0/1024.0,v_Texcoord.y)).rgb; + vec3 top = texture2D(u_Bump, vec2(v_Texcoord.x ,v_Texcoord.y + 1.0/512.0)).rgb; + normal = normalize( eastNorthUpToEyeCoordinates(v_positionMC, v_Normal) * normalize(vec3(center.x - right.x, center.x - top.x, 0.2)) ); + + 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); - + vec3 specColor = texture2D(u_EarthSpec, v_Texcoord).rgb; + // Condition to have specular only on + if(specColor.x == 0.0) + specular = 0.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)); - - vec3 color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor; - gl_FragColor = vec4(color, 1.0); + nightColor = pow(nightColor,vec3(gammaCorrect)); + + //Day color on planet + vec3 cloudColor = texture2D(u_Cloud, vec2( v_Texcoord.x + u_time ,v_Texcoord.y )).rgb; + vec3 cloudTransColor = texture2D(u_CloudTrans , vec2( v_Texcoord.x + u_time ,v_Texcoord.y )).rgb; + vec3 color = mix(cloudColor ,((0.6 * diffuse) + (0.4 * specular)) * dayColor, cloudTransColor.x); + nightColor = mix(vec3(0.0,0.0,0.0),nightColor, cloudTransColor.x); + gl_FragColor = vec4(mix(nightColor,color ,diffuse), 1.0) + rimColor; } mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC) diff --git a/part2/frag_globe.js b/part2/frag_globe.js index 1d8a877..6ff72ee 100644 --- a/part2/frag_globe.js +++ b/part2/frag_globe.js @@ -286,8 +286,9 @@ gl.activeTexture(gl.TEXTURE5); gl.bindTexture(gl.TEXTURE_2D, specTex); gl.uniform1i(u_EarthSpecLocation, 5); + gl.uniform1f(u_timeLocation, time); gl.drawElements(gl.TRIANGLES, numberOfIndices, gl.UNSIGNED_SHORT,0); - + time += 0.001; window.requestAnimFrame(animate); } From 957d337075103b5fc9361e4dc4d05d41c7a6bb7e Mon Sep 17 00:00:00 2001 From: Vivek Reddy Date: Thu, 7 Nov 2013 02:19:18 -0500 Subject: [PATCH 2/8] bump mappoing added --- part2/frag_globe.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/part2/frag_globe.html b/part2/frag_globe.html index ec022f3..2d7108b 100644 --- a/part2/frag_globe.html +++ b/part2/frag_globe.html @@ -78,10 +78,13 @@ // normalized eye-to-position vector in camera coordinates vec3 eyeToPosition = normalize(v_Position); + // Rim color to create a atmospheric effect float rim = dot(v_Position,v_Normal) + 1.0 ; vec4 rimColor = vec4(0.0,0.0,0.0,0.0); if (rim > 0.0) rimColor = vec4(rim/4.0, rim/2.0, rim/2.0, 0.0); + + // The color of texture for bump mapping vec3 center = texture2D(u_Bump, vec2(v_Texcoord.x,v_Texcoord.y)).rgb ; vec3 right = texture2D(u_Bump, vec2(v_Texcoord.x + 1.0/1024.0,v_Texcoord.y)).rgb; vec3 top = texture2D(u_Bump, vec2(v_Texcoord.x ,v_Texcoord.y + 1.0/512.0)).rgb; From cd5bc91943d4a6769c88ec32d597b482791f9599 Mon Sep 17 00:00:00 2001 From: Vivek Reddy Date: Thu, 7 Nov 2013 20:16:44 -0500 Subject: [PATCH 3/8] Additional extra features added , new wave and height field color variation . --- part1/vert_wave_custom.html | 43 +++++++++++++++++++++++++++++++++++++ part2/frag_globe.html | 4 +++- 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 part1/vert_wave_custom.html diff --git a/part1/vert_wave_custom.html b/part1/vert_wave_custom.html new file mode 100644 index 0000000..6dec923 --- /dev/null +++ b/part1/vert_wave_custom.html @@ -0,0 +1,43 @@ + + + +Vertex Wave + + + + + +
+ + + + + + + + + + + + diff --git a/part2/frag_globe.html b/part2/frag_globe.html index 2d7108b..9fd0e55 100644 --- a/part2/frag_globe.html +++ b/part2/frag_globe.html @@ -113,7 +113,9 @@ vec3 cloudTransColor = texture2D(u_CloudTrans , vec2( v_Texcoord.x + u_time ,v_Texcoord.y )).rgb; vec3 color = mix(cloudColor ,((0.6 * diffuse) + (0.4 * specular)) * dayColor, cloudTransColor.x); nightColor = mix(vec3(0.0,0.0,0.0),nightColor, cloudTransColor.x); - gl_FragColor = vec4(mix(nightColor,color ,diffuse), 1.0) + rimColor; + + vec4 bumpColor = vec4(mix(vec3(0.0,0.0,0.0),vec3(1.0,0.0,1.0), center.x),0.0); + gl_FragColor = vec4(mix(nightColor,color ,diffuse), 1.0) + rimColor + bumpColor; } mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC) From 2f3cec56fee571d1f0f97510e046910cd3d0bd3a Mon Sep 17 00:00:00 2001 From: Vivek Reddy Date: Fri, 8 Nov 2013 14:18:51 -0500 Subject: [PATCH 4/8] globe with keyboard interactivity is added --- part2/frag_globe.html | 6 ++++-- part2/frag_globe.js | 24 ++++++++++++++++++++++++ 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/part2/frag_globe.html b/part2/frag_globe.html index 9fd0e55..788d1bc 100644 --- a/part2/frag_globe.html +++ b/part2/frag_globe.html @@ -62,6 +62,7 @@ uniform sampler2D u_Bump; uniform float u_time; + uniform float u_button; uniform mat4 u_InvTrans; varying vec3 v_Normal; // surface normal in camera coordinates @@ -113,8 +114,9 @@ vec3 cloudTransColor = texture2D(u_CloudTrans , vec2( v_Texcoord.x + u_time ,v_Texcoord.y )).rgb; vec3 color = mix(cloudColor ,((0.6 * diffuse) + (0.4 * specular)) * dayColor, cloudTransColor.x); nightColor = mix(vec3(0.0,0.0,0.0),nightColor, cloudTransColor.x); - - vec4 bumpColor = vec4(mix(vec3(0.0,0.0,0.0),vec3(1.0,0.0,1.0), center.x),0.0); + vec4 bumpColor =vec4(0.0,0.0,0.0,0.0); + if (u_button == 1.0) + bumpColor = vec4(mix(vec3(0.0,0.0,0.0),vec3(1.0,0.0,1.0), center.x),0.0); gl_FragColor = vec4(mix(nightColor,color ,diffuse), 1.0) + rimColor + bumpColor; } diff --git a/part2/frag_globe.js b/part2/frag_globe.js index 6ff72ee..0314447 100644 --- a/part2/frag_globe.js +++ b/part2/frag_globe.js @@ -55,6 +55,7 @@ var u_EarthSpecLocation; var u_BumpLocation; var u_timeLocation; + var u_buttonLocation; (function initializeShader() { var vs = getShaderSource(document.getElementById("vs")); @@ -75,6 +76,7 @@ u_EarthSpecLocation = gl.getUniformLocation(program,"u_EarthSpec"); u_BumpLocation = gl.getUniformLocation(program,"u_Bump"); u_timeLocation = gl.getUniformLocation(program,"u_time"); + u_buttonLocation = gl.getUniformLocation(program,"u_button"); u_CameraSpaceDirLightLocation = gl.getUniformLocation(program,"u_CameraSpaceDirLight"); gl.useProgram(program); @@ -176,6 +178,7 @@ })(); var time = 0; + var displayBump = 0.0 ; var mouseLeftDown = false; var mouseRightDown = false; var lastMouseX = null; @@ -227,11 +230,31 @@ lastMouseX = newX; lastMouseY = newY; } + var currentlyPressedKeys = {}; + + function handleKeyDown(event) { + currentlyPressedKeys[event.keyCode] = true; + + if (String.fromCharCode(event.keyCode) == "B") { + displayBump = 1.0; + } + } + + + function handleKeyUp(event) { + currentlyPressedKeys[event.keyCode] = false; + + if (String.fromCharCode(event.keyCode) == "B") { + displayBump = 0.0; + } + } canvas.onmousedown = handleMouseDown; canvas.oncontextmenu = function(ev) {return false;}; document.onmouseup = handleMouseUp; document.onmousemove = handleMouseMove; + document.onkeydown = handleKeyDown; + document.onkeyup = handleKeyUp; function animate() { @@ -287,6 +310,7 @@ gl.bindTexture(gl.TEXTURE_2D, specTex); gl.uniform1i(u_EarthSpecLocation, 5); gl.uniform1f(u_timeLocation, time); + gl.uniform1f(u_buttonLocation, displayBump); gl.drawElements(gl.TRIANGLES, numberOfIndices, gl.UNSIGNED_SHORT,0); time += 0.001; From 2d15115c07237184d64a7d52bd8c3f91182e04f3 Mon Sep 17 00:00:00 2001 From: Vivek Reddy Date: Fri, 8 Nov 2013 18:55:00 -0500 Subject: [PATCH 5/8] Renders taken , performance evaluation done ,with timer has been added . --- part2/frag_globe.html | 5 ++++- part2/frag_globe.js | 21 ++++++++++++++++++--- renders/globe1.png | Bin 0 -> 776868 bytes renders/globe2.png | Bin 0 -> 483061 bytes renders/swave.png | Bin 0 -> 298218 bytes 5 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 renders/globe1.png create mode 100644 renders/globe2.png create mode 100644 renders/swave.png diff --git a/part2/frag_globe.html b/part2/frag_globe.html index 788d1bc..2657c57 100644 --- a/part2/frag_globe.html +++ b/part2/frag_globe.html @@ -7,8 +7,11 @@ +
Elapsed time:
- + + + + + + + + + + + +