Pixel art with GLSL cel shade lighting concept

[Boolsheet]

The sprites look like random color noise

This is just a guess, but it may be because the shader uses a uninitialized variable.

Code: Select all

   vec3 light; // <-- Could be any value at this point.
   for (int i = 0; i < light_position.length(); i++) {      
      vec3 light_direction = light_position[i] - vec3(pixel_coords, 0);
      float dist = length(light_direction);
      float attenuation = smoothstep(100, 50, dist);
      light_direction = normalize(light_direction);
      vec3 current_light = light_diffuse[i] * attenuation * clamp(dot(normal, light_direction), 0.0, 1.0);
      //light += light_diffuse[i] * attenuation * clamp(dot(normal, light_direction), 0.0, 1.0);
      if (length(current_light) > length(light)) { // <-- Usage of uninitialized variable. If light has random bits, there is a very high chance this will always be false.
         light = current_light;
      }
   }

[Robin]

This so unbelievably cool! I can't wait to see a game with cell-shaded pixel art.

[felix24]

you sir are a legend. this is sooooo coooool

[GarbagePillow]

Thanks for the kind words Dreadkillz, Robin, Felix.

Unfortunately none of the multi-lighted examples seem to work on my machine (Mac Book Air 2012 13')

The sprites look like random color noise:

The first two examples (with only one light source) looked great though.

Ughhh, sorry about that. At least it looks... interesting. Hopefully the new one will work. Let me know if it's still broken.

The sprites look like random color noise

This is just a guess, but it may be because the shader uses a uninitialized variable.

Code: Select all

   vec3 light; // <-- Could be any value at this point.
   for (int i = 0; i < light_position.length(); i++) {      
      vec3 light_direction = light_position[i] - vec3(pixel_coords, 0);
      float dist = length(light_direction);
      float attenuation = smoothstep(100, 50, dist);
      light_direction = normalize(light_direction);
      vec3 current_light = light_diffuse[i] * attenuation * clamp(dot(normal, light_direction), 0.0, 1.0);
      //light += light_diffuse[i] * attenuation * clamp(dot(normal, light_direction), 0.0, 1.0);
      if (length(current_light) > length(light)) { // <-- Usage of uninitialized variable. If light has random bits, there is a very high chance this will always be false.
         light = current_light;
      }
   }

Doh. I guess I was just assuming the values were automatically set to 0. I think I've fixed all those errors with this new version.

qTHe1.png (9.91 KiB) Viewed 1085 times

[Nixola]

Code: Select all

Error: [string "graphics.lua"]:1346: Invalid operation:
- Trying to send the wrong value type to shader variable, or
- Trying to send array values with wrong dimension, or
- Invalid variable name.
stack traceback:
        [C]: in function 'sendFloat'
        [string "graphics.lua"]:1346: in function 'send'
        main.lua:20: in function 'send_lights'
        main.lua:89: in function 'update'
        [string "boot.lua"]:407: in function <[string "boot.lua"]:373>
        [C]: in function 'xpcall'

Intel G41 Express Chipset, Windows 7 x86


EDIT: Fixed, you were sending two 5-element arrays when the shader expected two 4-element ones, just change lines 2-3 to

Code: Select all

extern vec3 light_position[5]; //it was [4]
extern vec3 light_diffuse[5]; //it was [4]

[GarbagePillow]

Code: Select all

Error: [string "graphics.lua"]:1346: Invalid operation:
- Trying to send the wrong value type to shader variable, or
- Trying to send array values with wrong dimension, or
- Invalid variable name.
stack traceback:
        [C]: in function 'sendFloat'
        [string "graphics.lua"]:1346: in function 'send'
        main.lua:20: in function 'send_lights'
        main.lua:89: in function 'update'
        [string "boot.lua"]:407: in function <[string "boot.lua"]:373>
        [C]: in function 'xpcall'

Intel G41 Express Chipset, Windows 7 x86


EDIT: Fixed, you were sending two 5-element arrays when the shader expected two 4-element ones, just change lines 2-3 to

Code: Select all

extern vec3 light_position[5]; //it was [4]
extern vec3 light_diffuse[5]; //it was [4]

Thanks, I updated it.

I really wish these things didn't run on my computer when they have bugs like this. It's so much harder to fix.

[kikito]

Now it works ok on my Mac.

This is very hipnotic. I like it.

Although maybe you shouldn't overdo multi-colored lights if you are going for a cell-shaded effect. The previous ones with a single white light looked more "appropiate" somehow. Simpler graphics with simpler effects, I guess.

[Lafolie]

@Kikito "hypnotic"

I have to agree though. Having the the tech to do something doesn't mean you should use it all the time. I imagine you can pull of some impressive scenes but using the coloured lights sparingly, like in a lava-filled cavern or something.

[luaz]

Pretty awesome for isometric projects!

[GarbagePillow]

luaz: Definitely.

Lafolie, Kikito: I also think the single light version was superior visually. It's like how christmas trees with just white lights generally look better than ones with a bunch of colors. But it might be nice to be able to have colored accent lights for certain situations, like lava. Anyways, I just wanted to experiment with it. I'm not sure I have the right solution to it yet either... the lights values round and shape the object more than they should. They are not perfect cells.

Another technique that might be interesting with pixel art is 3d look up tables.