Project5-WebGL/frag_globe.html at master · CIS565-Fall-2014/Project5-WebGL · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<html>

<head>
<title>Fragment Globe</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">
    precision highp float;

    uniform mat4 u_Model;
    uniform mat4 u_View;
    uniform mat4 u_Persp;
    uniform mat4 u_InvTrans;

    attribute vec3 Position;
    attribute vec3 Normal;
    attribute vec2 Texcoord;

    varying vec3 v_Normal;
    varying vec2 v_Texcoord;
    varying vec3 v_Position;
    varying vec3 v_positionMC;

    void main(void)
    {
        v_Normal = (u_InvTrans*vec4(Normal,0.0)).xyz;
        v_Texcoord = Texcoord;
        vec4 world = u_Model * vec4(Position, 1.0);
        vec4 camera = u_View * world;
        v_Position = camera.xyz;
        v_positionMC = Position;
        gl_Position = u_Persp * camera;
    }
</script>

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

    //View-Space directional light
    //A unit vector
    uniform vec3 u_CameraSpaceDirLight;

    //Diffuse texture map for the day
    uniform sampler2D u_DayDiffuse;
    //Ambient texture map for the night side
    uniform sampler2D u_Night;
    //Color map for the clouds
    uniform sampler2D u_Cloud;
    //Transparency map for the clouds.  Note that light areas are where clouds are NOT
    //Dark areas are where clouds are present
    uniform sampler2D u_CloudTrans;
    //Mask of which areas of the earth have specularity
    //Oceans are specular, landmasses are not
    uniform sampler2D u_EarthSpec;
    //Bump map
    uniform sampler2D u_Bump;

    uniform float u_time;
    uniform mat4 u_InvTrans;

    varying vec3 v_Normal;              // surface normal in camera coordinates
    varying vec2 v_Texcoord;
    varying vec3 v_Position;            // position in camera coordinates
    varying vec3 v_positionMC;          // position in model coordinates

    mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC);

    void main(void)
    {
        // surface normal - normalized after rasterization
        vec3 normal = 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);

        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;
        //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);
    }

    mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC)
    {
        // normalized surface tangent in model coordinates
        vec3 tangentMC = normalize(vec3(-positionMC.z, positionMC.x, 0.0));
        // normalized surface tangent in eye coordiantes
        vec3 tangentEC = normalize(mat3(u_InvTrans) * tangentMC);
        // normalized surface bitangent in eye coordinates
        vec3 bitangentEC = normalize(cross(normalEC, tangentEC));

        return mat3(
            tangentEC.x,   tangentEC.y,   tangentEC.z,
            bitangentEC.x, bitangentEC.y, bitangentEC.z,
            normalEC.x,    normalEC.y,    normalEC.z);
    }
</script>

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

</html>