-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1474 lines (1359 loc) · 54.5 KB
/
index.html
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
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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
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
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Introduction to WebGL</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<img src="images/webgl.png" style="border:0px; size:80%;"/>
<h1 style="color: #FFF" ;>An Introduction</h1>
<p style="color: #EEE">05.04.2017</p>
<p>Eirik Ola Aksnes | Thomas Johansen</p>
<aside class="notes">
<ul>
<li>Jeg har hvert så heldig å jobbe med en WebGL på et prosjekt hos en kunde.</li>
<li>Hvor mange har jobbet med WebGL?</li>
</ul>
</aside>
</section>
<section data-background-iframe="webgl/intro/index.html"></section>
<section data-background-iframe="http://blog.melindalu.com/media/2015-06-14-seaflailing/">
<h1>Agenda</h1>
<ul>
<li>3D on the Web</li>
<li>Hello Canvas (2D)</li>
<li>Hello WebGL (3D)</li>
<li>Draw Something Meaningful</li>
<li>Three.js to the rescue!</li>
<li>Great Examples</li>
<li>References</li>
</ul>
</section>
<section>
<section>
<h1>3D on the Web</h1>
</section>
<section>
<h2>BEFORE (PLUG-INS)</h2>
<ul>
<li>Adobe Flash, MS Silverlight</li>
<li>Java OpenGL, JOGL, Java 3D</li>
<li>O3D</li>
<li>VRML, X3D/X3DOM</li>
</ul>
<aside class="notes">
<ul>
<li>
Alle har behov for plug-ins
</li>
<li>
Integrasjonen med websida er så som så, alt fra fraværende til delvis mulig
</li>
</ul>
</aside>
</section>
<section>
<h2>OpenGL</h2>
<ul style="font-size: 80%">
<li>1992 - OpenGL 1.0</li>
<ul>
<li>Direct-mode rendering</li>
<li>Fixed pipeline</li>
</ul>
<li>2004 - OpenGL 2.0</li>
<ul>
<li>Programmable pipeline: vertex (position calculator) and fragment (color chooser) shading
stages of the pipeline
</li>
<li>OpenGL Shading Language</li>
</ul>
<li style="color:red">2007 - OpenGL ES 2.0</li>
<ul>
<li>Designed for mobile phones, embedded devices and video game systems</li>
</ul>
<li>2010 - OpenGL 4.0</li>
<li style="color:red">2011 - WebGL 1.0</li>
<li>2012 - OpenGL ES 3.0</li>
<li>2014 - OpenGL 4.5</li>
<li>2017 - WebGL 2.0</li>
</ul>
</section>
<section>
<h2>NOW</h2>
<div>OpenGL ES 2.0 + JavaScript + HTML5 canvas</div>
<div>=</div>
<h3>WebGL</h3>
</section>
<section>
<h1>YAY!</h1>
<ul style="list-style-type:none;">
<li class="fragment">+ NO Plugins!</li>
<li class="fragment">+ Integrates nicely in website</li>
</ul>
<aside class="notes">
<ul>
<li>
WebGL krever ingen plugins
</li>
<li>
WebGL elementet(ene) blir rett og slett en del av websiden, og ikke som en ekstern
applikasjon.
</li>
</ul>
</aside>
</section>
<section data-background-iframe="http://caniuse.com/#feat=webgl"></section>
</section>
<section>
<section>
<h1>Hello Canvas (2D)</h1>
<aside class="notes">
Da er det på tide å se på litt kode. Først ut så ser vi på Canvas elementet.
</aside>
</section>
<section>
<h2>1. Create a canvas element</h2>
<pre><code contenteditable>
<canvas id="myCanvas" width="400" height="400" style="background-color: black;">
Your browser doesn't appear to support the HTML5 <canvas> element.
</canvas>
</code></pre>
<canvas id="myCanvas" width="400" height="400" style="background-color: black;">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
</section>
<section>
<h2>2. Obtain a drawing context</h2>
<p>
<pre><code contenteditable>
var canvas = document.getElementById("myCanvas");
var drawingContext = canvas.getContext("2d");
</code></pre>
</p>
<aside class="notes">
For å manipulere/endre på lerreret må vi først hente konteksten for 2D manipulering.
</aside>
</section>
<section>
<h2>3. Draw something</h2>
<pre><code class="javascript">
drawingContext.strokeStyle = "#0000FF";
drawingContext.fillStyle = "#00FF00";
drawingContext.lineWidth = 4;
drawingContext.beginPath();
drawingContext.moveTo(250,0);
drawingContext.lineTo(500,500);
drawingContext.lineTo(0,500);
drawingContext.lineTo(250,0);
drawingContext.fill();
drawingContext.stroke();
drawingContext.closePath();
</code></pre>
<aside class="notes">
Som i Java og mange andre språk så kan vi bruke primitive instruksjoner som flytt, tegnlinje, velge
malerkost for å tegne i ett "koordinatsystem".
</aside>
</section>
<section>
<h2>3. The result</h2>
<div>
<canvas id="myRectangle" width="500" height="500" style="background-color: black;text-align:center">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("myRectangle");
if (canvas.getContext) {
var drawingContext = canvas.getContext("2d");
drawingContext.strokeStyle = "#0000FF";
drawingContext.fillStyle = "#00FF00";
drawingContext.lineWidth = 4;
drawingContext.beginPath();
drawingContext.moveTo(250, 0);
drawingContext.lineTo(500, 500);
drawingContext.lineTo(0, 500);
drawingContext.lineTo(250, 0);
drawingContext.fill();
drawingContext.stroke();
drawingContext.closePath();
// 3D effect :p
drawingContext.strokeStyle = "#5555FF";
drawingContext.fillStyle = "#22AA22";
drawingContext.lineWidth = 4;
drawingContext.beginPath();
drawingContext.moveTo(250, 0);
drawingContext.lineTo(480, 430);
drawingContext.lineTo(500, 500);
drawingContext.lineTo(250, 0);
drawingContext.fill();
drawingContext.stroke();
drawingContext.closePath();
}
</script>
<iframe width="550" height="550"></iframe>
</section>
</section>
<section>
<section>
<h1>
Hello WebGL (3D)
</h1>
<aside class="notes">
<ul>
<li>
I de to neste to seksjonene vil jeg si noe om;
<ul>
<li>
Hvordan WebGL fungerer
</li>
<li>
Hva som trengs for å lage WebGL applikasjoner
</li>
</ul>
</li>
<li>
Tenkte å starte å introdusere WebGL med et veldig enkelt eksempel
</li>
</ul>
</aside>
</section>
<section>
<h2>Draw a blue background</h2>
<p>
<iframe data-src="webgl/webgl_background/blue.html" width="350" height="350"></iframe>
</p>
<ul>
<li>
As simple as it gets (with raw WebGL)
</li>
</ul>
<aside class="notes">
<ul>
<li>
Så enkelt som det kan bli
</li>
</ul>
</aside>
</section>
<section>
<h2>The Code!</h2>
<pre><code contenteditable>
<html>
<head>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('canvas');
var gl = canvas.getContext("webgl");
gl.clearColor(0, 0, 0.5, 1);
gl.clear(gl.COLOR_BUFFER_BIT); // Call the clear function to set the color
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
</code></pre>
<ul>
<li>
Create a canvas element
</li>
<li>
Get a reference to the canvas element
</li>
<li>
Obtain a WebGL context <!--(the context name can vary from browser to browser)-->
</li>
<ul>
<li>
Through <i>gl</i> (JavaScript object) we can access all WebGL functionality
</li>
</ul>
<li>
Set background color to blue
</li>
</ul>
<aside class="notes">
<ul>
<li>
Det er enkelt og raskt å komme i gang med WebGL:
<ul>
<li>
Ingen installasjon
</li>
<li>
Ingen byggeskript (makefiles, scons), som du har med C++ applikasjoner og OpenGL
</li>
<li>
Nettleseren gjør arbeidet for deg
</li>
</ul>
</li>
</ul>
</aside>
</section>
</section>
<section>
<section>
<h1>Draw Something Meaningful</h1>
<aside class="notes">
<ul>
<li>
I denne seksjonen skal vi se på ett litt mer meningsfylt eksempel, vi skal tegne en trekant!
</li>
<li>
Det er fortsatt et enkelt eksempel, men som vi skal se, så kreves det litt arbeid for å
faktisk kunne tegne en trekant
</li>
</li>
</ul>
</aside>
</section>
<section>
<h2>Draw A Triangle</h2>
<iframe data-src="webgl/webgl_triangle/index.html" width="400" height="400"></iframe>
<ul>
<li>
Reusing the code from the previous example (blue background)
</li>
</ul>
</section>
<section>
<h2>
Low Level API
</h2>
<ul>
<li>
WebGL is designed
<ul>
<li>
To work directly with your GPU
</li>
<li>
So that you can build higher level libraries upon it
</li>
</ul>
</li>
</ul>
<aside class="notes">
<ul>
<li>
Siden WebGL er et lav nivå API;
<ul>
<li>Man gjøre mye selv</li>
<li>Man får forholdsvis lite hjelp av WebGL APIet</li>
<li>F.eks så har man ikke en funksjon som heter "tegn trekant"</li>
</ul>
</li>
<li>
Jeg har desverre ikke tid til å gå inpå alle detaljene
<!--rundt 3D grafikk og WebGL i denne seksjonen-->, men håper gi nok informasjon til at dere
får en slags ide om hvordan WebGL fungerer
</li>
<li>
Det blir litt teori først nå, før jeg vil vise noe kode
</li>
</ul>
</aside>
</section>
<section>
<h2>
How To Draw A Triangle?
</h2>
<p>
<img src="images/vertices2.png">
</p>
<ul>
<li>
The basic idea is to send a list of vertices to the GPU for drawing
</li>
<li>
A triangle is defined by three vertices (corner points)
</li>
</ul>
<aside class="notes">
Det man gjør er å:
<ul>
Lage en list over hjørnepunktene til trekanten (også kalt en vertex)
</li>
<li>
Disse hjørnepunktene blir så matet til GPUen
</li>
<li>
GPUen kjører så disse hjørnepunktene gjennom en pipeline (rørledning som det heter på norsk)
</li>
</li>
</ul>
</aside>
</section>
<section>
<h2>
Graphical Pipeline
</h2>
<p>
<img class="blackBackground" src="images/webgl-workflow-2_2.png">
</p>
<aside class="notes">
</aside>
</section>
<section>
<h2>
Programmable pipeline
</h2>
<p>
<img class="blackBackground" src="images/webgl-workflow-3_3.png">
</p>
<aside class="notes">
<ul>
<li>
I WebGL er pipelinen programmerbar, gjennom noe som kalles shadere.
</li>
<li>
Så hva er en shader?
</li>
</ul>
</aside>
</section>
<section>
<h2>What Are Shaders?</h2>
<ul>
<li>Small "programs" that runs on the GPU</li>
<li>Have a well-defined set of input/output values, some built-in and some user-defined</li>
<li>Written in OpenGL Shading Language (GLSL)</li>
<li>GLSL syntax is kinda like C</li>
<li>Generally regarded as fairly advanced, but it is actually much simpler than it looks</li>
</ul>
</section>
<section>
<h2>
Shader Effect Examples
</h2>
<p>
<iframe data-src="http://www.dasprinzip.com/pExamples/raymarcher03.htm" width="400"
height="400"></iframe>
<iframe data-src="http://www.dasprinzip.com/pExamples/raymarcher01.htm" width="400"
height="400"></iframe>
</p>
<ul>
<li>
Shaders can be used to create cool effects like lightning, shadowing, refraction, and more
</li>
</ul>
<p>
<a class="reference"
href="http://www.dasprinzip.com/prinzipiell/2011/02/21/raymarching/">Reference</a>
</p>
<aside class="notes">
<li>
Med shadere kan implementere egne metoder/algoritmer for å oppnå ønskede effekter (lys,
skyggelegging, refleksjoner)
</li>
<!--<li>
Man kan lage effekter som ville vært svært vanskelig å få til ved hjelp av en "fixed function pipeline"
</li>-->
<li>
I disse to eksemplene er det samme datagrunnlag, men vet å anvende forskjellige shader, så får
man forskjellige effekter!
</li>
</aside>
</section>
<section>
<h2>Shaders In WebGL</h2>
<ul>
<li>There are two shader types (two stages of the pipeline are programmable):
<ul>
<li>
A vertex shader (process vertices)
</li>
<li>
A fragment shader (process fragments/pixels)
</li>
</ul>
</li>
<li>You will need both shaders in order to draw anything on the screen</li>
<li>For standard usage, these shaders are quite simple</li>
<li>No default shaders</li>
<li>You need to write your own shaders or use one provided by a WebGL library (copy and paste)</li>
</ul>
<aside class="notes">
</aside>
</section>
<!--<section>
<h2>
We have to use Vertex Buffer Objects (VBOs)
</h2>
<ul>
<li>No immediate mode rendering (you cannot use glBegin and glEnd)
<pre><code contenteditable class="java">
glBegin(GL_TRIANGLES);
glVertex2f(0.0f, 1.0f);
glVertex2f(0.87f, -0.5f);
glVertex2f(-0.87f, -0.5f);
glEnd();
</code></pre>
</li>
<li>Instead must use Vertex Buffer Objects (VBOs) and
<ul>
<li>Better performance</li>
</ul>
</li>
</ul>
</section>-->
<!--
<section>
<h2>
Differences To Other OpenGL Versions
</h2>
<ul>
<li>No built-in matrix functions:
<ul>
<li>
glLoadIdentity(), glTranslatef(), glRotatef(), glScalef(), glMultMatrixf(), glFrustum() and glOrtho().
</li>
</ul>
</li>
<li>Instead you must have your own matrix implementations and the matrix data to shaders</li>
</ul>
</section>-->
<section>
<h2>Simplified WebGL Pipeline</h2>
<p>
<img class="blackBackground" src="images/webgl-workflow.png">
</p>
<p>
<a class="reference" href="http://third-dimension-webgl-threejs.herokuapp.com/">Reference</a>
</p>
<aside class="notes">
<ul>
<li>Det som skjer er at;
<ul>
<li>
Først blir hjørnepunktene lastet opp til GPU minnet
</li>
<li>
Så blir hjørnepunktene kjørt gjennom en vertex shader, som har i oppgave å
posisjonere ut hjørnepunktene
</li>
<li>
Så blir resultatet fra vertex shaderen sendt videre til en fragment shader som har i
oppgave å fargelege mellom hjørnepunktene
</li>
<li>
Til slutt så blir det generert et bilde
</li>
</ul>
</li>
<li>
Nå er vi ferdig med grunnlegende teori og skal se på noe kode på hvordan vi kan tegne
trekanten!
</li>
</ul>
</aside>
</section>
<section>
<h2>Create A Buffer</h2>
<p>
<ul>
<li>
That contains the three vertices (corners) of the triangle
</li>
</ul>
</p>
<pre><code contenteditable>
function createBuffer(gl) {
// Create buffer
var vertexPositionBuffer = gl.createBuffer();
// Activate buffer
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
var triangleVertices = [
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
// Copy vertices to buffer (on the GPU)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
return vertexPositionBuffer;
}
</code></pre>
<aside class="notes">
<ul>
<li>
Vi må lage oss et buffer som inneholder de tre hjørnepunktene til trekanten.
</li>
<li>
Det vi gjør:
<ul>
<li>
Lager ett nytt buffer
</li>
<li>
Aktiverer bufferet
</li>
<li>
Lager en liste over hjørnepunktene med JavaScript
</li>
<li>
Til slutt så kopiere vi listen med hjørnepunkt over til det allokerte GPU minnet
</li>
</ul>
</li>
<!--<li>
Clipspace koordinater går alltid fra -1 til 1 uansett hvilken størrelse lerretet er
</li>
<li>
Buffers that contain vertex data are known as Vertex Buffer Objects (VBOs)
</li>
<li>
Coordinates in WebGL are real numbers. There is a default coordinate system in which x goes from -1 at the left to 1 at the right and y goes from -1 at the bottom to 1 at the top. [The z coordinate is also limited to the range -1 to 1.] Values outside these ranges are clipped. This default coordinate system is referred to as clip coordinates.
</li>
<li>
Clipspace coordinates always go from -1 to +1 no matter what size your canvas is
</li>-->
</ul>
</aside>
</section>
<section>
<h2>A Simple Vertex Shader</h2>
<ul>
<li>
Executed 3 times, once for every vertex of the triangle
</li>
<li>
Its job is to set something called gl_Position, the final position of a vertex on the viewport
(i.e. screen)
</li>
<!--<li>
Viewable area in x, y, and z are between -1 and +1 no matter what size your canvas is, everything else is clipped away
</li>
<li>
Actually talking about getting a 3D position (x,y,z) onto, or projected, to a 2D screen (x,y)
</li>-->
</ul>
<pre><code contenteditable>
<script id="vertex" type="x-shader">
attribute vec2 vertexPosition;
void main() {
gl_Position = vec4(vertexPosition, 0, 1); //xyzw
}
</script>
</code></pre>
<aside class="notes">
<ul>
<li>
For å få posisjonert ut disse hjørnepuntkene må man lage seg en vertex shader.
</li>
<li>
Dette er en veldig enkel vertex shader som har i oppgave å posisjonere ut hjørnepunktene
</li>
<li>
Denne vertex shaderen tar bare verdiene direkte ifra bufferet og setter det som endelig posisjon
</li>
<li>
gl_Position er en innebygd variabel
</li>
<!--<li>
Ingen prosessering skjer her, det vil si, alle hjørnepuntene får de samme verdiene som de verdiene som er lagret i bufferet
</li>
<li>
type="x-shader" means browser ignores the contents of the script tag
</li>
<li>
The vertex shader converts 3d coordinates of your objects (or any geometry) from 3D coordinates to 2D coordinates of the screen using transformation matrices - one to convert from local to space to world space (the worldMatrix), and another one to convert from world coordinates into screen coordinates (the viewProjection matrix)
</li>-->
</ul>
<!--<ul>
<li>
The main purpose of the Vertex shader is to compute the screen coordinate of a vertex (where this vertex will be displayed on screen)
</li>
</ul>-->
</aside>
</section>
<section>
<h2>A Simple Fragment Shader</h2>
<ul>
<li>
Executed once for every pixel covered by the triangle
</li>
<li>
The GPU figures out which pixels on the screen that are covered by the triangle
</li>
<li>
Its job is to set something called gl_FragColor, the final colour of a pixel
</li>
</ul>
<pre><code contenteditable>
<script id="fragment" type="x-shader">
void main() {
// Just apply the same color (rgba) to every pixel covered by the triangle
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}
</script>
</code></pre>
<aside class="notes">
<ul>
<li>
For å få fargelagt trekanten må man lage seg en fragment shader.
</li>
<li>
Dette er en veldig enkel "fragment shader" som vil fargelege alle pikselene grønn mellom
hjørnepuntene til trekanten
</li>
</ul>
<p>
Fragment shaders typically:
</p>
<ul>
<li>
Apply texture.
</li>
<li>
Perform lighting calculations.
</li>
<li>
Add in 'atmospheric' effects: fog, etc.
</li>
</ul>
</aside>
</section>
<section>
<h2>Create And Compile Shaders</h2>
<pre><code contenteditable>
function createShader(str, type) {
var shader = gl.createShader(type);
gl.shaderSource(shader, str);
gl.compileShader(shader);
return shader;
}
var vertexShader = createShader(document.getElementById("vertex").innerHTML, gl.VERTEX_SHADER);
var fragmentShader = createShader(document.getElementById("fragment").innerHTML, gl.FRAGMENT_SHADER);
</code></pre>
<aside class="notes">
</aside>
</section>
<section>
<h2>Create A Shader Program</h2>
<ul>
<li>
The vertex shader and fragment shader are linked together into a shader program (or just
program)
</li>
</ul>
<pre><code contenteditable>
function createShaderProgram(gl, vertexShader, fragmentShader) {
// A program consists of a vertex and fragment shader
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// Set the specified program as the currently active program
gl.useProgram(program);
return program;
}
</code></pre>
<aside class="notes">
</aside>
</section>
<section>
<h2>Vertex Shader Attributes</h2>
<ul>
<li>
Attributes is input to the vertex shader
</li>
<li>
Each vertex normally has a set of attributes associated with it;
<ul>
<li>
Position
</li>
<li>
Color
</li>
<li>
Normal
</li>
</ul>
</li>
</ul>
<pre><code contenteditable>
function vertexShaderAttributes(gl, shaderProgram, vertexPositionBuffer) {
// Make the vertices available to the vertex shaders
shaderProgram.vertexPositionAttrb = gl.getAttribLocation(shaderProgram, 'vertexPosition');
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttrb);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttrb, 2, gl.FLOAT, false, 0, 0);
}
</code></pre>
<aside class="notes">
<ul>
<li>
Vertex shaderen får altså data fra bufferet, så hva vi gjør her er å fortelle hvordan vertex
shaderen skal lese data fra bufferet. F.eks at trekant hjørnepuntene skal leses som
"vertexPosition"
</li>
</ul>
</aside>
</section>
<section>
<h2>Draw The Triangle</h2>
<pre><code class="javascript" contenteditable>
gl.drawArrays(gl.GL_TRIANGLES, 0, 3);
</code></pre>
<ul>
<li>
Draw a triangle using GL_TRIANGLES primitive, it treats each triplet of vertices as an independent triangle.
</li>
<li>
Primitive is important parameter since it determines how many triangles will be generated
</li>
</ul>
<p>
<img src="images/gl-primitives.png">
</p>
<aside class="notes">
<ul>
<li>
Vi har nå alt som trengs for å tegne vår trekant
</li>
</ul>
</aside>
</section>
<section>
<h2>
The Result
</h2>
<iframe data-src="webgl/webgl_triangle/index.html" width="400" height="400"></iframe>
<p>
<a href="https://github.com/eoaksnes/introduction-to-webgl/blob/master/webgl/webgl_triangle/index.html"
target="_blank">The code!</a>
</p>
</section>
<!--<section>
<h2>What are primitives?</h2>
<ul>
<li>Point (x,y,z)</li>
<li>Line (composed by two points)</li>
<li>Triangle (composed by three points)</li>
</ul>
<aside class="notes">
</aside>
</section>-->
<section>
<h2>The bottom line</h2>
<ul>
<li>
A lot of work (low level API)
</li>
<li>
Any WebGL program will have similar structure;
<ul>
<li>
Obtain a WebGL context from the canvas element
</li>
<li>
Upload drawing data into buffers
</li>
<li>
Create and compile shaders
</li>
<li>
Create a shader program
</li>
<li>
Draw
</li>
</ul>
</li>
<li>
Higher level libraries will be a big help!
</li>
</ul>
<aside class="notes">
<ul>
<li>
Som vi ser, må man gjøre en del selv. Man får forholdsvis lite hjelp av WebGL APIet
</li>
<li>
Dette gjør at man i mange sammenhenger velger å bruke høyerenivå APIer bygd på WebGL
</li>
<li>
Vi skal ta en titt på ett høyerenivå API nå i neste seksjon
</li>
</ul>
</aside>
</section>
</section>
<section>
<section>
<h1>THREE.js TO THE RESCUE!</h1>
<aside class="notes">
<ul>
<li>
Three.js til unnsetning
</li>
</ul>
</aside>
</section>
<section>
<h2>Three.js</h2>
<ul>
<li>Easy to use (designed for dummies)</li>
<li>Hides the details of 3D rendring</li>
<li>Maintained under GitHub <a href="https://github.com/mrdoob/three.js/">https://github.com/mrdoob/three.js/</a>
</li>
<li>Lots of examples in the examples directory</li>
</ul>
<aside class="notes">