18 replies to this topic

[Xor]

Hello. I made a basic 3D lighting system, so I thought, "why not make a 2D one".
This is a deffered rendering system with simple scripts that make it simple to customize. 
Suggestions are welcome to help improve this.
 
Features:

• 8 Point lights with x, y, range and color settings
• Easy scripts for adding textures to the diffuse map, normal map, or specular map
• Ambient light colors
• Multiple objects with new example object
• NM_wiggle() script for make the light range wiggle
• Rotated objects and objects with alpha

Vertex code:

Spoiler

attribute vec3 in_Position;                  // (x,y,z)
//attribute vec3 in_Normal;                  // (x,y,z)     unused in this shader.
attribute vec4 in_Colour;                    // (r,g,b,a)
attribute vec2 in_TextureCoord;              // (u,v)

varying vec2 v_vTexcoord;
varying vec4 v_vColour;
varying vec2 v_vPosition;

void main()
{
    vec4 object_space_pos = vec4( in_Position.x, in_Position.y, in_Position.z, 1.0);
    gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION] * object_space_pos;
    
    v_vColour = in_Colour;
    v_vTexcoord = in_TextureCoord;
    v_vPosition = (gm_Matrices[MATRIX_WORLD] * object_space_pos).xy;
}
 

 
Fragment code:

Spoiler

varying vec2 v_vTexcoord;
varying vec4 v_vColour;
varying vec2 v_vPosition;

#define LN 8//Number of lights

uniform sampler2D spec;//specular map
uniform sampler2D norm;//normal map

uniform float lights[LN*3];//x,y,range
uniform float lcolor[LN*3];//r,g,b
uniform vec3 ambiance;//r,g,b

vec3 lighting(float spec,vec3 norm,vec3 dif,vec2 pos,vec4 light,vec3 col)
{
    vec3 N = normalize(vec3(pos,0.0)-light.xyz);
    float A = max(1.0-length(vec2(pos)-light.xy)/light.w,0.0);
    return pow(max(dot(norm,N),0.0)*4.0,spec*4.0)*0.25*A*dif.rgb*normalize(col);
}

void main()
{
    float Spec = texture2D( spec, v_vTexcoord ).r;
    vec3 Norm = normalize(texture2D( norm, v_vTexcoord ).rgb*-2.0+1.0);
    vec4 Dif = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );
    
    int i = 0;
    vec3 total = lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
    i++;
    total += lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
    i++;
    total += lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
    i++;
    total += lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
    i++;
    total += lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
    i++;
    total += lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
    i++;
    total += lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
    i++;
    total += lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
    i++;
    gl_FragColor = vec4(min(ambiance+total,Dif.rgb),Dif.a);
}
 

 
Download Normal Mapping Example

I also made a simple 2D lighting example without the normal mapping for learning purposes:

Features :

• Multiple point lights
• Point light colors
• Ambient light colors
• Easy to use scripts

Download Simple Lighting Example

Edited by Xor, 12 February 2016 - 03:26 PM.

[jaimitoes]

Very cool and compatible with mobile devices... (tried in HTC one S and NEXUS 7 2013)

[JimmyBegg]

Nice job!

You should probably use a for loop in the fragment

int i = 0;
vec3 total = lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
for(i=1; i<LN; i++) {
        total += lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
}

That way it works with any amount of lights

[Xor]

Spoiler

Nice job!

You should probably use a for loop in the fragment

int i = 0;
vec3 total = lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
for(i=1; i<LN; i++) {
        total += lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
}

That way it works with any amount of lights

I did originally, but it doesn't work cross platform. I also lose about 900 FPS with 16 lights.

Edited by Xor, 22 January 2015 - 03:29 PM.

[jaimitoes]

Nice job!

You should probably use a for loop in the fragment

int i = 0;
vec3 total = lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
for(i=1; i<LN; i++) {
        total += lighting(Spec,Norm,Dif.rgb,v_vPosition,vec4(lights[i*3],lights[i*3+1],24.0,lights[i*3+2]),vec3(lcolor[i*3],lcolor[i*3+1],lcolor[i*3+2]));
}

That way it works with any amount of lights

yes I can assure with a for statement, the device mobile of 2010 does not work, is because for a shader, the devices do not calculate proper in shader model 2.0 because is dinamyc branch, dinamyc branch is only supported in 3.0.. i test the previous shader with a for statement and crash my Htc one s and on a Nexus 7 2013 works very slow.... without the "for" you have a boost performance.

Edited by jaimitoes, 22 January 2015 - 03:30 PM.

[Xor]

Update!

 

Added features:

• Multiple objects with new example object
• NM_wiggle() script for make the light range wiggle

Edited by Xor, 22 January 2015 - 03:37 PM.

[JimmyBegg]

Ah damn, would there be another way around this?

[jaimitoes]

i try to learning all aspects but at the moment im noob with this...

 

searching about open gl ES 2.0 :

 

http://aras-p.info/b...all-over-again/

 

you have more examples seaching in google... waiting for progress. Good luck!! this is awesome feature.

Edited by jaimitoes, 22 January 2015 - 09:30 PM.

[Xor]

Update!

 

Added rotated objects and placement for rocks in the example.

[Consumer]

Great work! It works immensely well, and I suppose adjusting an upper limit of light sources would help adapt for different purposes. I'll throw in some long shots of suggestions in case you wanted to bite.

 

Self-shadowing would be interesting as long as it's practical, from I imagine just the normal map.

 

And since I haven't seen normal mapping done with lighting/shadowing in GM yet, fusing the two to occlude normal map illumination with mesh-based occluders would be cool and very valuable.

 

Some observations with more initial testing:

- Possible memory problems; adding rocks increases memory use according to the system though the debugger doesn't notice that problem. I didn't see any memory leaks in the code, but I don't think this is normal GM behavior.

- Renamed "upsec" to "uspec", likely mispelling on global variable initialization, though no problem so far since it's only used locally within the NM controller instance. Regardless, you may want to consider making variables that don't need to be global as local instead.

Edited by Consumer, 24 January 2015 - 11:14 AM.

[Xor]

Great work! It works immensely well, and I suppose adjusting an upper limit of light sources would help adapt for different purposes. I'll throw in some long shots of suggestions in case you wanted to bite.

 

Self-shadowing would be interesting as long as it's practical, from I imagine just the normal map.

 

And since I haven't seen normal mapping done with lighting/shadowing in GM yet, fusing the two to occlude normal map illumination with mesh-based occluders would be cool and very valuable.

 

Some observations with more initial testing:

- Possible memory problems; adding rocks increases memory use according to the system though the debugger doesn't notice that problem. I didn't see any memory leaks in the code, but I don't think this is normal GM behavior.

- Renamed "upsec" to "uspec", likely mispelling on global variable initialization, though no problem so far since it's only used locally within the NM controller instance. Regardless, you may want to consider making variables that don't need to be global as local instead.

Thanks. I do have my 2D light and shadow engine which I may try to merge with this in the future, but for now, if you want shadows, you'll have to use that.

Rock memory problem may be do to the fact that rotated objects must be run thru "shdr_rotate", before it gets added. The more rocks you have, the more times it has to be run.

Thanks for pointing out "upsec". I'll try to update this soon.

[Xor]

Just fixed rotation script (it was rotating backwards). Make sure you update! You can redownload or change the "NM_normal" script code to:

Spoiler

///NM_normal(add,rotation)
if argument0
{
    shader_set(shdr_rotate)
    shader_set_uniform_f(uangle,-argument1)
    surface_set_target(NMnorm)
}
else
{
    shader_reset()
    surface_reset_target()
} 

[ThePC007]

Very cool and compatible with mobile devices... (tried in HTC one S and NEXUS 7 2013)

 

I tried it on my Galaxy Note II and got not more than ~7 fps. How much did you get?

[jaimitoes]

Sure more than 7fps. How big is your view space?

[Pro Pro.]

How do you get an ambient light source? and how would u change its intensity?

 

Also, the original colors of the sprite dont seem to show up at all, even under white light

Edited by Pro Pro., 19 January 2016 - 11:06 PM.

[Xor]

Hello Pro Pro. You should find a script for setting the ambient light in the script group. Just use the script and set the color. The brightness of the light determines the intensity. If you have a black light for example, it won't light anything, but a white light would be much brighter.

As for the color change, I'm not sure what would make the issue. Please provide more info like screenshots or code.

[Pro Pro.]

Thank you for the fast response.

 

The ambient light solved most of the issues, but here is what i am trying to do with my project, maybe you can help.

 

Basically, i am trying to have a somewhat cartoonish look where a lot of things wont use this engine at all, but certain structures and the player and enemy sprites will use this.  I want the effect of the engine pretty soft in a way i can have a light source as the sun which determines where the sprite is brighter than the rest (and darker on the other side).  Not nearly as dramatic as it is in the example.

 

Would i have to do this with the normal and spec maps? (i use crazybump). Or do i need to tackle this from some sort of combination of the ambient light settings and the light source (sun) settings?

 

For instance, if i set ambient to 155,155,155,  none of the light sources are hardly visible at all and don't brighten up the surfaces of objects when i try to use it currently.

 

When ambient is set to 100,100,100 you can see other light sources, but they are "grayed out" and the otherside of objects are grey instead of just a darker version of the original

Edited by Pro Pro., 20 January 2016 - 12:05 AM.

[Xor]

Thank you for the fast response.

 

The ambient light solved most of the issues, but here is what i am trying to do with my project, maybe you can help.

 

Basically, i am trying to have a somewhat cartoonish look where a lot of things wont use this engine at all, but certain structures and the player and enemy sprites will use this.  I want the effect of the engine pretty soft in a way i can have a light source as the sun which determines where the sprite is brighter than the rest (and darker on the other side).  Not nearly as dramatic as it is in the example.

 

Would i have to do this with the normal and spec maps? (i use crazybump). Or do i need to tackle this from some sort of combination of the ambient light settings and the light source (sun) settings?

 

For instance, if i set ambient to 155,155,155,  none of the light sources are hardly visible at all and don't brighten up the surfaces of objects when i try to use it currently.

 

When ambient is set to 100,100,100 you can see other light sources, but they are "grayed out" and the otherside of objects are grey instead of just a darker version of the original

 

If I am understanding you right you want a directional light for the sun and an ambient light, but you have no need for point lights? If this is the case I'll edit the code a bit because the code doesn't currently doesn't have directional lights.

 

The issue of the light color still baffles me. How are you setting the color? I'm assuming you are using make_colour_rgb(). Also does my example work for you?

[Pro Pro.]

The example is what i am testing.  If i have nothing on but a low ambient light... say, 100,100,100, everything is a shade of gray, instead of being a darker version of itself is what i mean.  Then any light sources you added are also grayed out from the ambient light.

 

Doesn't there need to be an intensity setting? That way i can have a weak white light instead of a strange gray light?