Pixel art with GLSL cel shade lighting concept

Showcase your libraries, tools and other projects that help your fellow love users.
GarbagePillow
Prole
Posts: 41
Joined: Wed Sep 26, 2012 9:19 pm

Re: Pixel art with GLSL cel shade lighting concept

Post by GarbagePillow » Sat Nov 03, 2012 10:46 pm

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
normals_picker2.png (9.53 KiB) Viewed 4127 times

User avatar
Zizaco
Prole
Posts: 4
Joined: Tue Jul 24, 2012 8:22 pm

Re: Pixel art with GLSL cel shade lighting concept

Post by Zizaco » Sat Nov 10, 2012 5:49 pm

Amazing!

wssmith04
Prole
Posts: 28
Joined: Sat Nov 10, 2012 9:02 pm

Re: Pixel art with GLSL cel shade lighting concept

Post by wssmith04 » Sat Nov 10, 2012 9:07 pm

Very, very cool! Thank you for sharing this! :awesome: **begins studying**
--Will

User avatar
TylertheDesigner
Citizen
Posts: 80
Joined: Sat Apr 10, 2010 2:27 am

Re: Pixel art with GLSL cel shade lighting concept

Post by TylertheDesigner » Sun Nov 11, 2012 7:37 am

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

GarbagePillow
Prole
Posts: 41
Joined: Wed Sep 26, 2012 9:19 pm

Re: Pixel art with GLSL cel shade lighting concept

Post by GarbagePillow » Sun Nov 11, 2012 8:13 pm

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.

User avatar
TylertheDesigner
Citizen
Posts: 80
Joined: Sat Apr 10, 2010 2:27 am

Re: Pixel art with GLSL cel shade lighting concept

Post by TylertheDesigner » Sun Nov 11, 2012 9:10 pm

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
Prole
Posts: 41
Joined: Wed Sep 26, 2012 9:19 pm

Re: Pixel art with GLSL cel shade lighting concept

Post by GarbagePillow » Sun Nov 11, 2012 9:55 pm

TylertheDesigner wrote: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 :)

User avatar
TylertheDesigner
Citizen
Posts: 80
Joined: Sat Apr 10, 2010 2:27 am

Re: Pixel art with GLSL cel shade lighting concept

Post by TylertheDesigner » Mon Dec 10, 2012 8:08 am

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
Prole
Posts: 41
Joined: Wed Sep 26, 2012 9:19 pm

Re: Pixel art with GLSL cel shade lighting concept

Post by GarbagePillow » Mon Dec 10, 2012 4:16 pm

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
Prole
Posts: 2
Joined: Wed Dec 12, 2012 10:20 pm

Re: Pixel art with GLSL cel shade lighting concept

Post by pwnies » Thu Dec 13, 2012 12:05 am

GarbagePillow wrote:Boolsheet: Good advice. Unfortunately I have an ATI card. I looked for ATI pragmas but I couldn't find any. :(
Nixola wrote:I have no problems with an Nvidia GTX 560 Ti. Awesome effects!
Good to know. And thank you. :)
Patalo wrote: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? :3 (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.

Post Reply

Who is online

Users browsing this forum: No registered users and 32 guests