C A R LV O N

O S S I E T Z K Y

Toon Shading

Johannes Diemke

Ubung im Modul OpenGL mit JavaWintersemester 2010/2011

Toon Shading

Grundlagen

Gelegentlich auch Cel Shading genannt

Verfahren zum nicht-fotorealistischen Rendern

Imitiert Zeichenstil von Comics

Charakteristika

I Fette AußenlinienI Wenige Schattierungsstufen

Verwendung in Zeichentrickfilmen und Computerspielen

Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 2/12

Toon Shading

The Legend of Zelda: The Wind Waker

Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 3/12

Toon Shading

Team Fortress 2 (Toon Shading Mod)

Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 4/12

Toon Shading

UmsetzungMehrere alternative Vorgehensweisen

I Von trivial bis anspruchsvollI Trade-off zwischen Komplexitat und visueller Qualitat

Ein mogliches Vorgehen

1 Zeichnen der Back-Faces mit fetten Linien2 Berechnung des Shading

Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 5/12

Toon Shading

Schritt 1: Zeichnen der Back-Faces

Zeichnen der Back-Faces

Verwendung von fetten schwarzen Linien

// setup

gl.glEnable(GL2.GL_CULL_FACE);

...

// first renderpass

gl.glLineWidth(3.0f);

gl.glColor3f(0.0f, 0.0f, 0.0f);

// render back faces using lines

gl.glFrontFace(GL2.GL_CW);

gl.glPolygonMode(GL2.GL_FRONT, GL2.GL_LINE);

// render object

deathstar.draw(gl);

Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 6/12

Toon Shading

Schritt 2: Berechnung des Shading

Beleuchtungsberechnung wie bei diffuser Komponente

Danach Abbildung auf wenige Schattierungsstufen

Umsetzung mittels eines Shader-Programms

// second renderpass

// render front faces using a shader

gl.glFrontFace(GL2.GL_CCW);

gl.glPolygonMode(GL2.GL_FRONT, GL2.GL_FILL);

shader.activate(gl);

// render object

deathstar.draw(gl);

shader.deactivate(gl);

Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 7/12

Toon Shading

Schritt 2: Berechnung des Shading (Forts.)Vertex-Shader

I Transformiert Vertex in den ClipspaceI Berechnet Eyespace-NormaleI Ubergibt Eyespace-Normale an den Fragment-Shader

varying vec3 eyeSpaceNormal;

void main() {

eyeSpaceNormal = gl_NormalMatrix * gl_Normal;

gl_Position = ftransform();

}

Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 8/12

Toon Shading

Schritt 2: Berechnung des Shading (Forts.)Fragment-Shader

I Pro-Fragment-Berechnung des ShadingI Beleuchtungsberechnung wie bei diffuser KomponenteI Berechnet Kosinus des Winkels zwischen Normale und Lichtvektor

(Directional Light)

varying vec3 eyeSpaceNormal;

void main() {

vec3 normal = normalize(eyeSpaceNormal);

float intensity = dot(normalize(gl_LightSource[0].position.xyz), normal);

gl_FragColor = toonify(intensity);

}

Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 9/12

Toon Shading

Schritt 2: Berechnung des Shading (Forts.)Fragment-Shader (Forts.)

I Abbildung auf wenige Schattierungsstufen uber toonify()

vec4 toonify(in float intensity) {

if(intensity > 0.95)

return vec4(0.5, 1.0, 0.5, 1.0);

else if(intensity > 0.5)

return vec4(0.3, 0.6, 0.3, 1.0);

else if(intensity > 0.25)

return vec4(0.2, 0.4, 0.2, 1.0);

else

return vec4(0.1, 0.2, 0.1, 1.0);

}

Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 10/12

Literatur

� Dave ShreinerOpenGL Programming Guidehttp://www.opengl-redbook.com/

� Richard S. Wright, Benjamin Lipchak und Nicholas HaemelOpenGL SuperBibelhttp://www.starstonesoftware.com/OpenGL/

� Randi J. RostOpenGL Shading Languagehttp://www.3dshaders.com/

� Tomas Akenine-Moller, Eric Haines und Naty HoffmanReal-Time Renderinghttp://www.realtimerendering.com/

Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 11/12

Literatur

� Edward AngelInteractive Computer Graphicshttp://www.cs.unm.edu/˜angel/

� Gerald Farin und Dianne HansfordPractical Linear Algebrahttp://www.farinhansford.com/books/pla/

� Fletcher Dunn und Ian Parberry3D Math Primer for Graphics and Game Developmentwww.gamemath.com/

Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 12/12