Introduction to 3D and shaders

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

??