Toon Shading

C A R L
V O N
O S S I E T Z K Y
Toon Shading
Johannes Diemke
Übung im Modul OpenGL mit Java
Wintersemester 2010/2011

Toon Shading
Grundlagen
Gelegentlich auch Cel Shading genannt
Verfahren zum nicht-fotorealistischen Rendern
Imitiert Zeichenstil von Comics
Charakteristika
◮ Fette Außenlinien
◮ 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
Umsetzung
Mehrere alternative Vorgehensweisen
◮ Von trivial bis anspruchsvoll
◮ Trade-off zwischen Komplexität und visueller Qualität
Ein mögliches Vorgehen
1 Zeichnen der Back-Faces mit fetten Linien
2 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
◮ Transformiert Vertex in den Clipspace
◮ Berechnet Eyespace-Normale
◮ Übergibt 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
◮ Pro-Fragment-Berechnung des Shading
◮ Beleuchtungsberechnung wie bei diffuser Komponente
◮ 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.)
◮ Abbildung auf wenige Schattierungsstufen über 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 Shreiner
OpenGL Programming Guide
http://www.opengl-redbook.com/
Richard S. Wright, Benjamin Lipchak und Nicholas Haemel
OpenGL SuperBibel
http://www.starstonesoftware.com/OpenGL/
Randi J. Rost
OpenGL Shading Language
http://www.3dshaders.com/
Tomas Akenine-Möller, Eric Haines und Naty Hoffman
Real-Time Rendering
http://www.realtimerendering.com/
Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 11/12

Literatur
Edward Angel
Interactive Computer Graphics
http://www.cs.unm.edu/˜angel/
Gerald Farin und Dianne Hansford
Practical Linear Algebra
http://www.farinhansford.com/books/pla/
Fletcher Dunn und Ian Parberry
3D Math Primer for Graphics and Game Development
www.gamemath.com/
Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 12/12