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.

Introduction to 3D and shaders

3,975 views

Published on

  • Be the first to comment

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>

×