Introduction to 3D and shaders
-
Upload
victor-porof -
Category
Documents
-
view
3.202 -
download
1
Transcript of Introduction to 3D and shaders
![Page 1: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/1.jpg)
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
![Page 2: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/2.jpg)
SELF.SELF.
Victor PorofVictor Porof
instanceof
class Programmer extends Geek
+= 3D
+= Low-level stuff
+= iPhone | iPod | iPad programmer
+= Part time student
![Page 3: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/3.jpg)
PRODUCT – ABSTRACTIONPRODUCT – ABSTRACTION
??
![Page 4: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/4.jpg)
PRODUCT – ABSTRACTION = TECHNIQUEPRODUCT – ABSTRACTION = TECHNIQUE
DirectDirectXX
openGopenGLLES 1.1; 2.0ES 1.1; 2.0 HLSLHLSL
GLSLGLSL CgCg
![Page 5: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/6.jpg)
![Page 7: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/8.jpg)
SINCE DIRECTX 7 | OPENGL 2.0SINCE DIRECTX 7 | OPENGL 2.0
![Page 9: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/9.jpg)
PICASSO & DAVINCIPICASSO & DAVINCI
??
![Page 10: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/10.jpg)
HOW 3D STUFF WORKS IN GENERALHOW 3D STUFF WORKS IN GENERAL
![Page 11: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/11.jpg)
HOW 3D STUFF WORKS IN GENERALHOW 3D STUFF WORKS IN GENERAL
..let’s simplify things (sort of)
![Page 12: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/12.jpg)
HOW 3D STUFF WORKS IN GENERALHOW 3D STUFF WORKS IN GENERAL
..hopefully you got the idea (sort of)
![Page 13: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/13.jpg)
HOW 3D DATA IS PROCESSEDHOW 3D DATA IS PROCESSED
![Page 14: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/14.jpg)
VERTICES, PIXELS, MATRICESVERTICES, PIXELS, MATRICES
• HLSLHLSL• “high level shading language”
• GLSLGLSL• “openGL shading language”• “Glslang”
• CgCg• “C for graphics”
SL
![Page 15: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/15.jpg)
SHADING LANGUAGES EVOLUTIONSHADING LANGUAGES EVOLUTION
![Page 16: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/16.jpg)
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;
…
![Page 17: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/17.jpg)
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);
}
![Page 18: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/18.jpg)
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);
}
![Page 19: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/19.jpg)
HOW 3D STUFF WORKS IN GENERALHOW 3D STUFF WORKS IN GENERAL
..remember this?
![Page 20: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/20.jpg)
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);
}
![Page 21: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to 3D and shaders](https://reader036.fdocuments.in/reader036/viewer/2022062319/554ca7c5b4c905c10d8b583b/html5/thumbnails/22.jpg)
??