From bde2fb9aa52589574b9173a025812b9ee0a89e68 Mon Sep 17 00:00:00 2001
From: liying3
Date: Sun, 2 Nov 2014 23:31:42 -0500
Subject: [PATCH 01/17] v1
---
frag_globe.html | 39 +++++-
index_custom - Copy.html | 259 ++++++++++++++++++++++++++++++++++++++
index_custom.html | 261 +++++++++++++++++++++++++++++++++++++++
js/frag_globe.js | 1 +
vert_wave.html | 73 ++++++++---
5 files changed, 611 insertions(+), 22 deletions(-)
create mode 100644 index_custom - Copy.html
create mode 100644 index_custom.html
diff --git a/frag_globe.html b/frag_globe.html
index e074492..4cfeafb 100644
--- a/frag_globe.html
+++ b/frag_globe.html
@@ -74,24 +74,51 @@
void main(void)
{
// surface normal - normalized after rasterization
- vec3 normal = normalize(v_Normal);
+ vec3 normalOrg = normalize(v_Normal);
+
// normalized eye-to-position vector in camera coordinates
vec3 eyeToPosition = normalize(v_Position);
-
- float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+ vec2 texel = vec2(1.0/1024.0, 1.0/512.0);
+ float center = texture2D(u_Bump, v_Texcoord).r;
+ float right = texture2D(u_Bump, v_Texcoord + vec2(texel.x, 0.0)).r;
+ float top = texture2D(u_Bump, v_Texcoord + vec2(0.0, texel.y)).r;
+
+ vec3 normal = normalize(vec3(center - right, center - top, 0.2));
+ normal = normalize( eastNorthUpToEyeCoordinates(eyeToPosition, normalOrg) * normal );
+
+ float diffuse = dot(u_CameraSpaceDirLight, normal);
+ float diffuseClamp = 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);
- 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;
+
+ vec3 specColor = texture2D(u_EarthSpec, v_Texcoord).rgb;
+
+ float gammaCorrect = 1.1/1.2; //gamma correct by 1/1.2
//apply gamma correction to nighttime texture
nightColor = pow(nightColor,vec3(gammaCorrect));
- vec3 color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor;
+ vec2 v_cloudCoord = v_Texcoord - vec2(0.08*u_time, 0.0);
+ v_cloudCoord.x = v_cloudCoord.x > 1.0 ? 0.0 : v_cloudCoord.x;
+
+ vec3 cloudColor = texture2D(u_Cloud, v_cloudCoord).rgb;
+ float cloudTrans = texture2D(u_CloudTrans, v_cloudCoord).r;
+
+ nightColor = mix(nightColor, vec3(0.0, 0.0, 0.0), 1.0-cloudTrans);
+ dayColor = mix(0.6 * diffuseClamp * dayColor + 0.4 * specular * specColor * dayColor, cloudColor, 1.0-cloudTrans);
+
+ vec3 color = mix(nightColor, dayColor, (1.0+diffuse)/2.0);
+
+ float rim = dot(v_Position, v_Normal) + 1.0;
+ if (rim > 0.0)
+ color += vec3(rim/4.0, rim/2.0, rim/2.0);
+
+ color = clamp(color, 0.0, 1.0);
gl_FragColor = vec4(color, 1.0);
}
diff --git a/index_custom - Copy.html b/index_custom - Copy.html
new file mode 100644
index 0000000..ac6f673
--- /dev/null
+++ b/index_custom - Copy.html
@@ -0,0 +1,259 @@
+
+
+
+My Wave
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index_custom.html b/index_custom.html
new file mode 100644
index 0000000..c7f6c30
--- /dev/null
+++ b/index_custom.html
@@ -0,0 +1,261 @@
+
+
+
+My Wave
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/frag_globe.js b/js/frag_globe.js
index f37830d..125a6d3 100644
--- a/js/frag_globe.js
+++ b/js/frag_globe.js
@@ -289,6 +289,7 @@
gl.drawElements(gl.TRIANGLES, numberOfIndices, gl.UNSIGNED_SHORT,0);
time += 0.001;
+ gl.uniform1f(u_timeLocation, time);
window.requestAnimFrame(animate);
}
diff --git a/vert_wave.html b/vert_wave.html
index 5c7495b..dc30368 100644
--- a/vert_wave.html
+++ b/vert_wave.html
@@ -17,21 +17,34 @@
attribute vec2 position;
uniform mat4 u_modelViewPerspective;
+
+ uniform float u_time;
+
+ uniform vec3 u_minColor;
+ uniform vec3 u_maxColor;
+
+ varying vec4 u_color;
void main(void)
{
- // NOTE : according to the WebGL standard, 0.0f is not accepted
- float height = 0.0;
+ // NOTE : according to the WebGL standard, 0.0f is not accepted
+ 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;
- // NOTE : gl_Position is always a vec4
+ // NOTE : gl_Position is always a vec4
gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+
+ vec3 minColor = u_minColor / 255.0;
+ vec3 maxColor = u_maxColor / 255.0;
+ u_color = vec4( mix( minColor, maxColor, 1.0-2.0*height), 1.0 );
}
From 8385f3d7b8c90230a70bbfdc84e1516b7d31919b Mon Sep 17 00:00:00 2001
From: liying3
Date: Mon, 3 Nov 2014 04:05:40 -0500
Subject: [PATCH 03/17] add stas.js
---
frag_globe.html | 1 +
js/frag_globe.js | 55 ++++++++-
js/lib/stats.js | 149 ++++++++++++++++++++++++
js/webGLUtility.js | 1 +
vert_wave - Copy.html | 255 ++++++++++++++++++++++++++++++++++++++++++
5 files changed, 459 insertions(+), 2 deletions(-)
create mode 100644 js/lib/stats.js
create mode 100644 vert_wave - Copy.html
diff --git a/frag_globe.html b/frag_globe.html
index 4ece845..9a7af48 100644
--- a/frag_globe.html
+++ b/frag_globe.html
@@ -260,6 +260,7 @@
+
diff --git a/js/frag_globe.js b/js/frag_globe.js
index 125a6d3..70fc491 100644
--- a/js/frag_globe.js
+++ b/js/frag_globe.js
@@ -56,6 +56,17 @@
var u_BumpLocation;
var u_timeLocation;
+ //stas.js
+ var statsInitShader = new Stats();
+ statsInitShader.setMode(1); // 0: fps, 1: ms
+ statsInitShader.domElement.style.position = 'absolute';
+ statsInitShader.domElement.style.right = '0px';
+ statsInitShader.domElement.style.top = '0';
+ document.body.appendChild(statsInitShader.domElement );
+ var initS = document.createElement('div');
+ initS.innerHTML = 'init shader';
+ statsInitShader.domElement.appendChild(initS);
+ statsInitShader.begin();
(function initializeShader() {
var vs = getShaderSource(document.getElementById("vs"));
var fs = getShaderSource(document.getElementById("fs"));
@@ -79,6 +90,7 @@
gl.useProgram(program);
})();
+ statsInitShader.end();
var dayTex = gl.createTexture();
var bumpTex = gl.createTexture();
@@ -87,6 +99,17 @@
var lightTex = gl.createTexture();
var specTex = gl.createTexture();
+ //stas.js
+ var statsInitTexture = new Stats();
+ statsInitTexture.setMode(1); // 0: fps, 1: ms
+ statsInitTexture.domElement.style.position = 'absolute';
+ statsInitTexture.domElement.style.right = '0px';
+ statsInitTexture.domElement.style.top = '80px';
+ document.body.appendChild( statsInitTexture.domElement );
+ var initT = document.createElement('div');
+ initT.innerHTML = 'init texture';
+ statsInitTexture.domElement.appendChild(initT);
+ statsInitTexture.begin();
function initLoadedTexture(texture){
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
@@ -97,9 +120,22 @@
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.bindTexture(gl.TEXTURE_2D, null);
}
+ statsInitTexture.end();
var numberOfIndices;
-
+
+ //stas.js
+ var statsInitSphere = new Stats();
+ statsInitSphere.setMode(1); // 0: fps, 1: ms
+ statsInitSphere.domElement.style.position = 'absolute';
+ statsInitSphere.domElement.style.right = '0px';
+ statsInitSphere.domElement.style.top = '160px';
+ document.body.appendChild( statsInitSphere.domElement );
+ var initSphere = document.createElement('div');
+ initSphere.innerHTML = 'init sphere';
+ statsInitSphere.domElement.appendChild(initSphere);
+ statsInitSphere.begin();
+
(function initializeSphere() {
function uploadMesh(positions, texCoords, indices) {
// Positions
@@ -174,6 +210,7 @@
uploadMesh(positions, texCoords, indices);
numberOfIndices = indicesIndex;
})();
+ statsInitSphere.end();
var time = 0;
var mouseLeftDown = false;
@@ -233,10 +270,21 @@
document.onmouseup = handleMouseUp;
document.onmousemove = handleMouseMove;
-
+ //stas.js
+ var statsAnimate = new Stats();
+ statsAnimate.setMode(1); // 0: fps, 1: ms
+ statsAnimate.domElement.style.position = 'absolute';
+ statsAnimate.domElement.style.right = '0';
+ statsAnimate.domElement.style.top = '240px';
+ document.body.appendChild( statsAnimate.domElement );
+ var anim = document.createElement('div');
+ anim.innerHTML = 'animate';
+ statsAnimate.domElement.appendChild(anim);
+
function animate() {
///////////////////////////////////////////////////////////////////////////
// Update
+ statsAnimate.begin();
var model = mat4.create();
mat4.identity(model);
@@ -290,6 +338,9 @@
time += 0.001;
gl.uniform1f(u_timeLocation, time);
+
+ statsAnimate.end();
+
window.requestAnimFrame(animate);
}
diff --git a/js/lib/stats.js b/js/lib/stats.js
new file mode 100644
index 0000000..90b2a27
--- /dev/null
+++ b/js/lib/stats.js
@@ -0,0 +1,149 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+var Stats = function () {
+
+ var startTime = Date.now(), prevTime = startTime;
+ var ms = 0, msMin = Infinity, msMax = 0;
+ var fps = 0, fpsMin = Infinity, fpsMax = 0;
+ var frames = 0, mode = 0;
+
+ var container = document.createElement( 'div' );
+ container.id = 'stats';
+ container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
+ container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
+
+ var fpsDiv = document.createElement( 'div' );
+ fpsDiv.id = 'fps';
+ fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
+ container.appendChild( fpsDiv );
+
+ var fpsText = document.createElement( 'div' );
+ fpsText.id = 'fpsText';
+ fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
+ fpsText.innerHTML = 'FPS';
+ fpsDiv.appendChild( fpsText );
+
+ var fpsGraph = document.createElement( 'div' );
+ fpsGraph.id = 'fpsGraph';
+ fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
+ fpsDiv.appendChild( fpsGraph );
+
+ while ( fpsGraph.children.length < 74 ) {
+
+ var bar = document.createElement( 'span' );
+ bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
+ fpsGraph.appendChild( bar );
+
+ }
+
+ var msDiv = document.createElement( 'div' );
+ msDiv.id = 'ms';
+ msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
+ container.appendChild( msDiv );
+
+ var msText = document.createElement( 'div' );
+ msText.id = 'msText';
+ msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
+ msText.innerHTML = 'MS';
+ msDiv.appendChild( msText );
+
+ var msGraph = document.createElement( 'div' );
+ msGraph.id = 'msGraph';
+ msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
+ msDiv.appendChild( msGraph );
+
+ while ( msGraph.children.length < 74 ) {
+
+ var bar = document.createElement( 'span' );
+ bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
+ msGraph.appendChild( bar );
+
+ }
+
+ var setMode = function ( value ) {
+
+ mode = value;
+
+ switch ( mode ) {
+
+ case 0:
+ fpsDiv.style.display = 'block';
+ msDiv.style.display = 'none';
+ break;
+ case 1:
+ fpsDiv.style.display = 'none';
+ msDiv.style.display = 'block';
+ break;
+ }
+
+ };
+
+ var updateGraph = function ( dom, value ) {
+
+ var child = dom.appendChild( dom.firstChild );
+ child.style.height = value + 'px';
+
+ };
+
+ return {
+
+ REVISION: 12,
+
+ domElement: container,
+
+ setMode: setMode,
+
+ begin: function () {
+
+ startTime = Date.now();
+
+ },
+
+ end: function () {
+
+ var time = Date.now();
+
+ ms = time - startTime;
+ msMin = Math.min( msMin, ms );
+ msMax = Math.max( msMax, ms );
+
+ msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
+ updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
+
+ frames ++;
+
+ if ( time > prevTime + 1000 ) {
+
+ fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
+ fpsMin = Math.min( fpsMin, fps );
+ fpsMax = Math.max( fpsMax, fps );
+
+ fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
+ updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
+
+ prevTime = time;
+ frames = 0;
+
+ }
+
+ return time;
+
+ },
+
+ update: function () {
+
+ startTime = this.end();
+
+ }
+
+ }
+
+};
+
+if ( typeof module === 'object' ) {
+
+ module.exports = Stats;
+
+}
\ No newline at end of file
diff --git a/js/webGLUtility.js b/js/webGLUtility.js
index 134a93e..311dbdd 100644
--- a/js/webGLUtility.js
+++ b/js/webGLUtility.js
@@ -5,6 +5,7 @@
// University of Pennsylvania (c) 2014
(function(exports) {
+
"use strict";
exports = exports || window;
diff --git a/vert_wave - Copy.html b/vert_wave - Copy.html
new file mode 100644
index 0000000..677a07f
--- /dev/null
+++ b/vert_wave - Copy.html
@@ -0,0 +1,255 @@
+
+
+