Pixel art with GLSL cel shade lighting concept

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

Pixel art with GLSL cel shade lighting concept

Post by GarbagePillow »

Hello. :)

Basically what the title says. This is a demo trying to combine simple pixel art with dynamic lighting. The lighting is cel shaded in order to keep the simple style of the pixel art. In addition to the cel shading I add a small amount of colored light that transitions gradually from yellow to blue and is not cel shaded.
V4D9S.png
V4D9S.png (8.95 KiB) Viewed 1849 times
Attachments
PixelArtCelShading.love
(7.51 KiB) Downloaded 5656 times
Last edited by GarbagePillow on Thu Sep 27, 2012 1:07 pm, edited 1 time in total.
benhumphreys
Prole
Posts: 31
Joined: Thu Sep 13, 2012 2:10 am

Re: Pixel art with GLSL cel shade lighting concept

Post by benhumphreys »

This is seriously cool. Using 3d techniques to give amazing lighting. Genius.

I didn't see how it was cel-shading at first, but I see you draw the outline as a separate step with a separate image. Cool!

Edit: Also, how did you make the diffuse map? What tools did you use?
GarbagePillow
Prole
Posts: 41
Joined: Wed Sep 26, 2012 9:19 pm

Re: Pixel art with GLSL cel shade lighting concept

Post by GarbagePillow »

Thanks :)

I used photoshop for painting and wings3d for modeling.

The process to produce the art was this:
First, to create the normal maps you...
1. Model a basic shape of the object in wings3d.
2. Set the camera in Wings3d to look down at an angle twice as high as the distance along the ground. Focus in on the object you modeled.
3. Set the camera to orthographic (so there is no perspective distortion)
4. Squish the model along the X axis by

Code: Select all

math.sin(math.atan2(2, 1)) --> 0.89442719
(this has the effect of making a circle placed flat on the ground appear as a circle and not just an oval).
5. Set the shader to display normals (wings3d has a shader for this but it needs to be modified slightly).
6. Take a screenshot. :)

That's the hard part. Then I took the normal map into photoshop, scaled it down to a width of 32 pixels using nearest neighbor and painted over it to get the diffuse map and line art.

Heres another test, using ambient occlusion to reduce the amount of light that gets inside the jar.
CevAS.png
CevAS.png (21.34 KiB) Viewed 1850 times
Attachments
PixelCelShadingAmbientOcclusion2.love
The previous version had a bug
(10.23 KiB) Downloaded 2532 times
Last edited by GarbagePillow on Thu Sep 27, 2012 12:54 pm, edited 1 time in total.
benhumphreys
Prole
Posts: 31
Joined: Thu Sep 13, 2012 2:10 am

Re: Pixel art with GLSL cel shade lighting concept

Post by benhumphreys »

I don't know if it's my gfx card, but I can't run your new example. I'm on a 2011 MacBook Air, and have never had trouble with other Löve shaders before.

Code: Select all

Error: [string "graphics.lua"]:1365: Cannot compile shader:
ERROR: 0:16: Incompatible types in initialization (and no available implicit conversion)
ERROR: 0:17: Use of undeclared identifier 'normal'
ERROR: 0:17: Use of undeclared identifier 'normal'
ERROR: 0:18: Use of undeclared identifier 'normal'
ERROR: 0:18: Use of undeclared identifier 'normal'
ERROR: 0:24: Use of undeclared identifier 'normal'
ERROR: 0:26: Use of undeclared identifier 'light'
ERROR: 0:26: Use of undeclared identifier 'light'
ERROR: 0:28: Use of undeclared identifier 'light'
ERROR: 0:32: Use of undeclared identifier 'light'
ERROR: 0:33: Use of undeclared identifier 'gooch_light'
ERROR: 0:35: Use of undeclared identifier 'light'
ERROR: 0:37: Use of undeclared identifier 'cel_light'
ERROR: 0:37: Use of undeclared identifier 'gooch_light'

stack traceback:
	[C]: in function 'newPixelEffect'
	[string "graphics.lua"]:1365: in function 'newPixelEffect'
	[string "graphics.lua"]:1368: in function 'newPixelEffect'
	main.lua:31: in function 'load'
	[string "boot.lua"]:378: in function <[string "boot.lua"]:373>
	[C]: in function 'xpcall'
Thanks for the steps on how to do this. I'm really tempted to add this effect into my new game :)
GarbagePillow
Prole
Posts: 41
Joined: Wed Sep 26, 2012 9:19 pm

Re: Pixel art with GLSL cel shade lighting concept

Post by GarbagePillow »

I'm sorry that it doesn't work. :( I'm pretty new to GLSL so I'm not really sure what the problem is. It seems like there might be something wrong with this line:

Code: Select all

vec3 normal  = Texel(texture, texture_coords + vec2(0.3333, 0));
but again im not really sure what..
Thanks for the steps on how to do this. I'm really tempted to add this effect into my new game :)
You're very welcome. Let me know if you have any more questions.
User avatar
Boolsheet
Inner party member
Posts: 780
Joined: Wed Dec 29, 2010 4:57 am
Location: Switzerland

Re: Pixel art with GLSL cel shade lighting concept

Post by Boolsheet »

GarbagePillow wrote:

Code: Select all

vec3 normal  = Texel(texture, texture_coords + vec2(0.3333, 0));
but again im not really sure what..
Texel returns a vec4 and you try to assign it to a vec3. You did it correct in the first one where you used Texel(...).xyz to get a vec3. The GLSL 1.2 specification states that only implicit int->float conversions are allowed.

(Haha, the error line numbers are way off. I think that may be corrected in the next version of LÖVE.)
Shallow indentations.
GarbagePillow
Prole
Posts: 41
Joined: Wed Sep 26, 2012 9:19 pm

Re: Pixel art with GLSL cel shade lighting concept

Post by GarbagePillow »

Texel returns a vec4 and you try to assign it to a vec3
Thanks! I should have known that. I wonder why it worked on my computer? Anyways I updated the post with hopefully a working version.
User avatar
Boolsheet
Inner party member
Posts: 780
Joined: Wed Dec 29, 2010 4:57 am
Location: Switzerland

Re: Pixel art with GLSL cel shade lighting concept

Post by Boolsheet »

The GLSL compiler of your graphics driver seems to be more lenient when it comes to implicit type conversions. There may be a vendor-specific preprocessor command that enables a more strict mode. A quick search with google shows that NVIDIA apparently has one.
Shallow indentations.
User avatar
Nixola
Inner party member
Posts: 1949
Joined: Tue Dec 06, 2011 7:11 pm
Location: Italy

Re: Pixel art with GLSL cel shade lighting concept

Post by Nixola »

I have no problems with an Nvidia GTX 560 Ti. Awesome effects!
lf = love.filesystem
ls = love.sound
la = love.audio
lp = love.physics
lt = love.thread
li = love.image
lg = love.graphics
User avatar
Patalo
Prole
Posts: 41
Joined: Sun Apr 29, 2012 1:15 pm
Contact:

Re: Pixel art with GLSL cel shade lighting concept

Post by Patalo »

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 )
Current project : 3D fractal explorer DEFract ( viewtopic.php?t=9193)
Github : https://github.com/plule/ | Twitter : http://twitter.com/plule_
Post Reply

Who is online

Users browsing this forum: No registered users and 7 guests