WebGL-Render-Scene/main.html at master · chrisc-lee/WebGL-Render-Scene · 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
<!DOCTYPE html>
<html>

<script id="vertex-shader" type="x-shader/x-vertex">#version 300 es

in vec4 vPosition;
in vec3 vNormal;

out vec4 fColor;


uniform vec4 ambientProduct, diffuseProduct, specularProduct;
uniform mat4 modelViewMatrix;
uniform mat4 normalMatrix;
uniform mat4 projectionMatrix;
uniform vec4 lightPosition;
uniform float shininess;


void
main()
{
    // Transform vertex normal into eye coordinates
    vec3 pos = (modelViewMatrix * vPosition).xyz;
    //vec3 N = normalize( (modelViewMatrix*vec4(vNormal,0.0)).xyz);
    vec3 N = normalize( (normalMatrix*vec4(vNormal,0.0)).xyz);


    vec3 L = vec3(normalize(lightPosition.xyz-pos)) ;
    vec3 V = normalize(-pos.xyz) ;
    vec3 R = reflect(-L, N) ;


    // Compute terms in the illumination equation
    vec4 ambient = ambientProduct;

    float Kd = max( dot(L, N), 0.0 );

    fColor = ambient ;
    vec4 diffuse = vec4(0.0, 0.0, 0.0, 1.0);
    vec4 specular = vec4(0.0, 0.0, 0.0, 1.0);

    diffuse = Kd*diffuseProduct;
    float Ks = pow( max(dot(R, V), 0.0), shininess );
    specular = Ks * specularProduct;

    if( dot(L, N) < 0.0 ) {
        specular = vec4(0.0, 0.0, 0.0, 1.0);
    }

    gl_Position = projectionMatrix * modelViewMatrix * vPosition;

    fColor = fColor + diffuse + specular;
    fColor.a = 1.0;
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">#version 300 es

precision mediump float;
in vec4 fColor;

layout(location=0) out vec4 fragColor ;

void
main()
{

    fragColor = fColor;

}
</script>

<script type="text/javascript" src="Common/webgl-utils.js"></script>
<script type="text/javascript" src="Common/initShaders.js"></script>

<script type="text/javascript" src="Common/MV.js"></script>
<script type="text/javascript" src="objects.js"></script>
<script type="text/javascript" src="main.js"></script>


<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>

<br/>

<div id="animToggleButton">
    <input id="animToggleButton" type="button" value="Toggle Animation"
    />

</div><br/>

</body>
</html>