www.quinced.com Ovaj tutorijal je prvenstveno namenjen studentima informatike (i bliskih nauka) koji žele da se vannastavno upoznaju sa radom u WebGL tehnologiji i zamišljen je kao početna tačka u njihovom daljem istraživanju i učenju. Osnovna motivacija za izradu ovakvog tutorijala je da se ohrabre studenti da: - praktično primene znanja stečena na fakultetu, pogotovo u oblastima koje nisu obrađivali na izabranim kursevima - da se pripreme na atmosferu ubrzanog učenja koja ih očekuje na radnom mestu - da se sami okušaju u kreiranju sličnog sadržaja (tutorijala) s obzirom da se zbog povećanja odgovornosti prema (javnoj) publici i eventualnoj kritici koja se lako dobija na internetu bolje savladavaju izabrana obrađivana znanja. Photo credits: http://www.flickr.com/photos/13166455@N05/3269616653/in/photolist-5YVD7V-6TCPp9 http://www.flickr.com/photos/55016735@N03/5183931764/ http://www.flickr.com/photos/56404767@N00/3719790274 http://www.flickr.com/photos/thomasleuthard/5733278274/in/photostream/ http://www.flickr.com/photos/castlephotos/330701382/ http://www.flickr.com/photos/31189673@N08/3156805316/in/gallery-sandrineb-72157627038209474/ http://visual.ly/16-students-you-meet-college http://500px.com/photo/146227 http://www.flickr.com/photos/thomasleuthard/5663447078/in/photostream/ http://www.flickr.com/photos/fdecomite/3274039756/in/pool-povray

1. WebGL
3D GRAFIKA NA INTERNETU
www.quinced.com

2. Preslikavanje realnosti

3. Shaders
Okruženje
Kvadrat
Pojmovi
Pipeline
Transformacije
Kocka
Pojmovi
Teksture
Svetlo
Animacija
Sfera
Okruženje
Istorija, budućnost
Primena

4. OpenGL
OpenGL ES
WebGL

5. LOW LEVEL
mora malo da se misli

6. model > priprema > Crtaj! > vertex shader > fragment shader

7. HTML5 Canvas

8. Step by step

9. gl_Position = vec4(vpos, 0, 1);
gl_FragColor = vec4(0,0,0,1);
function getShader(...)
function initShaders()
function initWebGL(…)
function start()

13. Setting the scene

15. gl-matrix

16. gl_Position = pMatrix * mvMatrix * vec4(vpos, 1);
mat4.perspective(pMatrix, Math.PI/4, 400 / 400, 1, 1000);
mat4.translate(mvMatrix, mvMatrix, [0, 0, -10.0]);
mat4.rotateY(mvMatrix, mvMatrix, Math.PI/6);
mat4.rotateX(mvMatrix, mvMatrix, Math.PI/6);
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

17. varying vec4 vColor;
vColor = aVertexColor;
gl_FragColor = vColor;

18. varying vec2 vTexture;
vTexture = aVertexTexture;
uniform sampler2D uSampler;
gl_FragColor = texture2D(uSampler, vTexture);
textureCoordinates = [...]
function initTextures()
gl.texImage2D(...)
gl.texParameteri(...)
gl.activeTexture(...)

19. ambientLightColor = vec3(0.6, 0.6, 0.6);
directionalLightColor = vec3(0.0, 0.8, 0.7);
directionalVector = vec3(0.5, 0.5, 0.5);
vertexNormals = [...]
mat3.normalFromMat4(normalMatrix, mvMatrix);
attribute vec3 aVertexNormal;
uniform mat3 uNormalMatrix;
transformedNormal = uNormalMatrix * aVertexNormal;
directional = max(dot(transformedNormal, directionalVector), 0.0);
vLighting = ambientLightColor + (directionalLightColor * directional);
gl_FragColor = vec4(textureColor.rgb*vLighting, textureColor.a)

20. window.requestAnimationFrame(tick);
function animate()

21. vertices = [...];
vertexNormals = [...];
textureCoordinates = [...];
triangles = [...];

23. Vertexi (koordinate)
Matrice transformacija
attribute
Boje
uniform
Mapiranje tekstura
varying
Normale za osvetljenje
Animacija
Matematika
Vertex shader
Fragment shader

24. How it’s made

29. Šta fali?
Mnoge oblasti: napredno osvetljenje, upravljanje tekstom,
interakcija sa korisnikom, blending, manipulacija 3D modelima….
Komunikacija/komentari
Interakcija
Three.js

30. Zašto tutorijal?

31. Odnos prema učenju

32. INFORMACIJE
VIŠE sadržaja
MANJE kvalitetnog

33. INDIVIDUALNOST
Student > Profesor/Mentor?
Profesor/Mentor > Student?

34. Niko nema TOLIKO vremena da traži odgovor
(ili bar tako oni misle)

35. Šta će očekivati studenti za 10 godina?
(ili bar šta mi mislimo o tome)

36. Student će i dalje
trebati mentora TUTORA

37. > Saradnja / komunikacija
[IZMEĐU SVIH KOJI KOMUNICIRAJU-RAZMENJUJU]
+ Alati / načini

40. E-Learning?

41. E-Learning?
pa….ne baš

42. Studenti
Kritika i reakcija na kritiku
Jasne misli
Pismenost (pravopisna, akademska, idejna, poslovna, digitalna)
Izbegavanje “lošeg” društva
Poštovanje nauke
Otkrivanje talenata van okvira ocena
Kompromis nepomirljivog (naučna institucija <> produkcija radne snage)

43. Hvala!