Sign in to follow this  

OpenGL 2D lighting in OpenGL with GLSL, how?

Recommended Posts

mateo226    109

Hello everyone!

I am new to this forum so sorry it I posted this in the wrong section.

Anyways, I want to create 2D lightning with GLSL just like here:

And here:


I am using Java for my game. I was just wondering, how would I achieve this?

I am currently able to draw a light using LWJGL's built in functions like glLight but I am not sure how to add lights like in the videos!


Please help I've been searching the net for 2 days but without any success...

Any help would be appreciated!

Thank you very much!

Share this post

Link to post
Share on other sites
mateo226    109

Hey, thanks for you answer!

I already saw this but it doesn't really show me how to do it with code.

Hopefully I will find something :)

Been searching for 2 Days.... Even posted a question on Stack Overflow....

Share this post

Link to post
Share on other sites
WiredCat    1451

looks liek its 2d  so then.


you draw everything in screen coords first of all you put everything between -1..1 in vertex buffer


same for positions of lights you define the radius of light that is properly scaled, you draw the light now you test every fragment with every occluder  (or you can make a 2d texture that already makes the shadow volume <- this seems reasonable unless you kniwo how to pass multiple objects to shader)


rest looks obvious... loop through lights apply the correct fragment.

Share this post

Link to post
Share on other sites
mateo226    109

Thanks WiredCat!

I understand the concept fully now :)

Still kind of confused with the actual code...

From other sources on the net I realised that lightning is actually making an image darker. I would need to render my normal scene and a black rectangle on top of it. Then add transparency or coloring where the light is.


Once again, still confused with the code :)

I could REALLY use an example, it would be easier to learn.


Thank you very much for your answer!

Share this post

Link to post
Share on other sites
WiredCat    1451

since when light darkens the image you start with completely black scene,, then you blend the result for each light with lets say



unfortunatetly i never wrote such thing, so i cant provide you with the code.


But first of all you could tell me if you even know how to render a quad that is 32x32 pixels at the center of the screen? well if not, then giving you a sample code would be really unwise

Share this post

Link to post
Share on other sites
WiredCat    1451

second video on post above mine  actually says how shadows are rendered, you need really to consider how you want to cast shadows yourself, do that on cpu or gpu, anyway you  will have to pass (im talking about that second yt vid) a set of points to shader for every occluder that will tell your shader (in gpu shadowcomputing)  that everything between those two (actualy 2 volumes, 4 verts cast that) is black even blacker than MicroblackShotgun 55 smile.png




Btw that tutorial on nehe is outdated and uses FixedFunctionPipeline which is not what you want to use in 2015, i am not sure how this could help you since you say its an eaisiest thing to do thats the only thing you need to know, along with sending shadowcasters to the shader) (or making that on cpu whioch will be easier but slower)


so i think you really dont know how to draw that quad in the center



for gpu implementation and without taking into account unifroms and unfirmbuffers you could store in first pixel number of occluders. then for every next  pixels you could apply there occluders positions, then in main lighting shader you will form a triangle (or two planes when you loop throug occluders) and if anything is between the shadowvlume you make it black.


since he draws a quad that is somewhat a filled circle with radius of rect_size/2.0 you will need some kind of bias, 

Edited by WiredCat

Share this post

Link to post
Share on other sites
mateo226    109

Well, since I can't find any good tutorials on how to do lightning in 2D I am stuck with whatever I can find smile.png


I'll see what I can do with shaders. Hoping to implement lightning soon smile.png


Oh, and are you talking about drawing a quad in the center using ONLY GLSL or using Java aswell? Because In Java it's way to easy... glBegin(GL_QUADS); glVertex2f(...).... Sorry I'm to lazy to write it down now tongue.png



Alright just saw you edited your last post. I'm looking at it super confused haha

Edited by mateo226

Share this post

Link to post
Share on other sites
WiredCat    1451

well after defining the RADIUS and LIGHT COLOR IN THE SHADER you could do that


vertex shader:

attribute vec3 Vpos;
varying vec2 vert;

void main()
vert = Vpos.xy; //pass texture coord
gl_Position = vec4(Vpos.xy, 0.0, 1.0);

in fragment


something liek that:

varying vec2 vert;

varying vec3 vertex_pos;
uniform vec3 LPOS;
uniform vec3 LDIFF;

uniform float LRadius;

float n3ddistance(vec3 first_point, vec3 second_point)
float x = first_point.x-second_point.x;
float y = first_point.y-second_point.y;
float z = first_point.z-second_point.z;
float val = x*x + y*y + z*z;
return sqrt(val);

void main()
	float dst = n3ddistance(LPOS, vertex_pos);
	float intensity = clamp(1.0 - dst / LRadius, 0.0, 1.0);
	vec4 color = vec4(LDIFF.x, LDIFF.y, LDIFF.z, 1.0)*intensity;
	gl_FragColor = color;

ofc that wont compile i just mixed two different shaders


vertex is from drawing a fullscreen quad on screen 


second is a pointlight but in 3d so (additionallyi pass a vertex position to fragment shader)


looks like this:



still one thing to consider you need to know if you will pass light radius in ndc coord (or screen coords ) or in worldspace coords everything is enterely up to you

Share this post

Link to post
Share on other sites
mateo226    109

Thank you for the provided code!

I helps me understand this ALOT more.


But for now, I am going to switch to some good old fashioned

Beginner GLSL Tutorials

lol :)


Once again, thanks a bunch!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • By Arulbabu Donbosco
      There are studios selling applications which is just copying any 3Dgraphic content and regenerating into another new window. especially for CAVE Virtual reality experience. so that the user opens REvite or CAD or any other 3D applications and opens a model. then when the user selects the rendered window the VR application copies the 3D model information from the OpenGL window. 
      I got the clue that the VR application replaces the windows opengl32.dll file. how this is possible ... how can we copy the 3d content from the current OpenGL window.
      anyone, please help me .. how to go further... to create an application like VR CAVE. 
    • By cebugdev
      hi all,

      i am trying to build an OpenGL 2D GUI system, (yeah yeah, i know i should not be re inventing the wheel, but this is for educational and some other purpose only),
      i have built GUI system before using 2D systems such as that of HTML/JS canvas, but in 2D system, i can directly match a mouse coordinates to the actual graphic coordinates with additional computation for screen size/ratio/scale ofcourse.
      now i want to port it to OpenGL, i know that to render a 2D object in OpenGL we specify coordiantes in Clip space or use the orthographic projection, now heres what i need help about.
      1. what is the right way of rendering the GUI? is it thru drawing in clip space or switching to ortho projection?
      2. from screen coordinates (top left is 0,0 nd bottom right is width height), how can i map the mouse coordinates to OpenGL 2D so that mouse events such as button click works? In consideration ofcourse to the current screen/size dimension.
      3. when let say if the screen size/dimension is different, how to handle this? in my previous javascript 2D engine using canvas, i just have my working coordinates and then just perform the bitblk or copying my working canvas to screen canvas and scale the mouse coordinates from there, in OpenGL how to work on a multiple screen sizes (more like an OpenGL ES question).
      lastly, if you guys know any books, resources, links or tutorials that handle or discuss this, i found one with marekknows opengl game engine website but its not free,
      Just let me know. Did not have any luck finding resource in google for writing our own OpenGL GUI framework.
      IF there are no any available online, just let me know, what things do i need to look into for OpenGL and i will study them one by one to make it work.
      thank you, and looking forward to positive replies.
    • By fllwr0491
      I have a few beginner questions about tesselation that I really have no clue.
      The opengl wiki doesn't seem to talk anything about the details.
      What is the relationship between TCS layout out and TES layout in?
      How does the tesselator know how control points are organized?
          e.g. If TES input requests triangles, but TCS can output N vertices.
             What happens in this case?
      In this article,
      the isoline example TCS out=4, but TES in=isoline.
      And gl_TessCoord is only a single one.
      So which ones are the control points?
      How are tesselator building primitives?
    • By Orella
      I've been developing a 2D Engine using SFML + ImGui.
      Here you can see an image
      The editor is rendered using ImGui and the scene window is a sf::RenderTexture where I draw the GameObjects and then is converted to ImGui::Image to render it in the editor.
      Now I need to create a 3D Engine during this year in my Bachelor Degree but using SDL2 + ImGui and I want to recreate what I did with the 2D Engine. 
      I've managed to render the editor like I did in the 2D Engine using this example that comes with ImGui. 
      3D Editor preview
      But I don't know how to create an equivalent of sf::RenderTexture in SDL2, so I can draw the 3D scene there and convert it to ImGui::Image to show it in the editor.
      If you can provide code will be better. And if you want me to provide any specific code tell me.
    • By Picpenguin
      I'm new to learning OpenGL and still learning C. I'm using SDL2, glew, OpenGL 3.3, linmath and stb_image.
      I started following through and got through it until I had to load models. The problem is, it uses Assimp for loading models. Assimp is C++ and uses things I don't want in my program (boost for example) and C support doesn't seem that good.
      Things like glVertexAttribPointer and shaders are still confusing to me, but I have to start somewhere right?
      I can't seem to find any good loading/rendering tutorials or source code that is simple to use and easy to understand.
      I have tried this for over a week by myself, searching for solutions but so far no luck. With tinyobjloader-c and project that uses it, FantasyGolfSimulator, I was able to actually load the model with plain color (always the same color no matter what I do) on screen and move it around, but cannot figure out how to use textures or use its multiple textures with it.
      I don't ask much: I just want to load models with textures in them, maybe have lights affect them (directional spotlight etc). Also, some models have multiple parts and multiple textures in them, how can I handle those?
      Are there solutions anywhere?
      Thank you for your time. Sorry if this is a bit confusing, English isn't my native language
  • Popular Now