2D Lighting - How to learn the basics?

Questions
#1

Hey,

I’ve been chomping at the bit to get started on Open GL rendering for creating 2D lights, but I can’t wrap my mind around it. I’ve checked out the Open GL source tutorials, Simple 2D Lighting, and How to learn GLSL and shaders for Defold, but I couldn’t understand the basic requirements for the code and setup.

How do I set up render targets, masks, the renderscript, and etc to get a simple light? I’m very new to editing render scripts. I’ve only used materials, render.predicate, and render.draw() very minimally.

1 Like
#2

I know that there are parts of examples posted here in the past but I’m not sure there is a fully working runable example for this exactly.

Render targets are just textures you setup. You enable these textures when drawing tags in your render script.

Materials can use render target textures as texture inputs. So when you render to a quad (in your game world so it shows up to your camera) which is scaled up to the size of your screen you can use whichever render target textures you’ve produced and combine them in a useful way to your game.

For lights you can use a bunch of approaches… for example you can have soft circular sprites with a render tag which you draw onto a render target texture which then can act as a color mask for where you shade.

Maybe @Leviathan could put up his example. @ross.grams do you have one you could put up too that’s a runable project?

4 Likes
#3

The grading tutorial does not do lighting, but it walks you through setting up render targets, render script and materials. Check it out and you will hopefully have a better grasp of how to proceed: https://www.defold.com/tutorials/grading/

4 Likes
#4

If you have read through my posts and links in the “Simple 2D Lighting” thread, I don’t have a lot more to say. I did put up a working example of my lighting setup in the Rendercam thread, here. It’s not perfect and I haven’t tested it in a while, but maybe it will help.

I also did a little demo of the bouncing solitaire cards effect. It’s not lighting, but maybe a simpler intro to render targets for you? Link here.

3 Likes
#5

Hi again!

I’m revisiting this because I tried implementing your Rendercam Target Lighting, @ross.grams, and I failed to get it to work. Would you mind checking my project for me? Otherwise, here’s what I’ve done:

  1. I made all of the fp, vp, and material files, namely “light” and “render target”, but I didn’t make the LOS (line-of-site) files. I don’t need that functionality in my project, unless that’s required to make this work?
  2. I copy-pasted your rendercam_light script into the rendercam script in my project.
  3. I made a faint, transparent white sprite, and placed it in my character test collection. I wasn’t sure if it was necessary to have the sprite in it’s own object, so I tried without and then with when it didn’t work.
  4. I set the sprite’s material to the light material.
  5. Tried with numerous changes, but the screen is black as if nothing is overriding the clear_color.

Things I didn’t include from your example:

  1. the LOS files
  2. the “render quad” in main.collection. I’m not sure what this is. I noticed it has the background2.png file attached to the model file. Does this mean I need one specific image to render to?

M-RE.zip (1.2 MB)

#6

I’ve messed with the camera properties, literally copy-pasted 99% of what was applicable, and still no fix. The screen is still black. Does anyone have experience with this? Here is the updated project:

M-RE.zip (1.3 MB)

#7

Isn’t this the quad everything is rendered to? If you don’t add it then you’ll likely end up with a black screen.

2 Likes
#8

Like Britzl says, that quad is vital! What render targets do is, instead of drawing everything to the screen, they draw it to a texture. Unless you draw that texture on something afterward (to the screen), none of that stuff will be visible.

I just tested, the ‘background2.png’ image on the quad doesn’t need to be there. I think I just put it there as a placeholder, but you can leave both textures blank.

I tested your project (the first version) and found the another serious problem: You had your camera set to perspective (“Orthographic” setting un-checked), but the Z-position of the camera object was still at 0. Since your sprites are all positioned very close to Z = 0, the perspective camera couldn’t see anything. With Rendercam, the Z-position of the camera, and the camera’s “Near Z”, “Far Z”, and “View Distance” settings all have to work together for the camera to ‘see’ objects at the correct depths (and perspective cameras can only see stuff that’s in front of them).

I suggest you reset your camera to the default setting: Orthographic = true, Near Z = -1, Far Z = 1, View Distance = 0, and leave the camera’s position at Z = 0. That will give you a standard orthographic camera that renders from -1 to 1 in Z.

2 Likes
#9

:heavy_check_mark:

Right, my bad.

Done, but still no change?

EDIT: And yes… The render quad is in the project just as it is in your render target project.

#10

Move the render quad’s position to 0, 0, 0.

4 Likes
#11

That was surprisingly simple and…

I T - L O O K S - B E A U T I F U L !

Thanks so much for your help!

3 Likes