Project Deemo

An example for Gooch Shading mode in Project Application:
 
An example for Toon Shading mode in Project Application:
 
An example for Stippling Shading mode in Project Application:
 
An example for Stippling-Color Shading mode in Project Application:

Stippling

Stippling 
http://www.cs.ubc.ca/labs/imager/tr/2002/secord2002b/secord.2002b.pdf
- Black Stippling & Colors Stippling
Stippling algorithm is designed for reproducing images as dot patterns. 

I.Black Stippling
1.Gray Level
The image pixel information is stored in the array after regular texture shading.
First, convert the image into a gray level image. The gray level image shows the darkness and brightness information of the original image. More dots are needed in the darker part of the gray level image, when less dots should be painted in the brighter part..
Equation of compute the gray level of the original image to approximate lthe actual black-white picture: Grey = R = B = G = ( red * 30 + green * 59 + blue * 11 ) / 100;
Grey level is between [0 , 255] ;
Grey level image result:

2.Stipple Level
Each pixel of the image has a stipple level as long as it has a gray level.
Stipple level = ( gray level) / P + 1. ( round down )
Since P is defined as 20 in the project, Stipple level is between [ 1 , 13 ].
Stipple level represent the possibility the pixel is drawn as black dots.
The stipple level has a linear negative relationship to the possibility.
Pixels that have same stipple level also have the same possibility to be drawn as black dots.
Result of implementing stipple level only:

3.Sub-area Sample
The former result seem to be in a mess. So the pre-computation of stipple level is required. Thus, divide the original image into several sub-area then compute the stipple level.
The size of sub-area is determined ahead.(4*4 in the project)
Use the mean of gray level of those 16 pixels in one subarea to pre-compute the sub-areas stipple level. Stipple level of the sub-area determine how many pixels will be colored black in the area.( linear negative relationship)
Result of sub-area sample:


4.Sort by Stipple Level
The result of sub-area is still lack of information to represent original image by dots, thus sort the stipple level of the pixels in the sub-area. Construct a priority queue to determine the order of draw black dots.
Result

5.Reserved Stipple Level
In each sub-area there are 16 pixels.
The stipple level is between 1 and 13.
A reserved level is set to determine how many pixels will be draw as black dots in one sub-area.( number of black dots = reserved level - stipple level + 1.)
Results:
Reserved Level = 12. ( 12 black pixels at most.)

Reserved Level = 9. ( 15 black pixels at most.)

Reserved Level = 15. ( 15 black pixels at most.)


II.Colors Stippling
Use red, green and blue dots to reproduce the image instead of black dots.
Color Stipple Level
Red stipple level = ( g + b ) / 40 ;
Green stipple level = ( b + r ) / 40 ;
Blue stipple level = ( r + g ) / 40 ;
Result:


III Improvements
1. Pre-compute for the whole image to get a threshold/reserve level of all pixels;
2. Compute the stipple level for each pixel
3. Use the threhold and stipple level, get a possibility for each pixel.
4. Draw dots;
Results:
Black: 


Colors:


Toon Shading

Referrence:

Sobel Edge Detect:
http://homepages.inf.ed.ac.uk/rbf/HIPR2/sobel.htm
http://blog.csdn.net/tianhai110/article/details/5663756【Chinese】

Toon Shading:
1. http://zh.wikipedia.org/wiki/%E5%8D%A1%E9%80%9A%E6%B8%B2%E6%9F%93【Chinese】
2. http://www.tjgalda.com/EducationAndTrain/Free%20Tutorials/645629E6-14F7-4D19-B1F2-9B101E84364E.html
3. http://www-scf.usc.edu/~sanampud/Gz.htm
4. http://blogs.aerys.in/jeanmarc-leroux/2012/01/23/single-pass-cel-shading/【 The most important thing is in "The Outline" section】


Toon Shading  process:Toon color + Ink Line

Toon-color: 
Modify based on phong shading: remove ambient color and specular color, and change the NL value in diffuse equation (e.g.: NL = NL < 0.3 ? 0.3f : (NL < 0.7 ? 0.6f : 0.9f))

Whole process: (All for ink line except Toon())

I:【Based on Toon Shading 1】
1. Draw wire model with Z = ZMAX
2. Draw typical wire model for all triangle in the back side.
3. Toon()


II:【Own thought】
1. Draw wire model with black color for every triangle, and set the Z value a little larger than original value for all line. (e.g.: Z' = Z*1.0025)
2. Toon()



III:【based on Toon Shading 3】【Current Process】
1. Toon()
2. Sobel Edge detector 


IV:【based on Toon Shading 4】
1. When doing Toon(), detect whether the vertex from the original point of Cmaera Space to some vertex V is vertical with the normal of this vertex V . If it is then treat it as border, otherwise use original Toom() to add color


Challenge:
1.  Multiple lighting problem. Our Toon Shading generates better Cel Animation results with single light. However, within multiple light sources, there are more color modules in output result than our expectation.
2. Enhancement on border line detection, in Toon Shading output result III, it has not drawn all important bounding lines, like the border of eyebrow and collar.
 

Samples, Models, Gooch Shading(working)

Samples, Models, Gooch Shading
by Tzu-Chin Wang
Target of toon shading(?
Samples
Gooch Shading + Canny Edge Detection
http://ar3f.in/goochShading.html
Nice sample implemented with js.
1. The model is first rendered with object-space normals
2. Since Canny edge detection is susceptible to noise, I used a median filter to blur out facets
3. Canny edge detection is used on this
4.Then the image is inverted and threshholded (sic) to get black lines
5. This is multiplied with the model rendered on a white background with the Gooch Shader
6. As evident, surfaces with same normals show no edges.

Tachikoma (from Ghost in the Shell) samples
http://seasons.4-sky.com/hobby/tachi.html
Tachikoma


Models
Online free models
http://tf3dm.com/3d-models/characters/1/obj
Girl model
http://www.mediafire.com/download/klrj8at5tya285q/Beautiful+Girl.7z
We failed to get the correct UV, so used teapot and winnie the pooh in the end.


Gooch Shading
Original Paper
http://www.cs.northwestern.edu/~ago820/SIG98/abstract.html
Gooch Shading
https://lva.cg.tuwien.ac.at/ecg/wiki/doku.php?id=students:gooch


Illustration coloring concept
Tutorial from a Japanese illustrator
http://www.pixiv.net/member_illust.php?mode=manga&illust_id=43592297
Simulated light source -> single light source on top right or left
Base color(flat color) -> texture color + ambient lighting (or simply ignore ambient light)
Light shadow(flat color) -> single light source + toon shading (2nd layer of flat color)
Heavy shadow(Multiply blend on light shadow area) -> single light source + toon shading (3rd layer of flat color)
In general, the progress of coloring is, first draw the base color, then apply light shadow color with normal blending on it, finally add the dark shadow color upon the light shadow area with multiply blending. It's like reverse of what we do in shading, apply lights to bright up objects. Air brush with alpha is commonly used, making the boundary smoother and has little gradient looking. In the link above, it also shows other popular style of coloring.


Color Blending
Alpha compositing
http://en.wikipedia.org/wiki/Alpha_compositing
C = C_a * alpha_a + C_b * alpha_b * ( 1 - alpha_a )
Layer Composition with alpha (Photoshop)
http://d.hatena.ne.jp/yus_iri/20110921/1316610121 
alpha of composite layer = 1 - ( 1 - alpha_f ) * ( 1 - alpha_b ) 
Color Blend mode on Wiki
http://en.wikipedia.org/wiki/Blend_modes
The Color Blend Mode In Photoshop
http://www.photoshopessentials.com/photo-editing/layer-blend-modes/color-blend-mode/
Multiply blend mode
C = C_a * C_b


M14 Gooch
So this is my version of Gooch, M14 stands for "mutated 14th" which means I tried lots of combination(and most of them failed). It's inspired by illustration coloring concept and color blending describe above. The basic of M14 Gooch is add to two additional blending, one is blending between 3-layer discrete color and normal Gooch, second is blending between the first result and multiplication blending. Resulting a layered color like Toon, but with smoother transition and retain the characteristic of oringinal Gooch shader.


Other links
Cel shader links
http://www.celshader.com/links.html
Michael Arias (Studio Ghibli)
http://en.wikipedia.org/wiki/Michael_Arias
Stylized Depiction in Computer Graphics
http://www.red3d.com/cwr/npr/
Non-Photorealistic, Painterly and 'Toon Rendering by Craig Reynolds
Texture file converter (DDS to PPM)
http://www.office-converter.com/DDS-to-PPM

Muse Wonderland

Topic: Non-Photorealistic Rendering
Team name: Muse
Member & Task breakdown:
  • Ditong Ding
    • Merge different parts
    • Toon Shading
    • Search .obj model
  • Tzu-Chin Wang (Rin)
    • Samples
    • Models
    • Gooch shading
    • Color blending play around
    • Google blogger
  •  Xincheng Zhang
    • Stippling Shading, both black and color versions
    • Prepare models
  •  Jiayi Wang,
    • UI implementation
    • Search models
    • Search useful materials 
  • Liquan Chen
    • Project Paper
    • Google Site
    • Relevant paper review