Embed Size (px)
Citation preview
INTR
ODUCTION T
O
INTR
ODUCTION T
O
3D 3D
AND SHADERS
AND SHADERS
YOU C
AN’T D
RAW M
ONA LISA W
ITH A
CPU
YOU C
AN’T D
RAW M
ONA LISA W
ITH A
CPU
SELF.SELF.
Victor PorofVictor Porof
instanceof
class Programmer extends Geek
+= 3D
+= Low-level stuff
+= iPhone | iPod | iPad programmer
+= Part time student
PRODUCT – ABSTRACTIONPRODUCT – ABSTRACTION
??
PRODUCT – ABSTRACTION = TECHNIQUEPRODUCT – ABSTRACTION = TECHNIQUE
DirectDirectXX
openGopenGLLES 1.1; 2.0ES 1.1; 2.0 HLSLHLSL
GLSLGLSL CgCg
WE’LL TALK ABOUT..WE’LL TALK ABOUT..
• Super MarioSuper Mario
• What is DirectX | openGL | QuickDrawWhat is DirectX | openGL | QuickDraw
• Mythbusters, CPU & GPUMythbusters, CPU & GPU
• What happened since DirectX 7 | openGL 2.0What happened since DirectX 7 | openGL 2.0
• Picasso & DaVinciPicasso & DaVinci
• How 3D stuff works in general, and how 3D data is How 3D stuff works in general, and how 3D data is processedprocessed
• Vertices, Pixels, MatricesVertices, Pixels, Matrices
• How does low level GPU programming taste likeHow does low level GPU programming taste like
• Language & syntaxLanguage & syntax
• WebGLWebGL
WHAT IS DIRECTX | OPENGL | WHAT IS DIRECTX | OPENGL | QUICKDRAWQUICKDRAWApplication programming interfacesGame programmingData visualization
• Graphics• Video• Sound
DirectX: Microsoft , in 1995OpenGL: Silicon Graphics Inc. (SGI), in 1999QD3D: Apple, in 1995
SINCE DIRECTX 7 | OPENGL 2.0SINCE DIRECTX 7 | OPENGL 2.0
PICASSO & DAVINCIPICASSO & DAVINCI
??
HOW 3D STUFF WORKS IN GENERALHOW 3D STUFF WORKS IN GENERAL
HOW 3D STUFF WORKS IN GENERALHOW 3D STUFF WORKS IN GENERAL
..let’s simplify things (sort of)
HOW 3D STUFF WORKS IN GENERALHOW 3D STUFF WORKS IN GENERAL
..hopefully you got the idea (sort of)
HOW 3D DATA IS PROCESSEDHOW 3D DATA IS PROCESSED
VERTICES, PIXELS, MATRICESVERTICES, PIXELS, MATRICES
• HLSLHLSL• “high level shading language”
• GLSLGLSL• “openGL shading language”• “Glslang”
• CgCg• “C for graphics”
SL
SHADING LANGUAGES EVOLUTIONSHADING LANGUAGES EVOLUTION
LOW LEVEL GPU PROGRAMMINGLOW LEVEL GPU PROGRAMMING
DEFINE LUMINANCE = {0.299, 0.587, 0.114, 0.0};
TEX H0, f[TEX0], TEX4, 2D;
TEX H1, f[TEX2], TEX5, CUBE;
DP3X H1.xyz, H1, LUMINANCE;
MULX H0.w, H0.w, LUMINANCE.w;
MULX H1.w, H1.x, H1.x;
MOVH H2, f[TEX3].wxyz;
MULX H1.w, H1.x, H1.w;
DP3X H0.xyz, H2.xzyw, H0;
…
LANGUAGE AND SYNTAXLANGUAGE AND SYNTAX
//the vertex shader
attribute vec3 vertPosition;
attribute vec2 vertTexCoord;
uniform mat4 mvMatrix;
uniform mat4 projMatrix;
varying vec2 texCoord;
void main() {
texCoord = vertTexCoord;
gl_Position = projMatrix * mvMatrix * vec4(vertPosition, 1);
}
LANGUAGE AND SYNTAXLANGUAGE AND SYNTAX
//the pixel (fragment) shader
uniform vec4 tint;
uniform sampler2D sampler;
varying vec2 texCoord;
void main() {
gl_FragColor = tint * texture2D(sampler, texCoord);
}
HOW 3D STUFF WORKS IN GENERALHOW 3D STUFF WORKS IN GENERAL
..remember this?
TRANSFORMATIONSTRANSFORMATIONS
//a very simple way to project 3D objects on a 2D screen
uniform Transformation {
mat4 projection_matrix;
mat4 modelview_matrix;
};
in vec3 vertex;
void main() {
gl_Position = projection_matrix * modelview_matrix * vec4(vertex, 1.0);
}
WEBGLWEBGL
• A context of the HTML 5 canvas
• Based on openGL ES 2.0
• Brings 3D hardware accelerated graphics to the browser
• Javascript
• Engines:
1. WebGLU2. GLGE3. C3DL4. Copperlicht5. SpiderGL6. SceneJS7. Processing.js8. O3D
??
