• Advertisement
Sign in to follow this  

OpenGL Light effects in 2D game

This topic is 4442 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

(I'm experienced in 2D graphics and C++, but a complete OpenGL-newbie.) Yes, I've been googling and reading lots of stuff. Still no go. Top-down 2D game. It draws a lot of sprites and stuff. Everything is pretty dark and gloomy. Now I would like to draw some circular textures that _brighten_ the existing graphics. Example: A laser shot should brighten whatever dark area it passes over. [Question 1:] Is it possible to use some sort of "multiply-mode" where I can set the gain to be larger than 1 - maybe up to 16 - to _brighten_ the covered pixels. How would I do this? [Question 2] An alternative plan I guess, would be to draw everything in full brightness, then draw a separate dark-map of the entire scene into some other OpenGL buffer (which!?), then finally multiply these two buffers together. Is this a better plan? Any pointers? Can anyone give me advice on this please. Which plan would be best? Would be great if I could get some code snippets or references. Thank you! /Marcus

Share this post


Link to post
Share on other sites
Advertisement
Quote:
Original post by marcusz
Top-down 2D game. It draws a lot of sprites and stuff. Everything is pretty dark and gloomy.

Now I would like to draw some circular textures that _brighten_ the existing graphics. Example: A laser shot should brighten whatever dark area it passes over.


Awesome. I love dev'ving 2D overhead games too with similar effects, so maybe I can lend a hand here. :)

Quote:
[Question 1:] Is it possible to use some sort of "multiply-mode" where I can set the gain to be larger than 1 - maybe up to 16 - to _brighten_ the covered pixels. How would I do this?


I know what you're asking, but the most elegant way of doing this (IMHO, but of course!) is by creating a flare sprite and drawing it over your 'glowing' object using additive blending (glBlendFunc(GL_ONE,GL_ONE)). Even just alpha transparency works. Best image I could pull off Google is this, but using Photoshop or anything similar (like GIMP) you can make them pretty easily.

Quote:
[Question 2] An alternative plan I guess, would be to draw everything in full brightness, then draw a separate dark-map of the entire scene into some other OpenGL buffer (which!?), then finally multiply these two buffers together. Is this a better plan? Any pointers?


This will probably hurt your performance a lot if you're drawing much; which you probably are. I heavily recommend taking the above route. If you have any trouble implementing it, or just understanding my blatherings, I could probably whip you up a little example if you'd like.

Good luck with you game, too. Do you have a website or a dev-blog on it? As I said above, I'm a big fan of those games. :)

Share this post


Link to post
Share on other sites
Thank you for your reply!

You can see some stuff on www.mightyshrimp.com. Unfortunately the Quicktime movies are using some weird Apple codec. I'm a newbie webguys as well as an OpenGL-newbie :-)

I'll try describe better what I'm looking for: Imagine the entire screen is almost completely black. There is graphics there (ships and enviroments etc.) but it's so dark so you hardly see it. Now you press a button that lights up a big spotlight. Suddenly you can see in bright daylight whatever is covered by the light of the spotlight. Outside the spotlight things are still dark.

Think a pitch-black room in Doom3. Then you light your flashlight. Now you can see stuff in the room. This is what I want :-)

This requires multiplication of what is already on screen with a number > 1 - so the existing RGB:s on the screen get bigger numbers.

I used to have all this working with my own 2D software renderer, but am now trying to port the game to OpenGL.

Another thing that worries me a litte is the bitdepth of the OpenGL render buffer. I used RGB48 (16 bit color components) in my software renderer with 8.8 fixed point color components. This way I could render graphics completely black (the graphics only used the lower 8 bits of each color component), the gain-up the graphics using multiplication.

Am I making sense?


/Marcus

Share this post


Link to post
Share on other sites
I understand what you want to do, but since each pixel can only be as bright as 1, that won't happen unless you do some additive blending.

Just to make sure that we're both on the same page, are you referring to something like this? If so, then you can use the method I mentioned in my first reply to achieve it, by drawing a sprite ontop of the lit object with additive blending.

When I checked out your video -- which looks wonderful, BTW -- I see you're already using additive blending tons for your various effects like explosions and such. Isn't that same way that the explosions light up the ship and their surroundings the same effect as what we're discussing here? I guess I'm sort of confused, then. :/

Share this post


Link to post
Share on other sites
Well imho the best approach would be to use background-textures with neutral or above neutral light-intensity. Then draw the background with darker vertex-colors (i.e. gray (0.5,0.5,0.5) ) which will produce the gloomy environment you want. When lighting you can either blend colored texture-sprites above this scene which will make the background fade depending on the light-sprite's intensity or you can use the original textures in the lighted spots (using the alpha-channel of the color-component) which will restore the original lighted state and create the illusion of truly lighted areas. Of course you can also use colored lights when blending which will create fancy disco-lights :).

Share this post


Link to post
Share on other sites
Quote:
Original post by OrangyTang
Shameless self promotion.

Thats one way of going about it, and (IMHO) a good way since it gives good quality and mimics how actual lights behave.


That is by far one of the most usefull tutorials i have seen online before, im not into 2d right now but thats a great tutorial!

Share this post


Link to post
Share on other sites
Thank you for the input guys!

HopeDagger:
-------------------------
The stuff in my movie is done by my software-only renderer. It uses both add-effects (as you suggest) and multiply-effects (that I don't know how to make in OpenGL). Sorry I confused you guys by talking about OpenGL, then having a completely different (software) renderer on my webpage.

The add-effects do look great, but it's not how the flashlight works in Doom 3 - which is the effect I'm after.

(Are those your games! Wow!)

OrangyTang:
-------------------------
I've read your document before - it's great! This time I will study it _carefully_, now that I'm learning OpenGL, but I'll keep your advanced stuff for my next game or I'll never finish my game!

You design seems to work by drawing one pass for the background, then one pass for each spotlight. My game uses up to maybe 100 tiny circular spots at the same time, so this technique may be a performance problem.

Do you think you can give me some hints on how my original question 2 could be done in OpenGL?
1) Draw all graphics (sprites and backdrops) at full brightness to color buffer 1
2) Fill color buffer 2(!!?!) with the default / ambience color. Usually dark-gray.
3) Draw all spotlights in color buffer 2 using add-mode.
4) Multiply color buffer 2 into color buffer 1
5) Show color buffer 1.

Can this be done? What buffers to use? Sorry for newbie questions...

(Damn, your tutorial makes me want to do a completely different solution for my graphics... Grrrr....)

IronFox:
-------------------------
Disco-lights! That's what I want! :-)

Share this post


Link to post
Share on other sites
Quote:
Original post by marcusz
You design seems to work by drawing one pass for the background, then one pass for each spotlight. My game uses up to maybe 100 tiny circular spots at the same time, so this technique may be a performance problem.

Well each pass is only as small as the area on screen it covers, so it's not as bad as it first sounds. However 100+ lights might be a little too much, in this case you could combine them into one single pass - this is less accurate (they basically act as one oddly shaped light, so overlapping lights won't overbright correctly).


Quote:
Do you think you can give me some hints on how my original question 2 could be done in OpenGL?
1) Draw all graphics (sprites and backdrops) at full brightness to color buffer 1
2) Fill color buffer 2(!!?!) with the default / ambience color. Usually dark-gray.
3) Draw all spotlights in color buffer 2 using add-mode.
4) Multiply color buffer 2 into color buffer 1
5) Show color buffer 1.

Can this be done? What buffers to use?

That could be done. Basically buffers 1 and 2 would be textures which you'd render directly to. The final steps 4 and 5 could then be acheived by rendering a multitextured fullscreen quad, with the textures set to multiply.

However you'll loose some range of lighting here - at most your second light buffer can hold values of '1' (full intensity), anything over will be clamped. So you can never get brighter than what is in your first colour buffer. The way to fix this would be to have multiple buffers/textures instead of just buffer 2 - ideally one per light. Then your final steps 4 and 5 would be repeated for each, but with additive blending so they all merge in the framebuffer. And then you're basically doing the same thing as my tutorial from earlier - except in my method I compose everything in the backbuffer to avoid potentially costly render to texture stuff.

Share this post


Link to post
Share on other sites
Quote:
Original post by marcusz
The stuff in my movie is done by my software-only renderer. It uses both add-effects (as you suggest) and multiply-effects (that I don't know how to make in OpenGL). Sorry I confused you guys by talking about OpenGL, then having a completely different (software) renderer on my webpage.


Aah, I see. Very impressive work for a software renderer. Kudos. :)

Quote:
The add-effects do look great, but it's not how the flashlight works in Doom 3 - which is the effect I'm after.


Alright, I guess I resign from that attempt then, hehe. I'm only mediocre with OpenGL, so I'm not quite sure how to go about applying multiplication blending. Sorry I couldn't be more helpful!

Quote:
(Are those your games! Wow!)


Which? The ones on the website that the screenshot was on? No. The ones in my signature? Yes. :P

Good luck with your game, still, even if I wasn't the one to offer the nicest solution. I've got your blog bookmarked too -- I want to play that shooter! (What lib are you using for your rendering, if any?)


@OrangyTang: Awesome article. Is there a demo program somewhere of that that I can see in action? I might splurge in my coding and try for dynamic shadows like that in my project. :)

[Edited by - HopeDagger on December 19, 2005 9:28:53 PM]

Share this post


Link to post
Share on other sites
HopeDagger:
-----------------
I'm still thankful you helped me kick-start this. I was about to give up and you gave me new energy!

The software-render uses SDL only. And pretty complicate s-buffering (google for "s buffer" and RLE-compress 8bit images with alpha channels. All the circular spotlights and particles are actually synthetic - they are calculated on the fly while drawing(!).

OrangyTang:
-----------------
The multi-texture stuff scares me (I'm a newbie). What about this plan:
(I just discovered glCopyTexImage2D().)

1) Fill color buffer with the default / ambience color. Usually dark-gray.
2) Draw all spotlights in color buffer using add-mode.
3) glCopyTexImage2D() of the entire color buffer into texture X
4) Clear color buffer
5) Draw all graphics (sprites and backdrops) at full brightness to color buffer.
6) glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE)
7) Draw texture X to color buffer (using GL_MODULATE above).
8) Show color buffer

Wroooom?


/Marcus

Share this post


Link to post
Share on other sites
Quote:

1) Fill color buffer with the default / ambience color. Usually dark-gray.
2) Draw all spotlights in color buffer using add-mode.
3) glCopyTexImage2D() of the entire color buffer into texture X
4) Clear color buffer
5) Draw all graphics (sprites and backdrops) at full brightness to color buffer.
6) glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE)
7) Draw texture X to color buffer (using GL_MODULATE above).
8) Show color buffer


I basicly do it that way. I use the FBO, when available, beacuase glCopyTexImage2D can be a slow thing. I also do soft shadows (as described in OrangyTang's great Tutorial) and therefor need to do a render-pass for every light.
What you posted should work, I think!
Nathan

Share this post


Link to post
Share on other sites
Oh. Cool!

I just realized that when I call glCopyTexImage2D() I can't use a single texture that is 640*480 (my screen size)....

I must use 8 textures:

512*256, 128*256
512*128, 128 * 128
512*64, 128 * 64
512 * 32, 128 * 32

How stupid is that? Do you do it like this?

/Marcus

Share this post


Link to post
Share on other sites
Or use a single larger one (1024x1024) to avoid cracks between textures, at the expense of some wasted memory. Or use ARB_texture_non_power_of_two which lets you create textures of any size.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
  • Advertisement
  • Popular Tags

  • Advertisement
  • Popular Now

  • Similar Content

    • By QQemka
      Hello. I am coding a small thingy in my spare time. All i want to achieve is to load a heightmap (as the lowest possible walking terrain), some static meshes (elements of the environment) and a dynamic character (meaning i can move, collide with heightmap/static meshes and hold a varying item in a hand ). Got a bunch of questions, or rather problems i can't find solution to myself. Nearly all are deal with graphics/gpu, not the coding part. My c++ is on high enough level.
      Let's go:
      Heightmap - i obviously want it to be textured, size is hardcoded to 256x256 squares. I can't have one huge texture stretched over entire terrain cause every pixel would be enormous. Thats why i decided to use 2 specified textures. First will be a tileset consisting of 16 square tiles (u v range from 0 to 0.25 for first tile and so on) and second a 256x256 buffer with 0-15 value representing index of the tile from tileset for every heigtmap square. Problem is, how do i blend the edges nicely and make some computationally cheap changes so its not obvious there are only 16 tiles? Is it possible to generate such terrain with some existing program?
      Collisions - i want to use bounding sphere and aabb. But should i store them for a model or entity instance? Meaning i have 20 same trees spawned using the same tree model, but every entity got its own transformation (position, scale etc). Storing collision component per instance grats faster access + is precalculated and transformed (takes additional memory, but who cares?), so i stick with this, right? What should i do if object is dynamically rotated? The aabb is no longer aligned and calculating per vertex min/max everytime object rotates/scales is pretty expensive, right?
      Drawing aabb - problem similar to above (storing aabb data per instance or model). This time in my opinion per model is enough since every instance also does not have own vertex buffer but uses the shared one (so 20 trees share reference to one tree model). So rendering aabb is about taking the model's aabb, transforming with instance matrix and voila. What about aabb vertex buffer (this is more of a cosmetic question, just curious, bumped onto it in time of writing this). Is it better to make it as 8 points and index buffer (12 lines), or only 2 vertices with min/max x/y/z and having the shaders dynamically generate 6 other vertices and draw the box? Or maybe there should be just ONE 1x1x1 cube box template moved/scaled per entity?
      What if one model got a diffuse texture and a normal map, and other has only diffuse? Should i pass some bool flag to shader with that info, or just assume that my game supports only diffuse maps without fancy stuff?
      There were several more but i forgot/solved them at time of writing
      Thanks in advance
    • By RenanRR
      Hi All,
      I'm reading the tutorials from learnOpengl site (nice site) and I'm having a question on the camera (https://learnopengl.com/Getting-started/Camera).
      I always saw the camera being manipulated with the lookat, but in tutorial I saw the camera being changed through the MVP arrays, which do not seem to be camera, but rather the scene that changes:
      Vertex Shader:
      #version 330 core layout (location = 0) in vec3 aPos; layout (location = 1) in vec2 aTexCoord; out vec2 TexCoord; uniform mat4 model; uniform mat4 view; uniform mat4 projection; void main() { gl_Position = projection * view * model * vec4(aPos, 1.0f); TexCoord = vec2(aTexCoord.x, aTexCoord.y); } then, the matrix manipulated:
      ..... glm::mat4 projection = glm::perspective(glm::radians(fov), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f); ourShader.setMat4("projection", projection); .... glm::mat4 view = glm::lookAt(cameraPos, cameraPos + cameraFront, cameraUp); ourShader.setMat4("view", view); .... model = glm::rotate(model, glm::radians(angle), glm::vec3(1.0f, 0.3f, 0.5f)); ourShader.setMat4("model", model);  
      So, some doubts:
      - Why use it like that?
      - Is it okay to manipulate the camera that way?
      -in this way, are not the vertex's positions that changes instead of the camera?
      - I need to pass MVP to all shaders of object in my scenes ?
       
      What it seems, is that the camera stands still and the scenery that changes...
      it's right?
       
       
      Thank you
       
    • By dpadam450
      Sampling a floating point texture where the alpha channel holds 4-bytes of packed data into the float. I don't know how to cast the raw memory to treat it as an integer so I can perform bit-shifting operations.

      int rgbValue = int(textureSample.w);//4 bytes of data packed as color
      // algorithm might not be correct and endianness might need switching.
      vec3 extractedData = vec3(  rgbValue & 0xFF000000,  (rgbValue << 8) & 0xFF000000, (rgbValue << 16) & 0xFF000000);
      extractedData /= 255.0f;
    • By Devashish Khandelwal
      While writing a simple renderer using OpenGL, I faced an issue with the glGetUniformLocation function. For some reason, the location is coming to be -1.
      Anyone has any idea .. what should I do?
    • By Andrey OGL_D3D
      Hi all!
      I try to use the Sun shafts effects via post process in my 3DEngine, but i have some artefacts on final image(Please see attached images).
      The effect contains the following passes:
      1) Depth scene pass;
      2) "Shafts pass" Using DepthPass Texture + RGBA BackBuffer texture.
      3) Shafts pass texture +  RGBA BackBuffer texture.
      Shafts shader for 2 pass:
      // uniform sampler2D FullSampler; // RGBA Back Buffer uniform sampler2D DepthSampler; varying vec2 tex; #ifndef saturate float saturate(float val) {     return clamp(val, 0.0, 1.0); } #endif void main(void) {     vec2 uv = tex;     float sceneDepth = texture2D(DepthSampler, uv.xy).r;     vec4  scene        = texture2D(FullSampler, tex);     float fShaftsMask     = (1.0 - sceneDepth);     gl_FragColor = vec4( scene.xyz * saturate(sceneDepth), fShaftsMask ); } final shader:
      // uniform sampler2D FullSampler; // RGBA Back Buffer uniform sampler2D BlurSampler; // shafts sampler varying vec4 Sun_pos; const vec4    ShaftParams = vec4(0.1,2.0,0.1,2.0); varying vec2 Tex_UV; #ifndef saturate  float saturate(float val) {     return clamp(val, 0.0, 1.0); } #endif vec4 blendSoftLight(vec4 a, vec4 b) {   vec4 c = 2.0 * a * b + a * a * (1.0 - 2.0 * b);   vec4 d = sqrt(a) * (2.0 * b - 1.0) + 2.0 * a * (1.0 - b);       // TODO: To look in Crysis what it the shit???   //return ( b < 0.5 )? c : d;   return any(lessThan(b, vec4(0.5,0.5,0.5,0.5)))? c : d; } void main(void) {     vec4 sun_pos = Sun_pos;     vec2    sunPosProj = sun_pos.xy;     //float    sign = sun_pos.w;     float    sign = 1.0;     vec2    sunVec = sunPosProj.xy - (Tex_UV.xy - vec2(0.5, 0.5));     float    sunDist = saturate(sign) * saturate( 1.0 - saturate(length(sunVec) * ShaftParams.y ));     sunVec *= ShaftParams.x * sign;     vec4 accum;     vec2 tc = Tex_UV.xy;     tc += sunVec;     accum = texture2D(BlurSampler, tc);     tc += sunVec;     accum += texture2D(BlurSampler, tc) * 0.875;     tc += sunVec;     accum += texture2D(BlurSampler, tc) * 0.75;     tc += sunVec;     accum += texture2D(BlurSampler, tc) * 0.625;     tc += sunVec;     accum += texture2D(BlurSampler, tc) * 0.5;     tc += sunVec;     accum += texture2D(BlurSampler, tc) * 0.375;     tc += sunVec;     accum += texture2D(BlurSampler, tc) * 0.25;     tc += sunVec;     accum += texture2D(BlurSampler, tc) * 0.125;     accum  *= 0.25 * vec4(sunDist, sunDist, sunDist, 1.0);           accum.w += 1.0 - saturate(saturate(sign * 0.1 + 0.9));     vec4    cScreen = texture2D(FullSampler, Tex_UV.xy);           vec4    cSunShafts = accum;     float fShaftsMask = saturate(1.00001 - cSunShafts.w) * ShaftParams.z * 2.0;              float fBlend = cSunShafts.w;     vec4 sunColor = vec4(0.9, 0.8, 0.6, 1.0);     accum =  cScreen + cSunShafts.xyzz * ShaftParams.w * sunColor * (1.0 - cScreen);     accum = blendSoftLight(accum, sunColor * fShaftsMask * 0.5 + 0.5);     gl_FragColor = accum; } Demo project:
      Demo Project
      Shaders for postprocess Shaders/SunShaft/
      What i do wrong ?
      Thanks!
       


  • Advertisement