WebGL tutorijal

  • 193 views
Uploaded on

www.quinced.com …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
193
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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()
  • 10. Setting the scene
  • 11. gl-matrix
  • 12. 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);
  • 13. varying vec4 vColor; vColor = aVertexColor; gl_FragColor = vColor;
  • 14. varying vec2 vTexture; vTexture = aVertexTexture; uniform sampler2D uSampler; gl_FragColor = texture2D(uSampler, vTexture); textureCoordinates = [...] function initTextures() gl.texImage2D(...) gl.texParameteri(...) gl.activeTexture(...)
  • 15. 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)
  • 16. window.requestAnimationFrame(tick); function animate()
  • 17. vertices = [...]; vertexNormals = [...]; textureCoordinates = [...]; triangles = [...];
  • 18. Vertexi (koordinate) Matrice transformacija attribute Boje uniform Mapiranje tekstura varying Normale za osvetljenje Animacija Matematika Vertex shader Fragment shader
  • 19. How it’s made
  • 20. Šta fali? Mnoge oblasti: napredno osvetljenje, upravljanje tekstom, interakcija sa korisnikom, blending, manipulacija 3D modelima…. Komunikacija/komentari Interakcija Three.js
  • 21. Zašto tutorijal?
  • 22. Odnos prema učenju
  • 23. INFORMACIJE VIŠE sadržaja MANJE kvalitetnog
  • 24. INDIVIDUALNOST Student > Profesor/Mentor? Profesor/Mentor > Student?
  • 25. Niko nema TOLIKO vremena da traži odgovor (ili bar tako oni misle)
  • 26. Šta će očekivati studenti za 10 godina? (ili bar šta mi mislimo o tome)
  • 27. Student će i dalje trebati mentora TUTORA
  • 28. > Saradnja / komunikacija [IZMEĐU SVIH KOJI KOMUNICIRAJU-RAZMENJUJU] + Alati / načini
  • 29. E-Learning?
  • 30. E-Learning? pa….ne baš
  • 31. 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)
  • 32. Hvala!