Obj_Viewer/application.html at master · CarlosOlave/Obj_Viewer · 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
<html>
<head>

    <title>.obj reader</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <script
            type="text/javascript"
            data-main="source/main"
            src="Source/Libs/require.js"></script>
    <script
            id="per-fragment-lighting-fs"
            type="x-shader/x-fragment">
        precision mediump float;

        varying vec2 vTextureCoord;
        varying vec3 vTransformedNormal;
        varying vec4 vPosition;

        uniform float uMaterialShininess;

        uniform bool uShowSpecularHighlights;
        uniform bool uUseLighting;
        uniform bool uUseTextures;

        uniform vec3 uAmbientColor;

        uniform vec3 uPointLightingLocation;
        uniform vec3 uPointLightingSpecularColor;
        uniform vec3 uPointLightingDiffuseColor;

        uniform sampler2D uSampler;


        void main(void) {
        vec3 lightWeighting;
        if (!uUseLighting) {
        lightWeighting = vec3(1.0, 1.0, 1.0);
        } else {
        vec3 lightDirection = normalize(uPointLightingLocation - vPosition.xyz);
        vec3 normal = normalize(vTransformedNormal);

        float specularLightWeighting = 0.0;
        if (uShowSpecularHighlights) {
        vec3 eyeDirection = normalize(-vPosition.xyz);
        vec3 reflectionDirection = reflect(-lightDirection, normal);

        specularLightWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), uMaterialShininess);
        }

        float diffuseLightWeighting = max(dot(normal, lightDirection), 0.0);
        lightWeighting = uAmbientColor
        + uPointLightingSpecularColor * specularLightWeighting
        + uPointLightingDiffuseColor * diffuseLightWeighting;
        }

        vec4 fragmentColor;
        if (uUseTextures) {
        fragmentColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
        } else {
        fragmentColor = vec4(1.0, 1.0, 1.0, 1.0);
        }
        gl_FragColor = vec4(fragmentColor.rgb * lightWeighting, fragmentColor.a);
        }
    </script>
    <script
            id="per-fragment-lighting-vs"
            type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        attribute vec3 aVertexNormal;
        attribute vec2 aTextureCoord;

        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
        uniform mat3 uNMatrix;

        varying vec2 vTextureCoord;
        varying vec3 vTransformedNormal;
        varying vec4 vPosition;

        void main(void) {
        vPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
        gl_Position = uPMatrix * vPosition;
        vTextureCoord = aTextureCoord;
        vTransformedNormal = uNMatrix * aVertexNormal;
        }
    </script>
</head>
<body>

<div id="drop_zone">
    <canvas id="renderer-canvas" style="border: 3px solid;" width="400" height="400"></canvas>
</div>

<h2>Material:</h2>
<table style="border: 0; padding: 10px;">
    <tr>
        <td><b>Shininess:</b>
        <td><input type="text" id="shininess" value="32.0" />
    </tr>
</table>

<h2>Point light:</h2>
<table style="border: 0; padding: 10px;">
    <tr>
        <td><b>Location:</b>
        <td>X: <input type="text" id="lightPositionX" value="-10.0" />
        <td>Y: <input type="text" id="lightPositionY" value="4.0" />
        <td>Z: <input type="text" id="lightPositionZ" value="-20.0" />
    </tr>
    <tr>
        <td><b>Specular colour:</b>
        <td>R: <input type="text" id="specularR" value="0.8" />
        <td>G: <input type="text" id="specularG" value="0.8" />
        <td>B: <input type="text" id="specularB" value="0.8" />
    </tr>
    <tr>
        <td><b>Diffuse colour:</b>
        <td>R: <input type="text" id="diffuseR" value="0.8" />
        <td>G: <input type="text" id="diffuseG" value="0.8" />
        <td>B: <input type="text" id="diffuseB" value="0.8" />
    </tr>
</table>

<h2>Ambient light:</h2>
<table style="border: 0; padding: 10px;">
    <tr>
        <td><b>Colour:</b>
        <td>R: <input type="text" id="ambientR" value="0.2" />
        <td>G: <input type="text" id="ambientG" value="0.2" />
        <td>B: <input type="text" id="ambientB" value="0.2" />
    </tr>
</table>

<output id="list"></output>
</body>
</html>