Fakultas Ilmu Komputer UI

no-2.html 17.5 KB
Newer Older
Rachmat Ridwan's avatar
Rachmat Ridwan committed
1
2
<!DOCTYPE html>
<html>
Agas Yanpratama's avatar
Agas Yanpratama committed
3
<title>Link</title>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
4
<meta name="viewport" content="width=device-width, initial-scale=1">
Agas Yanpratama's avatar
Agas Yanpratama committed
5
<link rel="stylesheet" href="lib/css/bootstrap.min.css">
Rachmat Ridwan's avatar
Rachmat Ridwan committed
6
<link rel="stylesheet" href="no-2.css">
Rachmat Ridwan's avatar
Rachmat Ridwan committed
7
<link rel="stylesheet" href="no-2-mobile.css">
Rachmat Ridwan's avatar
Rachmat Ridwan committed
8
<script id="vertex-shader" type="x-shader/x-vertex">
9
10
precision mediump float;
attribute vec4 vPosition;
Rachmat Ridwan's avatar
Rachmat Ridwan committed
11
12
attribute vec3 vNormal;

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
uniform mat4 modelMatrix, viewMatrix, projectionMatrix;

varying vec3 normalInterp;
varying vec4 vertPos4;

void main()
{
    vertPos4 = viewMatrix * modelMatrix * vPosition;
    // Multiply normal to model matrix view.
    normalInterp = (modelMatrix * vec4(vNormal.xyz, 0.0)).xyz;
    gl_Position = projectionMatrix * vertPos4;
}
</script>
  
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;

// Percentage of mix between normal material shader
// and material shader

uniform float selectingFactor;

Rachmat Ridwan's avatar
Rachmat Ridwan committed
35
uniform mat4 viewMatrix;
36
37
38
39

varying vec3 normalInterp;  // Surface normal
varying vec4 vertPos4;      // Vertex position

Rachmat Ridwan's avatar
Rachmat Ridwan committed
40
uniform vec4 lightPosition;
41

42
43
uniform vec4 ambientProduct, diffuseProduct, specularProduct;
uniform float shininess;
44

Rachmat Ridwan's avatar
Rachmat Ridwan committed
45
46
47
void main()
{
    // vector from vertex position to light source
48
49
50
    vec3 L = normalize( (viewMatrix * lightPosition - vertPos4).xyz );

    vec3 E = normalize( -(vertPos4).xyz );
Rachmat Ridwan's avatar
Rachmat Ridwan committed
51
52
53
    vec3 H = normalize( L + E );

    // Transform vertex normal into eye coordinates
54
55

    vec3 N = normalize(normalInterp.xyz);
Rachmat Ridwan's avatar
Rachmat Ridwan committed
56
57

    // Compute diffuse reflection term (see p. 286 Angel 7th ed)
58

Rachmat Ridwan's avatar
Rachmat Ridwan committed
59
60
61
62
    float Kd = max( dot(L, N), 0.0 );
    vec4  diffuse  = Kd * diffuseProduct;

    // Compute specular reflection term (see p. 287 Angel 7th ed)
63

Rachmat Ridwan's avatar
Rachmat Ridwan committed
64
65
66
67
    float Ks = pow( max(dot(N, H), 0.0), shininess );
    vec4  specular = Ks * specularProduct;

    if( dot(L, N) < 0.0 ) {
68
      specular = vec4(0.0, 0.0, 0.0, 1.0);
Rachmat Ridwan's avatar
Rachmat Ridwan committed
69
70
71
72
    }

    // Use ambient
    vec4 ambient = ambientProduct;
73
74
75
    
    vec4 selectedColor = vec4(0.0/255.0, 123.0/255.0, 255.0/255.0, 1.0);
    vec4 fColor = (ambient + diffuse + specular) * (1.0 - selectingFactor) + selectedColor * selectingFactor;
Rachmat Ridwan's avatar
Rachmat Ridwan committed
76
77
78
79
80
81
    fColor.a = 1.0;

    gl_FragColor = fColor;
}
</script>

Rachmat Ridwan's avatar
Rachmat Ridwan committed
82
83
84
85
<script type="text/javascript" src="./lib/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="./lib/js/popper-1.16.0.min.js"></script>
<script type="text/javascript" src="./lib/js/bootstrap.min.js"></script>

Rachmat Ridwan's avatar
Rachmat Ridwan committed
86
87
88
<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>
89
<script type="text/javascript" src="./m4.js"></script>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
90

91
92
93
94
<script type="text/javascript" src="./utils.js"></script>
<script type="text/javascript" src="./event-dispatcher.js"></script>

<script type="text/javascript" src="./scene-graph.js"></script>
95
96
<script type="text/javascript" src="./object-node.js"></script>
<script type="text/javascript" src="./model.js"></script>
97
<script type="text/javascript" src="./animation-manager.js"></script>
98
<script type="text/javascript" src="./renderer.js"></script>
99

100
<script type="text/javascript" src="../temp/objects-materials.js"></script>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
101
102
<script type="text/javascript" src="../temp/objects-data.js"></script>
<script type="text/javascript" src="../temp/objects-vertices.js"></script>
Agas Yanpratama's avatar
Agas Yanpratama committed
103
<script type="text/javascript" src="../temp/objects-animations.js"></script>
104
<script type="text/javascript" src="./camera-coordinates.js"></script>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
105

106
107
108
<script type="text/javascript" src="./module-navigable-camera.js"></script>
<script type="text/javascript" src="./module-select-object.js"></script>

109
<script type="text/javascript" src="./no-2.js"></script>
Agas Yanpratama's avatar
Agas Yanpratama committed
110

Rachmat Ridwan's avatar
Rachmat Ridwan committed
111
112

<body>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
113
114
115
116
  <div class="canvas-wrapper">
    <canvas tabindex="1" id="gl-canvas">
      Oops ... your browser doesn't support the HTML5 canvas element
    </canvas>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
117
118
    <div id="screen-info">
      <p id="canvas-status">Canvas aktif dipilih</p>
119
      <div>Objek dipilih: <span id="selobj-hierarchy"><span>body</span><span>black-body</span></span></div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
120
    </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
121
  </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
122
123
124
  <div id="menu-toggler-wrapper" class="show-menu">
    <button type="button" class="btn btn-primary" id="menu-toggler-button">
      <span class="button-text">Tutup</span>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
125
      <img class="arrow" src="arrow.svg" />
126
127
    </button>
    <div class="menu">
128
129
      <div class="submenu">
        <h3 class="submenu-title">Tree Objek</h3>
130
131
        <label class="note">Bantuan: untuk memilih objek, <strong>klik kanan</strong> (pada desktop)
          atau <strong>tekan dan tahan</strong> yang lama (pada mobile)</label>
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
        <div id="tree">
          <div class="obj-name" id="root-node">Root</div>
          <ul>
          </ul>
        </div>
      </div>
      <div class="submenu" id="selected-object-menu">
        <h3 class="submenu-title">Pengaturan Objek yang Dipilih</h3>
        <div class="property-section">
          <h4>Translasi</h4>
          <div class="submenu-section">
            <div class="slider-container">
              <label>X<b>
                  <div class="slider-value">0</div>
                </b></label>
              <input type="range" step="0.05" name="selected-object-location-x" value="0" min="-10" max="10"
                class="custom-range range-animation">
            </div>
            <div class="slider-container">
              <label>Y<b>
                  <div class="slider-value">0</div>
                </b></label>
              <input type="range" step="0.05" name="selected-object-location-y" value="0" min="-10" max="10"
                class="custom-range range-animation">
            </div>
            <div class="slider-container">
              <label>Z<b>
                  <div class="slider-value">0</div>
                </b></label>
              <input type="range" step="0.05" name="selected-object-location-z" value="0" min="-10" max="10"
                class="custom-range range-animation">
            </div>
          </div>
        </div>
        <div class="property-section">
          <h4>Rotasi</h4>
          <div class="submenu-section">
            <div class="slider-container">
              <label>X<b>
                  <div class="slider-value">0</div>
                </b></label>
              <input type="range" step="0.1" name="selected-object-rotation-x" value="0" min="-360" max="360"
                class="custom-range range-animation">
            </div>
            <div class="slider-container">
              <label>Y<b>
                  <div class="slider-value">0</div>
                </b></label>
              <input type="range" step="0.1" name="selected-object-rotation-y" value="0" min="-360" max="360"
                class="custom-range range-animation">
            </div>
            <div class="slider-container">
              <label>Z<b>
                  <div class="slider-value">0</div>
                </b></label>
              <input type="range" step="0.1" name="selected-object-rotation-z" value="0" min="-360" max="360"
                class="custom-range range-animation">
            </div>
          </div>
        </div>
        <div class="property-section">
          <h4>Skala</h4>
          <div class="submenu-section">
            <div class="slider-container">
              <label>X<b>
                  <div class="slider-value">1</div>
                </b></label>
              <input type="range" step="0.05" name="selected-object-scale-x" value="1" min="-3" max="3"
                class="custom-range range-animation">
            </div>
            <div class="slider-container">
              <label>Y<b>
                  <div class="slider-value">1</div>
                </b></label>
              <input type="range" step="0.05" name="selected-object-scale-y" value="1" min="-3" max="3"
                class="custom-range range-animation">
            </div>
            <div class="slider-container">
              <label>Z<b>
                  <div class="slider-value">1</div>
                </b></label>
              <input type="range" step="0.05" name="selected-object-scale-z" value="1" min="-3" max="3"
                class="custom-range range-animation">
            </div>
          </div>
        </div>
      </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
219
220
221
222
223
224
225
226
227
228
      <div class="submenu-two-list-container">
        <div class="submenu">
          <h3 class="submenu-title">Kontrol animasi</h3>
          <button type="button" class="btn btn-primary" id="btn-animate">Mulai Animasi</button>
          <div class="slider-container" id="speed-slider">
            <label>Kecepatan animasi<b>
                <div class="slider-value">0</div>
              </b></label>
            <input type="range" step="0.01" name="speed" value="0" min="0" max="4" class="custom-range range-speed">
          </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
229
230
231
232
233
234
          <div class="slider-container" id="resolution-slider">
            <label>Resolusi<b>
                <div class="slider-value">100%</div>
              </b></label>
            <input type="range" step="1" name="resolution" value="100" min="1" max="100" class="custom-range">
          </div>
Agas Yanpratama's avatar
Agas Yanpratama committed
235
        </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
236
237
238
        <div class="submenu">
          <h3 class="submenu-title">Lokasi Cahaya</h3>
          <div class="slider-container">
239
            <label>X<b>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
240
241
                <div class="slider-value">0</div>
              </b></label>
242
            <input type="range" step="0.01" name="lightPositionX" value="0" min="-10" max="10" class="custom-range range-speed">
Rachmat Ridwan's avatar
Rachmat Ridwan committed
243
244
          </div>
          <div class="slider-container">
245
            <label>Y<b>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
246
247
                <div class="slider-value">0</div>
              </b></label>
248
            <input type="range" step="0.01" name="lightPositionY" value="0" min="-10" max="10" class="custom-range range-speed">
Rachmat Ridwan's avatar
Rachmat Ridwan committed
249
250
          </div>
          <div class="slider-container">
251
            <label>Z<b>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
252
253
                <div class="slider-value">0</div>
              </b></label>
254
            <input type="range" step="0.01" name="lightPositionZ" value="0" min="-10" max="10" class="custom-range range-speed">
Rachmat Ridwan's avatar
Rachmat Ridwan committed
255
          </div>
Agas Yanpratama's avatar
Agas Yanpratama committed
256
257
        </div>
      </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
      <div class="submenu-two-list-container">
        <div class="submenu" id="link-submenu">
          <h3 class="submenu-title">Gerakan Ksatria ("Link")</h3>
          <div class="slider-container">
            <label>Rotasi Tangan Kiri<b>
                <div class="slider-value">0</div>
              </b></label>
            <input type="range" step="0.1" name="arm.L.rotation.x" value="0" min="-45" max="135"
              class="custom-range range-animation">
          </div>
          <div class="slider-container">
            <label>Rotasi Tangan Kanan<b>
                <div class="slider-value">0</div>
              </b></label>
            <input type="range" step="0.1" name="arm.R.rotation.x" value="0" min="-45" max="135"
              class="custom-range range-animation">
274
          </div>
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
          <div class="slider-container">
            <label>Rotasi Kaki Kiri<b>
                <div class="slider-value">0</div>
              </b></label>
            <input type="range" step="0.1" name="leg.L.rotation.x" value="0" min="-60" max="60"
              class="custom-range range-animation">
          </div>
          <div class="slider-container">
            <label>Rotasi Kaki Kanan<b>
                <div class="slider-value">0</div>
              </b></label>
            <input type="range" step="0.1" name="leg.R.rotation.x" value="0" min="-60" max="60"
              class="custom-range range-animation">
          </div>
          <div class="slider-container">
            <label>Rotasi Telapak Kaki Kiri<b>
                <div class="slider-value">0</div>
              </b></label>
            <input type="range" step="0.1" name="boot_lower.L.rotation.x" value="0" min="-5.5" max="22.7"
              class="custom-range range-animation">
          </div>
          <div class="slider-container">
            <label>Rotasi Telapak Kaki Kanan<b>
                <div class="slider-value">0</div>
              </b></label>
            <input type="range" step="0.1" name="boot_lower.R.rotation.x" value="0" min="-5.5" max="22.7"
              class="custom-range range-animation">
          </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
303
304
305
306
307
308
          <div class="slider-container">
            <label>Rotasi Pedang<b>
                <div class="slider-value">0</div>
              </b></label>
            <input type="range" step="0.1" name="sword_grip.rotation.x" value="0" min="-90" max="90"
              class="custom-range range-animation">
309
          </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
310
311
312
313
          <div class="slider-container">
            <label>Rotasi Tolehan Kepala<b>
                <div class="slider-value">0</div>
              </b></label>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
314
            <input type="range" step="0.1" name="head.rotation.z" value="0" min="-90" max="90"
Rachmat Ridwan's avatar
Rachmat Ridwan committed
315
              class="custom-range range-animation" />
316
          </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
317
318
319
320
321
322
323
324
325
326
327
          <div class="slider-container">
            <label>Kedipan Mata<b>
                <div class="slider-value">1</div>
              </b></label>
            <input type="range" step="0.01" name="eye.scale.z" value="1" min="0" max="1"
              class="custom-range range-animation">
          </div>
          <div class="slider-container">
            <label>Rotasi Anggukan Kepala<b>
                <div class="slider-value">0</div>
              </b></label>
328
            <input type="range" step="0.1" name="head.rotation.x" value="0" min="-90" max="90"
Rachmat Ridwan's avatar
Rachmat Ridwan committed
329
330
331
332
333
334
              class="custom-range range-animation" />
          </div>
          <div class="slider-container">
            <label>Loncatan<b>
                <div class="slider-value">0</div>
              </b></label>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
335
            <input type="range" step="0.01" name="body.location.z" value="0" min="-1" max="1"
Rachmat Ridwan's avatar
Rachmat Ridwan committed
336
337
338
              class="custom-range range-animation">
          </div>
          <div class="slider-container">
Rachmat Ridwan's avatar
Rachmat Ridwan committed
339
            <label>Rotasi Tengkurap Badan<b>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
340
341
342
343
                <div class="slider-value">0</div>
              </b></label>
            <input type="range" step="0.1" name="body.rotation.x" value="0" min="-90" max="90"
              class="custom-range range-animation">
344
          </div>
Agas Yanpratama's avatar
Agas Yanpratama committed
345
        </div>
346
347
        <!-- TODO: Change Slider Ayam-->
        <div class="submenu">
Rachmat Ridwan's avatar
Rachmat Ridwan committed
348
349
          <h3 class="submenu-title">Gerakan Ayam</h3>
          <div class="slider-container">
350
351
352
353
354
355
356
357
            <label>Rotasi Kepala <b>
                <div class="slider-value">1</div>
              </b></label>
            <input type="range" step="0.01" name="chicken.head.rotation.x" value="1" min="-5" max="10"
              class="custom-range range-animation">
          </div>
          <div class="slider-container">
            <label>Rotasi Badan <b>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
358
359
                <div class="slider-value">0</div>
              </b></label>
360
            <input type="range" step="0.1" name="chicken.body.rotation.x" value="0" min="-90" max="90"
Rachmat Ridwan's avatar
Rachmat Ridwan committed
361
362
363
              class="custom-range range-animation">
          </div>
          <div class="slider-container">
364
            <label>Rotasi Sisir Ayam <b>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
365
366
                <div class="slider-value">0</div>
              </b></label>
367
368
369
370
371
372
373
374
            <input type="range" step="0.1" name="chicken.comb.rotation.x" value="0" min="-16" max="11"
              class="custom-range range-animation" />
          </div>
          <div class="slider-container">
            <label>Rotasi Sayap Kiri <b>
                <div class="slider-value">0</div>
              </b></label>
            <input type="range" step="0.1" name="chicken.wing.L.rotation.z" value="0" min="-60" max="0"
Rachmat Ridwan's avatar
Rachmat Ridwan committed
375
376
377
              class="custom-range range-animation">
          </div>
          <div class="slider-container">
378
            <label>Rotasi Sayap Kanan <b>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
379
380
                <div class="slider-value">0</div>
              </b></label>
381
            <input type="range" step="0.1" name="chicken.wing.R.rotation.z" value="0" min="0" max="60"
Rachmat Ridwan's avatar
Rachmat Ridwan committed
382
383
384
              class="custom-range range-animation">
          </div>
          <div class="slider-container">
385
            <label>Rotasi Kaki Kanan <b>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
386
387
                <div class="slider-value">0</div>
              </b></label>
388
389
            <input type="range" step="0.1" name="chicken.leg.R.rotation.x" value="0" min="-90" max="90"
              class="custom-range range-animation">
Rachmat Ridwan's avatar
Rachmat Ridwan committed
390
391
          </div>
          <div class="slider-container">
392
393
            <label>Rotasi Kaki Kiri <b>
                <div class="slider-value">0</div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
394
              </b></label>
395
            <input type="range" step="0.1" name="chicken.leg.L.rotation.x" value="0" min="-90" max="90"
Rachmat Ridwan's avatar
Rachmat Ridwan committed
396
              class="custom-range range-animation">
397
          </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
398
          <div class="slider-container">
399
            <label>Rotasi Cakar Kanan <b>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
400
401
                <div class="slider-value">0</div>
              </b></label>
402
403
            <input type="range" step="0.1" name="chicken.claw.R.rotation.x" value="0" min="-12" max="25"
              class="custom-range range-animation">
404
          </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
405
          <div class="slider-container">
406
            <label>Rotasi Cakar Kiri <b>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
407
408
                <div class="slider-value">0</div>
              </b></label>
409
            <input type="range" step="0.1" name="chicken.claw.L.rotation.x" value="0" min="-12" max="25"
Rachmat Ridwan's avatar
Rachmat Ridwan committed
410
              class="custom-range range-animation">
411
          </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
412
          <div class="slider-container">
413
            <label>Lompatan <b>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
414
415
                <div class="slider-value">0</div>
              </b></label>
416
            <input type="range" step="0.1" name="chicken.body.location.z" value="0" min="-1" max="1"
Rachmat Ridwan's avatar
Rachmat Ridwan committed
417
              class="custom-range range-animation">
418
          </div>
Agas Yanpratama's avatar
Agas Yanpratama committed
419
420
        </div>
      </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
421
422
423
424
      <div class="submenu">
        <h3 class="submenu-title">Bantuan</h3>
        <div id="help-content">
          <p>Tekan <strong>panah keyboard</strong> untuk memindahkan posisi kamera.
425
            <br />Tekan <strong>spasi</strong> untuk memulai/menghentikan animasi.
Rachmat Ridwan's avatar
Rachmat Ridwan committed
426
427
428
          </p>
        </div>
      </div>
Agas Yanpratama's avatar
Agas Yanpratama committed
429
430
    </div>
  </div>
Rachmat Ridwan's avatar
Rachmat Ridwan committed
431
432
433
</body>

</html>