From 0e0a97a999347378d544b2abf336632df93ae28f Mon Sep 17 00:00:00 2001 From: SijieTian Date: Sat, 2 Nov 2013 16:47:29 -0400 Subject: [PATCH 01/11] Part 1 done --- part1/vert_wave.html | 18 ++++++- part1/vert_wave.js | 12 ++++- part1/vert_wave_custom.html | 56 +++++++++++++++++++++ part1/vert_wave_simplex.html | 97 ++++++++++++++++++++++++++++++++++++ part2/frag_globe.html | 29 ++++++++++- part2/frag_globe.js | 3 ++ 6 files changed, 209 insertions(+), 6 deletions(-) create mode 100644 part1/vert_wave_custom.html create mode 100644 part1/vert_wave_simplex.html diff --git a/part1/vert_wave.html b/part1/vert_wave.html index 57107ca..13acb94 100644 --- a/part1/vert_wave.html +++ b/part1/vert_wave.html @@ -15,9 +15,21 @@ uniform mat4 u_modelViewPerspective; + uniform float u_time; + + varying vec3 f_color; + 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; + + vec3 highColor = vec3(1.0, 2.0, 0.0); + vec3 lowColor = vec3(0.0, 0.8, 1.0); + + f_color = mix(lowColor, highColor, height); + gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0); } @@ -25,9 +37,11 @@ diff --git a/part1/vert_wave.js b/part1/vert_wave.js index b90b9cf..49549b6 100644 --- a/part1/vert_wave.js +++ b/part1/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 = 64; + var NUM_HEIGHT_PTS = 64; 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; + var deltaTime = 0; (function initializeShader() { var program; @@ -41,6 +43,8 @@ context.bindAttribLocation(program, positionLocation, "position"); u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective"); + u_timeLocation = context.getUniformLocation(program, "u_time"); + context.useProgram(program); })(); @@ -138,11 +142,15 @@ var mvp = mat4.create(); mat4.multiply(persp, mv, mvp); + deltaTime += 0.1; /////////////////////////////////////////////////////////////////////////// // Render context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT); context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp); + + context.uniform1f(u_timeLocation, deltaTime); + context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0); window.requestAnimFrame(animate); diff --git a/part1/vert_wave_custom.html b/part1/vert_wave_custom.html new file mode 100644 index 0000000..c092e1a --- /dev/null +++ b/part1/vert_wave_custom.html @@ -0,0 +1,56 @@ + + + +Vertex Wave + + + + + +
+ + + + + + + + + + + + diff --git a/part1/vert_wave_simplex.html b/part1/vert_wave_simplex.html new file mode 100644 index 0000000..107e639 --- /dev/null +++ b/part1/vert_wave_simplex.html @@ -0,0 +1,97 @@ + + + +Vertex Wave + + + + + +
+ + + + + + + + + + + + diff --git a/part2/frag_globe.html b/part2/frag_globe.html index 6aa5609..c742a7f 100644 --- a/part2/frag_globe.html +++ b/part2/frag_globe.html @@ -77,21 +77,46 @@ vec3 normal = normalize(v_Normal); // normalized eye-to-position vector in camera coordinates vec3 eyeToPosition = normalize(v_Position); + + // bump mapping + vec3 bumpTextureCenter = texture2D(u_Bump, v_Texcoord).rgb; + vec3 bumpTextureRight = texture2D(u_Bump, vec2(v_Texcoord.x + 1.0/1024.0, v_Texcoord.y)).rgb; + vec3 bumpTextureTop = texture2D(u_Bump, vec2(v_Texcoord.x, v_Texcoord.y - 1.0/512.0)).rgb; + float center = length(bumpTextureCenter); + float right = length(bumpTextureRight); + float top = length(bumpTextureTop); + vec3 bumpNormal = normalize(vec3(center - right, center - top, 0.08)).xyz; + //change bump normal to eye coordinate + mat3 result = eastNorthUpToEyeCoordinates(v_positionMC, bumpNormal); + bumpNormal = normalize(vec3(result[0][2], result[1][2], result[2][2])); float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0); + float bumpDiffuse = clamp(dot(u_CameraSpaceDirLight, bumpNormal), 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 + float gammaCorrect = 1.0/1.1; //gamma correct by 1/1.2 + vec3 earthColor = texture2D(u_EarthSpec, v_Texcoord).rgb; + if(earthColor.rgb == vec3(0.0,0.0,0.0)) + specular = 0.0; 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; + //offset value + float s = (2.0 * u_time * 20.0)/1024.0; + vec3 cloudColor = texture2D(u_Cloud, vec2(v_Texcoord.x + s, v_Texcoord.y)).rgb; + vec3 cloudTransColor = texture2D(u_CloudTrans, vec2(v_Texcoord.x + s, v_Texcoord.y)).rgb; + vec3 dayCloudColor = mix(cloudColor, vec3(0.0,0.0,0.0), cloudTransColor); + + nightColor = mix(vec3(0.0,0.0,0.0), nightColor,cloudTransColor); + + vec3 color = mix(nightColor, ((0.6 * bumpDiffuse) + (0.4 * specular)) * (dayColor), diffuse) + + dayCloudColor * diffuse * 0.6; gl_FragColor = vec4(color, 1.0); } diff --git a/part2/frag_globe.js b/part2/frag_globe.js index 6e667be..546b311 100644 --- a/part2/frag_globe.js +++ b/part2/frag_globe.js @@ -291,6 +291,7 @@ gl.uniform3fv(u_CameraSpaceDirLightLocation, lightdir); + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, dayTex); gl.uniform1i(u_DayDiffuseLocation, 0); @@ -310,6 +311,8 @@ 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; From eadea1b857e904415339ff6611a8850cb36be587 Mon Sep 17 00:00:00 2001 From: SijieTian Date: Tue, 5 Nov 2013 08:48:39 -0500 Subject: [PATCH 02/11] Part 2 done --- part1/vert_wave_simplex.html | 2 +- part2/frag_globe.html | 45 +++++++++++++++++++++++++----------- 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/part1/vert_wave_simplex.html b/part1/vert_wave_simplex.html index 107e639..fc1863a 100644 --- a/part1/vert_wave_simplex.html +++ b/part1/vert_wave_simplex.html @@ -72,7 +72,7 @@ f_color = mix(lowColor, highColor, height); - gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0); + gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0); } diff --git a/part2/frag_globe.html b/part2/frag_globe.html index 9decb7c..f15a53d 100644 --- a/part2/frag_globe.html +++ b/part2/frag_globe.html @@ -79,16 +79,16 @@ vec3 eyeToPosition = normalize(v_Position); // bump mapping - vec3 bumpTextureCenter = texture2D(u_Bump, v_Texcoord).rgb; - vec3 bumpTextureRight = texture2D(u_Bump, vec2(v_Texcoord.x + 1.0/1024.0, v_Texcoord.y)).rgb; - vec3 bumpTextureTop = texture2D(u_Bump, vec2(v_Texcoord.x, v_Texcoord.y - 1.0/512.0)).rgb; + vec3 bumpTextureCenter = (texture2D(u_Bump, v_Texcoord).rgb); + vec3 bumpTextureRight = (texture2D(u_Bump, vec2(v_Texcoord.s + 1.0/1024.0, v_Texcoord.t)).rgb); + vec3 bumpTextureTop = (texture2D(u_Bump, vec2(v_Texcoord.s, v_Texcoord.t + 1.0/512.0)).rgb); float center = length(bumpTextureCenter); float right = length(bumpTextureRight); float top = length(bumpTextureTop); - vec3 bumpNormal = normalize(vec3(center - right, center - top, 0.08)).xyz; - //change bump normal to eye coordinate - mat3 result = eastNorthUpToEyeCoordinates(v_positionMC, bumpNormal); - bumpNormal = normalize(vec3(result[0][2], result[1][2], result[2][2])); + + vec3 bumpNormal = normalize(vec3(center - right, center - top, 0.2)).xyz; + //change bump normal to eye coordinate + bumpNormal = normalize(eastNorthUpToEyeCoordinates(v_positionMC, normal) * bumpNormal); //diffuse lighting float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0); @@ -98,16 +98,30 @@ float specular = max(dot(toReflectedLight, -eyeToPosition), 0.0); specular = pow(specular, 20.0); - float gammaCorrect = 1.0/1.1; //gamma correct by 1/1.2 + float gammaCorrect = 1.0/1.2; //gamma correct by 1/1.2 - vec3 earthColor = texture2D(u_EarthSpec, v_Texcoord).rgb; - if(earthColor.rgb == vec3(0.0,0.0,0.0)) - specular = 0.0; + 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 earthColor = texture2D(u_EarthSpec, v_Texcoord).rgb; + specular *= length(earthColor); + // if(length(earthColor) == 0.0) + // specular = 0.0; + // else{ + // float s_contrib = sin(v_positionMC.x*2.0*3.14159 + u_time*10.0); + // float t_contrib = cos(v_positionMC.y*2.0*3.14159 + u_time*10.0); + // float height = s_contrib*t_contrib; + // //v_positionMC.y = height; + // //eastNorthUpToEyeCoordinates(v_positionMC,); + // vec3 highColor = vec3(0.0, 0.2, 0.7); + // vec3 lowColor = vec3(0.0, 0.8, 1.0); + // //bumpDiffuse = diffuse; + // // dayColor = mix(lowColor, highColor, height); + // } + //offset value float s = (2.0 * u_time * 20.0)/1024.0; vec3 cloudColor = texture2D(u_Cloud, vec2(v_Texcoord.x + s, v_Texcoord.y)).rgb; @@ -118,12 +132,13 @@ //rim lighting float rimFactor = dot(v_Position, v_Normal) + 1.0; - vec4 rimColor = vec4(rimFactor/4.0, rimFactor/2.0, rimFactor/1.0, 1); + vec4 rimColor = vec4(rimFactor/4.0, rimFactor/2.0, rimFactor/2.0, 1); vec3 color = mix(nightColor, ((0.6 * bumpDiffuse) + (0.4 * specular)) * (dayColor), diffuse) - + dayCloudColor * diffuse * 0.6; + + mix(vec3(0.0), dayCloudColor * diffuse * 0.6, diffuse); if(rimFactor > 0.0) - color += rimFactor * rimColor.rgb; + color += rimColor.rgb; + gl_FragColor = vec4(color, 1.0); } @@ -136,6 +151,8 @@ // normalized surface bitangent in eye coordinates vec3 bitangentEC = normalize(cross(normalEC, tangentEC)); + //normalEC = normalize(cross(tangentEC, bitangentEC)); + return mat3( tangentEC.x, tangentEC.y, tangentEC.z, bitangentEC.x, bitangentEC.y, bitangentEC.z, From bbd11492073e171da1fc9d1052dd53c54237b06a Mon Sep 17 00:00:00 2001 From: SijieTian Date: Tue, 5 Nov 2013 19:01:51 -0500 Subject: [PATCH 03/11] Kind of Water --- part2/frag_globe.html | 126 ++++++++++++++++++++++++++++++++++++------ 1 file changed, 108 insertions(+), 18 deletions(-) diff --git a/part2/frag_globe.html b/part2/frag_globe.html index f15a53d..c6ce272 100644 --- a/part2/frag_globe.html +++ b/part2/frag_globe.html @@ -71,6 +71,47 @@ mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC); + 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); + } + + void main(void) { // surface normal - normalized after rasterization @@ -98,44 +139,93 @@ 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 - + float gammaCorrect = 1.0/1.3; //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)); + //dayColor = pow(dayColor, vec3(gammaCorrect)); vec3 earthColor = texture2D(u_EarthSpec, v_Texcoord).rgb; specular *= length(earthColor); - // if(length(earthColor) == 0.0) - // specular = 0.0; - // else{ - // float s_contrib = sin(v_positionMC.x*2.0*3.14159 + u_time*10.0); - // float t_contrib = cos(v_positionMC.y*2.0*3.14159 + u_time*10.0); - // float height = s_contrib*t_contrib; - // //v_positionMC.y = height; - // //eastNorthUpToEyeCoordinates(v_positionMC,); - // vec3 highColor = vec3(0.0, 0.2, 0.7); - // vec3 lowColor = vec3(0.0, 0.8, 1.0); - // //bumpDiffuse = diffuse; - // // dayColor = mix(lowColor, highColor, height); - // } + + if(length(earthColor) >= 0.1) + { + //float dis = distance(v_Texcoord, vec2(0.5,0.5))*10.0; + // float timeScale = 2.0; + // float scaler = 0.9; + // vec2 simplexVec = vec2(u_time*timeScale, v_Texcoord.s); + // float ran = simplexNoise(simplexVec); + // float s_contrib = sin(v_Texcoord.x*2.0*3.14159*ran + u_time*timeScale); + // float t_contrib = cos(v_Texcoord.y*2.0*3.14159*ran + u_time*timeScale); + // //float len = length(vec2(s_contrib, t_contrib)); + // float heightCenter = s_contrib*t_contrib*scaler; + // //float heightCenter = sin(len)/len; + + // simplexVec = vec2(u_time*timeScale, (v_Texcoord.s + 1.0/1024.0)); + // ran = simplexNoise(simplexVec); + // s_contrib = sin((v_Texcoord.s + 1.0/1024.0)*2.0*3.14159*ran + u_time*timeScale); + // t_contrib = cos(v_Texcoord.t*2.0*3.14159*ran + u_time*timeScale); + // //len = length(vec2(s_contrib, t_contrib)); + // float heightRight = s_contrib*t_contrib*scaler; + // //float heightRight = sin(len)/len; + + // simplexVec = vec2(u_time*timeScale, (v_Texcoord.t + 1.0/512.0)); + // ran = simplexNoise(simplexVec); + // s_contrib = sin(v_Texcoord.s*2.0*3.14159*ran + u_time*timeScale); + // t_contrib = cos((v_Texcoord.t + 1.0/512.0)*2.0*3.14159*ran + u_time*timeScale); + // //len = length(vec2(s_contrib, t_contrib)); + // float heightTop = s_contrib*t_contrib*scaler; + // //float heightTop = sin(len)/len; + + float timeScale = 7.0; + float scaler = 180.0; + vec2 simplexVec = vec2(v_Texcoord.s * scaler, v_Texcoord.t * scaler); + float s_contrib = simplexNoise(simplexVec); + float t_contrib = simplexNoise(vec2(s_contrib,u_time*timeScale)); + float heightCenter = s_contrib*t_contrib; + + simplexVec = vec2((v_Texcoord.s + 1.0/1024.0)*scaler, v_Texcoord.t * scaler); + s_contrib = simplexNoise(simplexVec); + t_contrib = simplexNoise(vec2(s_contrib,u_time*timeScale)); + float heightRight = s_contrib*t_contrib; + + simplexVec = vec2(v_Texcoord.s * scaler, (v_Texcoord.t + 1.0/768.0)*scaler); + s_contrib = simplexNoise(simplexVec); + t_contrib = simplexNoise(vec2(s_contrib,u_time*timeScale)); + float heightTop = s_contrib*t_contrib; + + vec3 seasNormal = normalize(vec3(heightCenter - heightRight, heightCenter - heightTop, 0.2)); + seasNormal = normalize(eastNorthUpToEyeCoordinates(v_positionMC, normal) * seasNormal); + + // toReflectedLight = reflect(-u_CameraSpaceDirLight, seasNormal); + // specular = max(dot(toReflectedLight, -eyeToPosition), 0.0); + // specular = pow(specular, 20.0); + + bumpDiffuse = clamp(dot(u_CameraSpaceDirLight, seasNormal), 0.0, 1.0); + + vec3 highColor = vec3(0.0, 0.2, 0.7); + vec3 lowColor = vec3(0.7, 0.8, 1.0); + } //offset value - float s = (2.0 * u_time * 20.0)/1024.0; + float s = (5.0 * u_time * 20.0)/1024.0; vec3 cloudColor = texture2D(u_Cloud, vec2(v_Texcoord.x + s, v_Texcoord.y)).rgb; vec3 cloudTransColor = texture2D(u_CloudTrans, vec2(v_Texcoord.x + s, v_Texcoord.y)).rgb; vec3 dayCloudColor = mix(cloudColor, vec3(0.0,0.0,0.0), cloudTransColor); - nightColor = mix(vec3(0.0,0.0,0.0), nightColor,cloudTransColor); + //for test puprose + //dayCloudColor = vec3(0.0); + + nightColor = mix(vec3(0.0,0.0,0.0), nightColor, cloudTransColor); //rim lighting float rimFactor = dot(v_Position, v_Normal) + 1.0; vec4 rimColor = vec4(rimFactor/4.0, rimFactor/2.0, rimFactor/2.0, 1); vec3 color = mix(nightColor, ((0.6 * bumpDiffuse) + (0.4 * specular)) * (dayColor), diffuse) - + mix(vec3(0.0), dayCloudColor * diffuse * 0.6, diffuse); + + dayCloudColor * diffuse * 0.6; if(rimFactor > 0.0) color += rimColor.rgb; From 9c9cd3925b83a9836ec025b47d2f29069d52366c Mon Sep 17 00:00:00 2001 From: SijieTian Date: Fri, 8 Nov 2013 18:55:06 -0500 Subject: [PATCH 04/11] Part 2 done --- README.md | 3 + part2/frag_globe.html | 97 +++++++-------- part2/frag_globe.js | 267 ++++++++++++++++++++++++++++++++++++------ part2/space_bk.jpg | Bin 0 -> 114902 bytes part2/space_dn.jpg | Bin 0 -> 47920 bytes part2/space_ft.jpg | Bin 0 -> 88616 bytes part2/space_lf.jpg | Bin 0 -> 70469 bytes part2/space_rt.jpg | Bin 0 -> 66767 bytes part2/space_up.jpg | Bin 0 -> 63320 bytes 9 files changed, 288 insertions(+), 79 deletions(-) create mode 100644 part2/space_bk.jpg create mode 100644 part2/space_dn.jpg create mode 100644 part2/space_ft.jpg create mode 100644 part2/space_lf.jpg create mode 100644 part2/space_rt.jpg create mode 100644 part2/space_up.jpg diff --git a/README.md b/README.md index 06fcfd4..1cd9570 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ + +http://gfx.quakeworld.nu/details/266/space/ + ------------------------------------------------------------------------------- CIS565: Project 5: WebGL ------------------------------------------------------------------------------- diff --git a/part2/frag_globe.html b/part2/frag_globe.html index c6ce272..3a185b6 100644 --- a/part2/frag_globe.html +++ b/part2/frag_globe.html @@ -39,6 +39,36 @@ } + + + + +