Spinning-Mobile-Renderer/index.html at master · lbodwell/Spinning-Mobile-Renderer · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Project 4</title>
        <link rel="icon" href="data:;base64,iVBORw0KGgo=">
        <link rel="stylesheet" href="css/main.css">
        <script id="vertex-shader" type="x-shader/x-vertex">
            attribute vec4 vPosition;
            attribute vec4 vColor;
            attribute vec4 vNormal;
            attribute vec2 vTexCoord;

            uniform mat4 projMatrix;
            uniform mat4 modelMatrix;
            uniform vec4 lightPosition;
            uniform vec4 diffuseProduct;
            uniform vec4 specularProduct;
            uniform vec4 ambientProduct;
            uniform float materialShininess;
            uniform float spotlightConeAngle;
            uniform bool doLight;

            varying vec4 fColor;
            varying vec2 fTexCoord;
            varying vec3 refl;
            varying vec3 refr;

            void main() {
                vec3 pos = (modelMatrix * vPosition).xyz;
                vec3 L = normalize(lightPosition.xyz - pos);
                vec3 V = normalize(-pos);
                vec3 N = normalize(modelMatrix * vNormal).xyz;
                vec3 R = (2.0 * dot(L, N) * N) - L;

                refl = reflect(pos, N);
                refr = refract(pos, N, 0.97);

                vec4 ambient = ambientProduct;
                vec4 diffuse = vec4(0, 0, 0, 0);
                vec4 specular = vec4(0, 0, 0, 0);

                vec3 lightDir;
                lightDir.x = -lightPosition.x;
                lightDir.y = -lightPosition.y;
                lightDir.z = -lightPosition.z;
                lightDir = normalize(lightDir);
                if (dot(L, -lightDir) > spotlightConeAngle) {
                    diffuse = dot(L, N) * diffuseProduct;
                    specular = pow(max(dot(V, R), 0.0), materialShininess) * specularProduct;
                }

                gl_Position = projMatrix * modelMatrix * vPosition;
                gl_PointSize = 10.0;

                if (doLight) {
                    fColor = ambient + diffuse + specular;
                } else {
                    fColor = vColor;
                }

                fColor.a = 1.0;

                fTexCoord = vTexCoord;
            }
        </script>
        <script id="fragment-shader" type="x-shader/x-fragment">
            precision mediump float;

            uniform sampler2D texture;
            uniform samplerCube cubeMap;
            uniform bool doTexture;
            uniform bool doReflect;
            uniform bool doRefract;

            varying vec4 fColor;
            varying vec2 fTexCoord;
            varying vec3 refl;
            varying vec3 refr;

            void main() {
                if (doTexture) {
                    gl_FragColor = texture2D(texture, fTexCoord);
                } else {
                    gl_FragColor = fColor;
                    if (doReflect) {
                        gl_FragColor = gl_FragColor * textureCube(cubeMap, refl);
                    }
                    if (doRefract) {
                        gl_FragColor = gl_FragColor * textureCube(cubeMap, refr);
                    }
                }
            }
        </script>
        <script src="lib/webgl-utils.js"></script>
        <script src="lib/initShaders.js"></script>
        <script src="lib/MV.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <div class="row">
            <div class ="w-50 mx-auto">
                <h2>Project 4</h2>
                <p>Luke Bodwell</p>
                <canvas id="gl-canvas" width="1000" height="600"></canvas>
                <br>
                <input id="file-upload" type="file" accept=".ply"/>
                <br>
                <h3>Controls</h3>
                <p>A: Toggle shadows (enabled by default)</p>
                <p>B: Toggle textures (enabled by default)</p>
                <p>C: Toggle reflection (disabled by default)</p>
                <p>D: Toggle refraction (disabled by default)</p>
                <p>M: Switch to Gouraud shading (active by default)</p>
                <p>N: Switch to flat shading (inactive by default)</p>
                <p>I: Decrease spotlight cone angle</p>
                <p>P: Increase spotlight cone angle</p>
                <p>E: Enable experimental features (extra credit features that may not place nice with required features, especially shadows)</p>
                <p id="exp-controls-1">O: Move the spotlight up (experimental feature)</p>
                <p id="exp-controls-2">K: Move the spotlight down (experimental feature)</p>
                <p id="exp-controls-3">J: Move the spotlight to the left (experimental feature)</p>
                <p id="exp-controls-4">L: Move the spotlight to the right (experimental feature)</p>
                <p id="exp-controls-5">Click and drag the mouse to pan the camera (experimental feature)</p>
            </div>
        </div>
    </body>
</html>