1. CARL
VON
OSSIETZKY
Toon Shading
Johannes Diemke
¨
Ubung im Modul OpenGL mit Java
Wintersemester 2010/2011

2. 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

3. Toon Shading
The Legend of Zelda: The Wind Waker
Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 3/12

4. Toon Shading
Team Fortress 2 (Toon Shading Mod)
Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 4/12

5. Toon Shading
Umsetzung
Mehrere alternative Vorgehensweisen
Von trivial bis anspruchsvoll
Trade-off zwischen Komplexit¨t und visueller Qualit¨t
a a
Ein m¨gliches Vorgehen
o
1 Zeichnen der Back-Faces mit fetten Linien
2 Berechnung des Shading
Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 5/12

6. 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

7. 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

8. Toon Shading
Schritt 2: Berechnung des Shading (Forts.)
Vertex-Shader
Transformiert Vertex in den Clipspace
Berechnet Eyespace-Normale
¨
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

9. 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

10. Toon Shading
Schritt 2: Berechnung des Shading (Forts.)
Fragment-Shader (Forts.)
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

11. 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
o
Real-Time Rendering
http://www.realtimerendering.com/
Johannes Diemke OpenGL mit Java WiSe 2010 / 2011 11/12

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