WebGL tutorijal
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

WebGL tutorijal

on

  • 311 views

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

Statistics

Views

Total Views
311
Views on SlideShare
299
Embed Views
12

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 12

http://www.quinced.com 12

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WebGL tutorijal Presentation 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!