Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebGL tutorijal

633 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WebGL tutorijal

  1. 1. WebGL 3D GRAFIKA NA INTERNETU www.quinced.com
  2. 2. Preslikavanje realnosti
  3. 3. Shaders Okruženje Kvadrat Pojmovi Pipeline Transformacije Kocka Pojmovi Teksture Svetlo Animacija Sfera Okruženje Istorija, budućnost Primena
  4. 4. OpenGL OpenGL ES WebGL
  5. 5. LOW LEVEL mora malo da se misli
  6. 6. model > priprema > Crtaj! > vertex shader > fragment shader
  7. 7. HTML5 Canvas
  8. 8. Step by step
  9. 9. gl_Position = vec4(vpos, 0, 1); gl_FragColor = vec4(0,0,0,1); function getShader(...) function initShaders() function initWebGL(…) function start()
  10. 10. Setting the scene
  11. 11. gl-matrix
  12. 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. 13. varying vec4 vColor; vColor = aVertexColor; gl_FragColor = vColor;
  14. 14. varying vec2 vTexture; vTexture = aVertexTexture; uniform sampler2D uSampler; gl_FragColor = texture2D(uSampler, vTexture); textureCoordinates = [...] function initTextures() gl.texImage2D(...) gl.texParameteri(...) gl.activeTexture(...)
  15. 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. 16. window.requestAnimationFrame(tick); function animate()
  17. 17. vertices = [...]; vertexNormals = [...]; textureCoordinates = [...]; triangles = [...];
  18. 18. Vertexi (koordinate) Matrice transformacija attribute Boje uniform Mapiranje tekstura varying Normale za osvetljenje Animacija Matematika Vertex shader Fragment shader
  19. 19. How it’s made
  20. 20. Šta fali? Mnoge oblasti: napredno osvetljenje, upravljanje tekstom, interakcija sa korisnikom, blending, manipulacija 3D modelima…. Komunikacija/komentari Interakcija Three.js
  21. 21. Zašto tutorijal?
  22. 22. Odnos prema učenju
  23. 23. INFORMACIJE VIŠE sadržaja MANJE kvalitetnog
  24. 24. INDIVIDUALNOST Student > Profesor/Mentor? Profesor/Mentor > Student?
  25. 25. Niko nema TOLIKO vremena da traži odgovor (ili bar tako oni misle)
  26. 26. Šta će očekivati studenti za 10 godina? (ili bar šta mi mislimo o tome)
  27. 27. Student će i dalje trebati mentora TUTORA
  28. 28. > Saradnja / komunikacija [IZMEĐU SVIH KOJI KOMUNICIRAJU-RAZMENJUJU] + Alati / načini
  29. 29. E-Learning?
  30. 30. E-Learning? pa….ne baš
  31. 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. 32. Hvala!

×