PDA

View Full Version : Any ideas on how to accomplish this image style?



hashbrown
10-02-2016, 07:28 AM
I'm trying to accomplish this style of rendering:

https://s21.postimg.org/9nr5o5vjn/final.jpg (https://postimg.org/image/9nr5o5vjn/)

https://s12.postimg.org/3tmblc61l/Image0000.png (https://postimg.org/image/3tmblc61l/)

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.

Silence
10-02-2016, 11:46 AM
- Used Blender's toon shader called (Free Style)

You answered your question yourself :)

Check for toon shader, or cel shading in google. There are plenty of examples. This one (http://sunandblackcat.com/tipFullView.php?l=eng&topicid=15) for example.

hashbrown
10-02-2016, 12:27 PM
You answered your question yourself :)

Check for toon shader, or cel shading in google. There are plenty of examples. This one (http://sunandblackcat.com/tipFullView.php?l=eng&topicid=15) for example.

Thanks for the answer :) 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.

Spoops
10-02-2016, 03:24 PM
Use FBOs (https://www.opengl.org/wiki/Framebuffer_Object); they are basically off-screen render targets. Use one smaller than your window dimensions and use the resulting texture on a fullscreen quad.

john_connor
10-02-2016, 04:21 PM
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

hashbrown
10-04-2016, 11:33 AM
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

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