Pixel art with GLSL cel shade lighting concept

[GarbagePillow]

For anyone interested in hand painting normals, one thing you can do is make an image that you can color-pick on, an image that shows you how the colors correspond to normals. Heres one I did that has faces at 90 degrees, 45 degrees and some at 22.5 degrees as well.

normals_picker2.png (9.53 KiB) Viewed 13539 times

[Zizaco]

Amazing!

[wssmith04]

Very, very cool! Thank you for sharing this! **begins studying**

[TylertheDesigner]

Are you planning on releasing this with any form of open license?
I would love to use this effect!

[GarbagePillow]

I'm not really sure how the whole licensing thing works. Do I just put out another version with the MIT license at the top of all the source files? People are certainly welcome to use the code, though it isn't really designed as a module or anything, and might just be better to make your own version using the same concept.

[TylertheDesigner]

I would probably do exactly that, but I wanted to make sure you weren't protecting this style for your own use.
I am going to see what I can do about making it a little more modular, I'll post here with any changes I make.

[GarbagePillow]

I would probably do exactly that, but I wanted to make sure you weren't protecting this style for your own use.
I am going to see what I can do about making it a little more modular, I'll post here with any changes I make.

Great

[TylertheDesigner]

Baby steps...
I'm testing this with assets from various perspectives, and it really seems that it would only work efficiently with top-down or side perspectives. The issue I can't find a simple solution for is walls in isometric. If you have a wall that would completely block any objects beyond it, how would you reflect that?
I've been considering incorporating a shadowcaster like that in Monaco or Helsing's Fire (see viewtopic.php?f=4&t=11994)
Then, I could have the normal shader only influence objects within the mask created by the shadowmask. Thoughts?

Side view -

For these two, the left light is the low z (5) and the right one is higher (20) -

Isometric -
Top down-

P.S. I would love to have some help on this. Graphics programming is not my specialty (read: I hate it) and only do it by necessity.

[GarbagePillow]

Hey, those videos look beautiful.

As for casting shadows, the simplest solution is to not do it. Cast shadows from moving lights can become a bit distracting. You could just cheat and have a shadow texture that you draw below an object.

The technique done in Monaco and Helsing's Fire is one solution, and that is easily done in Love2D. For even more accurate shadows you could do something like this. It requires a depth map or height map. For even more accuracy you could also do a depth map from the backfaces (or whatever the equivalent is with pixel art). It does start to get a bit complicated though.

[pwnies]

Boolsheet: Good advice. Unfortunately I have an ATI card. I looked for ATI pragmas but I couldn't find any.

I have no problems with an Nvidia GTX 560 Ti. Awesome effects!

Good to know. And thank you.

Seriously great. The way the contour stay black really adds something.

How does the AO works? It's the last pic of pithos.png that indicate the amount of light?

Now with multiple lights? (well, I haven't found a way to send array yet, so might be difficult).

Sort of reminded me the visuals of chroma ( https://www.youtube.com/watch?v=OIR6L9FTvlc )

The AO is just another alpha map that I'm currently storing in the red channel of the third image. After I calculate the light levels at a pixel I just multiply them by the ambient occlusion. The AO map is generated from the same simple 3d model that I get the normal maps from.

Yeah, I really want to do multiple lights soon (perhaps with colors!).

I haven't seen Chroma before but it looks good. I like being able to run up the shadows.

Good stuff, GarbagePillow, I've joined these forums just because of your inspiring work

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.