Code Trip
  • Blog
  • Archive
  • Projects
  • Portfolio
  • CV

Year 3, Semester 2 - Procedural Methods: Pencil-sketch effect through post-processing

30/8/2015

0 Comments

 
January 2015 - May 2015
Download the full procedural methods project here. The other parts of the project are the turtle graphics and L-systems and the additive terrain faulting.

Real-time pencil rendering

In their 2006 paper Lee, Kwon and Lee developed a set of real-time techniques for rendering 3D meshes in a pencil drawing style, complete with shading. You can see an example on the right. Their method involves several stages, the most complicated of which being the generation and mapping of pencil shading textures. In section 4 Contour Drawing (page 3) they describe a technique for rendering the edges of shapes. I decided to implement a version of this as a post-processing effect.
Picture
Lamp rendering by Lee, Kwon and Lee (2006)
When a person is drawing something they usually aren’t able to draw along the exact lines they want to, which introduces errors in their strokes. These errors occur over a limited distance as the artist corrects themselves. This is modelled by rendering onto a periodically distorted plane such as the one shown below (images taken from the same 2006 paper).
Picture
Contour shaking by Lee, Kwon and Lee (2006)
Often people won’t draw a line in one go and will instead take several overlapping attempts at it. This is achieved by rendering the scene to 4 differently distorted planes then combining the result.
Picture
Multiple contours by Lee, Kwon and Lee (2006)
This project uses multiple post-processing passes in order to achieve this effect. The first pass is of course rendering the scene to a texture (rather than the back buffer). A pixel shader is then run four times with four different offsets to produce distorted variants of the scene, which are finally combined and rendered to the back buffer using another pixel shader which averages it’s given textures.

Below is a photo of a bicycle. On the right is the photo with the pencil rendering effect applied. The frequency and amplitude of the waves distorting the planes can be manipulated in real time, as shown in the video.
Picture
The effect is best shown on images consisting of simple lines, such as the L-system turtle drawings. They look like the result of showing someone an image of the L-system and asking them to draw it without a ruler (click to enlarge).
In a previous piece of coursework I created a post processing effect which uses the Sobel filter to detect and highlight edges in the scene. I combined that with the pencil sketch effect and modified it so that the output colour is forced to black or white.

Since the turtle drawing is very fine and consists entirely of edges, the edge detection algorithm tends to solidify it and ruin the pencil effect. To combat this the edge detection post processing is disabled when the camera is at the specific position and orientation for viewing the turtle graphics. The pencil post processing is always enabled (when post processing is enabled). This means that when looking at the turtle graphics with post processing enabled there is a very clear demonstration of the pencil effect, and while flying around the terrain there is a nice combination of edge detection and the pencil effect, so that it looks like a sketch of the terrain.
Picture
The final bit of shader trickery is the lighting. The terrain is lit using 1-4 point lights with diffuse and specular components. The ambient light level is forced to black, meaning that parts of the terrain that are not in range of the lights are essentially culled from the rendering. This produces a very nice visual effect: by moving the lights completely out of range then sweeping them across the terrain it bursts into existence, then disappears into the void. This combines nicely with the post-processing effects.
Picture

Download

Download the whole procedural methods project here. You can also read about the turtle graphics + L-systems, or the additive terrain faulting.
0 Comments
<<Previous

    Author

    Connor Halford. Studied Computer Games Technology at Abertay, now a Games Programmer at MediaTonic.
    ​

    Useful Sites

    hilite.me converts source code into formatted, embeddable HTML without the need for CSS or Javascript.

    tablesgenerator.com performs a similar task as hilite.me but for tabular data.

    Archives
    All posts

    June 2017
    December 2016
    September 2016
    August 2016
    June 2016
    May 2016
    April 2016
    February 2016
    January 2016
    October 2015
    September 2015
    August 2015
    July 2015
    May 2015
    March 2015
    February 2015
    January 2015
    December 2014
    September 2014
    August 2014
    July 2014
    March 2014
    February 2014
    August 2013
    June 2013
    December 2012

    Categories

    All
    Advice
    AI
    Algorithms
    AMPS
    Audio
    Boost
    Box2D
    Coursework
    DirectX
    Flash
    Game Boy Advance
    Game Jam
    Graphics Programming
    Honours Project
    Maths
    Nonograms
    Oh God Why
    OpenGL
    PICO-8
    Pixel Art
    PlayStation 4
    PlayStation Vita
    Procedural Generation
    SFML
    Shaders
    Spirit Shift
    Twine
    Unity
    XAudio2
    Year 1
    Year 2
    Year 3
    Year 4

    RSS Feed

Powered by Create your own unique website with customizable templates.