Any ideas on how to accomplish this image style?

I’m trying to accomplish this style of rendering:

I made it in Blender with the following steps:

  • Frame Size: 128x128px
  • Used Blender’s toon shader called (Free Style)
  • and then scaled the image back up.

Is there anyway I can accomplish the same effect with GLSL? Where I draw the image in a small frame, not use anti-aliasing, and then scale it back up so I get that “pixelated” effect?

I have book that shows me how to write a toon shader, that’s not a problem. I’m just not sure if drawing in a small frame and then scaling up like I did in Blender is the solution, and if it is…I have no idea how to do that.

You answered your question yourself :slight_smile:

Check for toon shader, or cel shading in google. There are plenty of examples. This one for example.

[QUOTE=Silence;1284100]You answered your question yourself :slight_smile:

Check for toon shader, or cel shading in google. There are plenty of examples. This one for example.[/QUOTE]

Thanks for the answer :slight_smile: I got the toon shading handled, but what I don’t know is how to draw to a smaller frame and then scale the final image up so it looks like the final image sample I shared in the opening thread. Don’t know what to look for.

Use FBOs; they are basically off-screen render targets. Use one smaller than your window dimensions and use the resulting texture on a fullscreen quad.

i made a code example (calling it “tutorial” would be overstated, there is VERY little description) for a simple renderer
https://sites.google.com/site/john87connor/advanced-opengl-tutorials/tutorial-04-2-framebuffer-size

the solution is:
– render your scene into your own framebuffer (using texture attachments)
– then copy the rendered image into the “default framebuffer” (of the window) by calling glBlitFramebuffer(…)


glBlitFramebuffer(
    0, 0, m_width, m_height,           // source area
    0, 0, windowsize.x, windowsize.y,  // destination area
    GL_COLOR_BUFFER_BIT,               // buffer bitmask
    GL_NEAREST);                       // filter parameter

if you want to have that “pixelated” effect, use GL_NEAREST as filter parameter

[QUOTE=john_connor;1284104]i made a code example (calling it “tutorial” would be overstated, there is VERY little description) for a simple renderer
https://sites.google.com/site/john87connor/advanced-opengl-tutorials/tutorial-04-2-framebuffer-size

the solution is:
– render your scene into your own framebuffer (using texture attachments)
– then copy the rendered image into the “default framebuffer” (of the window) by calling glBlitFramebuffer(…)


glBlitFramebuffer(
    0, 0, m_width, m_height,           // source area
    0, 0, windowsize.x, windowsize.y,  // destination area
    GL_COLOR_BUFFER_BIT,               // buffer bitmask
    GL_NEAREST);                       // filter parameter

if you want to have that “pixelated” effect, use GL_NEAREST as filter parameter[/QUOTE]

This is perfect, exactly what I was looking for, thanks!

This topic was automatically closed 183 days after the last reply. New replies are no longer allowed.