Introduction to 3D and shaders

3,848 views

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,848
On SlideShare
0
From Embeds
0
Number of Embeds
688
Actions
Shares
0
Downloads
92
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Introduction to 3D and shaders

  1. 1. INTRODUCTION TO 3D AND SHADERS YOU CAN’T DRAW MONA LISA WITH A CPU
  2. 2. SELF. <ul><li>Victor Porof </li></ul><ul><li>instanceof </li></ul><ul><li>class Programmer extends Geek </li></ul><ul><li>+= 3D </li></ul><ul><li>+= Low-level stuff </li></ul><ul><li>+= iPhone | iPod | iPad programmer </li></ul><ul><li>+= Part time student </li></ul>
  3. 3. PRODUCT – ABSTRACTION <ul><li> ? </li></ul>
  4. 4. PRODUCT – ABSTRACTION = TECHNIQUE DirectX openGL ES 1.1; 2.0 HLSL GLSL Cg
  5. 5. WE’LL TALK ABOUT.. <ul><li>Super Mario </li></ul><ul><li>What is DirectX | openGL | QuickDraw </li></ul><ul><li>Mythbusters, CPU & GPU </li></ul><ul><li>What happened since DirectX 7 | openGL 2.0 </li></ul><ul><li>Picasso & DaVinci </li></ul><ul><li>How 3D stuff works in general, and how 3D data is processed </li></ul><ul><li>Vertices, Pixels, Matrices </li></ul><ul><li>How does low level GPU programming taste like </li></ul><ul><li>Language & syntax </li></ul><ul><li>WebGL </li></ul>
  6. 7. WHAT IS DIRECTX | OPENGL | QUICKDRAW <ul><li>Application programming interfaces </li></ul><ul><li>Game programming </li></ul><ul><li>Data visualization </li></ul><ul><li>Graphics </li></ul><ul><li>Video </li></ul><ul><li>Sound </li></ul><ul><li>DirectX: Microsoft , in 1995 </li></ul><ul><li>OpenGL: Silicon Graphics Inc. (SGI), in 199 9 </li></ul><ul><li>QD3D: Apple, in 1995 </li></ul>
  7. 8. SINCE DIRECTX 7 | OPENGL 2.0
  8. 9. PICASSO & DAVINCI <ul><li> ? </li></ul>
  9. 10. HOW 3D STUFF WORKS IN GENERAL
  10. 11. HOW 3D STUFF WORKS IN GENERAL <ul><li>..let’s simplify things (sort of) </li></ul>
  11. 12. HOW 3D STUFF WORKS IN GENERAL <ul><li>..hopefully you got the idea (sort of) </li></ul>
  12. 13. HOW 3D DATA IS PROCESSED
  13. 14. VERTICES, PIXELS, MATRICES <ul><li>HLSL </li></ul><ul><ul><li>“ high level shading language” </li></ul></ul><ul><li>GLSL </li></ul><ul><ul><li>“ openGL shading language” </li></ul></ul><ul><ul><li>“ Glslang” </li></ul></ul><ul><li>Cg </li></ul><ul><ul><li>“ C for graphics” </li></ul></ul>SL
  14. 15. SHADING LANGUAGES EVOLUTION
  15. 16. LOW LEVEL GPU PROGRAMMING <ul><li>DEFINE LUMINANCE = {0.299, 0.587, 0.114, 0.0}; </li></ul><ul><li>TEX H0, f[TEX0], TEX4, 2D; </li></ul><ul><li>TEX H1, f[TEX2], TEX5, CUBE; </li></ul><ul><li>DP3X H1.xyz, H1, LUMINANCE; </li></ul><ul><li>MULX H0.w, H0.w, LUMINANCE.w; </li></ul><ul><li>MULX H1.w, H1.x, H1.x; </li></ul><ul><li>MOVH H2, f[TEX3].wxyz; </li></ul><ul><li>MULX H1.w, H1.x, H1.w; </li></ul><ul><li>DP3X H0.xyz, H2.xzyw, H0; </li></ul><ul><li>… </li></ul>
  16. 17. LANGUAGE AND SYNTAX <ul><li>//the vertex shader </li></ul><ul><li>attribute vec3 vertPosition; </li></ul><ul><li>attribute vec2 vertTexCoord; </li></ul><ul><li>uniform mat4 mvMatrix; </li></ul><ul><li>uniform mat4 projMatrix; </li></ul><ul><li>varying vec2 texCoord; </li></ul><ul><li>void main() { </li></ul><ul><li>texCoord = vertTexCoord; </li></ul><ul><li>gl_Position = projMatrix * mvMatrix * vec4(vertPosition, 1); </li></ul><ul><li>} </li></ul>
  17. 18. LANGUAGE AND SYNTAX <ul><li>//the pixel (fragment) shader </li></ul><ul><li>uniform vec4 tint; </li></ul><ul><li>uniform sampler2D sampler; </li></ul><ul><li>varying vec2 texCoord; </li></ul><ul><li>void main() { </li></ul><ul><li>gl_FragColor = tint * texture2D(sampler, texCoord); </li></ul><ul><li>} </li></ul>
  18. 19. HOW 3D STUFF WORKS IN GENERAL <ul><li>..remember this? </li></ul>
  19. 20. TRANSFORMATIONS <ul><li>//a very simple way to project 3D objects on a 2D screen </li></ul><ul><li>uniform Transformation { </li></ul><ul><li>mat4 projection_matrix; </li></ul><ul><li>mat4 modelview_matrix; </li></ul><ul><li>}; </li></ul><ul><li>in vec3 vertex; </li></ul><ul><li>void main() { </li></ul><ul><li>gl_Position = projection_matrix * modelview_matrix * vec4(vertex, 1.0); </li></ul><ul><li>} </li></ul>
  20. 21. WEBGL <ul><li>A context of the HTML 5 canvas </li></ul><ul><li>Based on openGL ES 2.0 </li></ul><ul><li>Brings 3D hardware accelerated graphics to the browser </li></ul><ul><li>Javascript </li></ul><ul><li>Engines: </li></ul><ul><ul><li>WebGLU </li></ul></ul><ul><ul><li>GLGE </li></ul></ul><ul><ul><li>C3DL </li></ul></ul><ul><ul><li>Copperlicht </li></ul></ul><ul><ul><li>SpiderGL </li></ul></ul><ul><ul><li>SceneJS </li></ul></ul><ul><ul><li>Processing.js </li></ul></ul><ul><ul><li>O3D </li></ul></ul>
  21. 22. <ul><li>? </li></ul>

×