Pixel art with GLSL cel shade lighting concept

[GarbagePillow]

I'm sorry..I still don't get this..(I am very new to any kind of graphic design-type stuff)
Generating the normals & the 2d (first) image are fine, but I am having trouble with the 3rd 'greeny/yellow' AO image.
In wings3d I can export with the shader 'sperical ambient occlusion' as a grey shaded image.
I then combine this somehow with the face normals colouring or the first image?

If you can be bothered, further screenshots (or maybe just a dumbed down explanation for me ) for the ambient occlusion step would be a big help. I am using gimp, but should be able to translate anything you do in photoshop.

Forgive me if you already know this but most image formats have four channels: red, green, blue, and alpha. Each channel holds a value at each pixel from 0 to 255. Because ambient occlusion just stores one number at each pixel it doesn't really need more than one channel. So I didn't have to use four images, I combined the lineart image and the ambient occlusion image into one, by just storing the ambient occlusion in the red channel, and the lineart image in the green one.

It might make more sense if you just choose to view the images by one channel at a time. I don't know GIMP but I bet it has that feature. So in photoshop I just copied the ambient occlusion image into the final image while viewing the red channel and that was it. There is no rule that says you have to do things that way though. You could have four images side by side, or even four images in four separate files. Or you could go the opposite route, and compress everything into two images. I learned after I did this project that you can store normals in two channels rather than three. So you could have an image with red and green for normals, blue for AO, and store lineart in the alpha channel.

[pwnies]

Makes much more sense, thanks for taking the time to explain it

[Qcode]

I couldn't believe I didn't see this thing earlier, this stuff is amazing! I'm not going to open this and look at code because graphics code (Shaders especially) scares me, but great job! Looks like you put a lot of time into this.

[pixelpatrol]

Really great work GarbagePillow! I've just started with the löve framework because I want to make an 8-bit style game with some modern twists and fortunately I saw your post on this forum. I'm new to shaders and GLSL, so could you give me some resources (books, websites etc.) where I can study the techniques you use in your code. Hopefully combined with your source code I can figure out a way to adapt and customize these techniques in my game. Thanks for your inspiring work!

[CaptainMaelstrom]

GarbagePillow,

Thanks a lot for uploading your work. I've been thinking on how to get these sort of lighting effects with LÖVE for a while now. I didn't imagine the lighting being as impressive as some of the stuff I've seen on this thread though!

TylerTheDesigner,

Your videos are beautiful. Thanks for showing some more examples, furthering this conversation.

Fortunately, I have a lot of experience with Blender, so the 3-D stuff doesn't scare me. But I'm not sure I would've figured out how to actually implement this kind of lighting in LÖVE without you GarbagePillow. Thanks again.

[zenpsycho]

Hey this is really cool.
For those wanting to hand-paint normal maps, here is something I would like to point out: If you grab the treestump normal map and open it in photoshop or gimp, you can notice a few things by looking at the individual color channels.

1. The red channel looks like the tree stump lit from the right side.
2. the green channel looks like the tree stump lit from the front/below
3. the blue channel looks like the tree stump lit from above.

additionally:
4. invert the red channel, and the tree stump looks like it's lit from the *left*
5. invert the green channel and the tree stump looks like it's lit from behind.
6. invert the blue channel and uh.. I'm not sure what this looks like.

basically, you can get a pretty decent normal map just with the red and green channels, by painting what an object should look like lit from the 4 different directions, and above/front for the blue channel. You can also do this with a hand held lamp, a camera, tripod, and physical objects.

[thesleepless]

Note: if you want to use this on rotating objects it won't work without a bit extra.

You need to convert the object space normals into world space normals when you do your lighting.
This will work, although I'm sure it's not the most efficient method, but I'm new to this GLSL stuff.

vec4 n = vec4(normal.x,normal.y,normal.z,0);
n = n * gl_ModelViewMatrix;
normal = vec3(n.x,n.y,n.z);
normal = normalize(normal); // Is this needed?
...
// calculate lighting from normal

http://static.boxengame.com/BoxLighting.love

[yetneverdone]

Hi, im testing this as well.

Here's a version that works for love 11+:

orig.love

(9.49 KiB) Downloaded 318 times

----------

Im trying to make this work for animated sprite by separating the normal map texture. But it doesnt seem to work properly.

if anybody would like to take a look at the test files, please do:

test.love

(9.49 KiB) Downloaded 291 times

* instead of the normal map in the same texture as the default one, ive placed the normal map in a separate texture because if the animation has so many frames, it would be hard to pack the normal maps in the same texture as well.
* for now i want to make this work with the first step of splitting into separate texture before i can proceed with applying quads for animation

EDIT

I've finally figured it out!

test.love

working one (uses ArrayImage)

(10.98 KiB) Downloaded 340 times