WebGLGraphic/index.html at master · i7az/WebGLGraphic · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>

<!--
Jinbao Xiao
B481 A5
-->

<script id="vertex-shader" type="x-shader/x-vertex">
precision mediump float;
attribute vec4 vertex;
attribute vec4 normal;
attribute vec4 color;

uniform mat4 Model_Matrix;
uniform mat4 View_Matrix;
uniform mat4 Proj_Matrix;

varying vec3 outNormal;
varying vec4 outColor;
varying vec3 position;

void main()
{
    mat4 mvpMat = Proj_Matrix * View_Matrix * Model_Matrix;
    mat4 mvMat = View_Matrix * Model_Matrix;
    mat4 normalMat = View_Matrix * Model_Matrix;


    gl_Position = mvpMat * vertex;
    position = vec3(mvMat*vertex);
    outNormal = vec3(normalMat * normal);
    outColor = color;
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec3 outNormal;
varying vec4 outColor;
//varying vec2 outUV;
//varying vec3 outLightPos;
varying vec3 position;

uniform mat4 View_Matrix;


uniform vec4 u_lightPos1;
uniform vec4 u_lightColor1;

vec3 light(){
    vec3 normal = normalize(outNormal);
    vec3 surf2camera = normalize(-position);


    // Light 1:
    vec3 surf2light1 = normalize((View_Matrix*u_lightPos1).xyz - position);
    vec3 reflection1 = reflect(-surf2light1,normal);
    float diffuse1 = max(0.0,dot(normal,surf2light1));

    float specular1;
    if (dot(normal,surf2light1) < 0.0) {
        specular1 = 0.0;
    } else {
        specular1 = pow(max(0.0, dot(reflection1, surf2camera)), 50.0);
    }


    // total:
    vec3 totalDiffuseColor = diffuse1*u_lightColor1.rgb;
    vec3 totalSpecularColor = specular1 * u_lightColor1.rgb;
    vec3 totalColor = totalDiffuseColor + totalSpecularColor;
    return totalColor;
}

void main()
{

    vec3 lightColor = light();
    gl_FragColor = vec4(lightColor*outColor.rgb, 1.0);
}
</script>

<script id="fragment-shader2" type="x-shader/x-fragment">

precision mediump float;
varying vec4 outColor;


void main()
{
    gl_FragColor = outColor;
}
</script>

<script type="text/javascript" src="webgl-utils.js"></script>
<!--
    initShader2 use ajax to load shaders
    can't use locally
-->
<script type="text/javascript" src="initShaders.js"></script>
<script type="text/javascript" src="MV.js"></script>
<script type="text/javascript" src="entry.js"></script>
<script type="text/javascript" src="model.coord.js"></script>
<script type="text/javascript" src="model.cube.js"></script>
<script type="text/javascript" src="model.plane.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="shadow.js"></script>
<script type="text/javascript" src="index.js"></script>

<body>
    <div>
        <canvas id="gl-canvas" width="512" height="512">
            Oops ... your browser doesn't support the HTML5 canvas element
        </canvas>
        <div id='message' style="position:absolute;background-color:#aaa;width:200px;border:3px double #000;">
            <div style="margin:0 0 0 0;padding:10px 5px 5px">
                <li>W,A,S,D to move</li>
                <li>Hold mouse right button to free look</li>
                <li>E to set light position</li>
                <li>See <a href='./readme.txt'/>readme</a></li>
                <br>
                <li>Enjoy!</li>
            </div>
            <hr>
            <p style="text-align:center" onclick='document.getElementById("message").style.display="none"'><a href='#'>HIDE</a></p>
        </div>
        <script type="text/javascript">
            (function(){
                var m = document.getElementById("message");
                var t = window.innerHeight/2 - 100;
                var l = window.innerWidth/2 - 100;
                m.style.top = t+"px";
                m.style.left = l+"px";
            })()
        </script>
    </div>
</body>
</html>