So, I've been searching the internet for a while and I still didn't understand how to create a flashlight's "circle" in front of the camera over other objects.

I found the following links:

using shader;

multi pass effect;

forum question about multiple passes and multiple effects;

shader example with multiple lights (which I can't open because its an old project).

And they give me examples and solutions about how to draw lights or other effects on objects.

But it's not clear to me yet. I'm newbie with HLSL (and still a little with XNA itself) and I don't get what should I do. I need help with the steps I should take to modify my HLSL effect* of the voxel engine to draw a white circle where the cursor points and shine the light around the camera position as the flashlight is on.

*I created a voxel engine that uses a effect (modified a little) I found in a project called TechCraft. It changes the light on the map depending of the time of the day and the sun position. But I'm not sure how it works neither, I just read a little but I'm not used to HLSL as I said. (Where could I find good HLSL tutorials?)

Do I need to make many passes and make a pixel shader and a vertex shader for each one? Or should I create many techniques? What's the difference?

Or is that a bad idea? Should I create another effect and draw again the voxel with its technique and pass?

And maybe it's not only one light. If I'm able to create a multiplayer someday, or NPCs, the game will have more than one light on at the same time. How to draw more than one circle?

I'm really lost with this, and I have no idea where should I start from. I appreciate any help; even showing already answered questions is helpful to me.


2 Answers 2


Where could I find good HLSL tutorials?


Two ways off the top of my head:

Light volume
After rendering, switch to a flashlight shader and draw a cone (some triangles), with the tip located at the camera's position and the circular base pointing in the camera's forward direction, with arbitrary dimensions. You literally render a cone containing the volume you want lit and apply the flashlight "effect" to the affected pixels.

3D "Stencil"
Obtain a circular stencil texture from Paint (transparent, with centered white circle, blurred). During the flashlight pass, render a billboarded quad with the stencil texture applied. The quad can be resized to modify the beam. Output transparent anywhere the stencil is transparent. The values you put into the stencil and the resulting output do not have to be directly related. As a built-in bonus, UV (0.5, 0.5) corresponds to the center of the quad, so you can use the 2D distance from the center to diminish the alpha near the edges, if desired. If you don't need anything other than circular, you can probably just use that distance instead of a texture.

Both produce similar effects. The cone geometry is outlined in gray. Notice the stencil creates the same cones that geometry can; it's up to you. Stenciling gives you unlimited flexibility in describing the "lens" of the flashlight. With a little modification, inverting the stencil I've shown would produce a beam of "unlight" in an otherwise well-lit world.

stencil light

Multiple lights:
Both methods use rendered geometry, so the draw calls for them can be optimized like any other geometry. If you have 58 cones to render, draw the same unit-cone over and over with 58, per-instance, world matrices, instead. You can render all cones with one call to DrawIndexedInstanced(...).

For many lights, it will be preferable to use "deferred rendering/lighting". Instead of rendering the scene directly to the backbuffer, you render a description of the scene to one or more rendertargets, a lightmap to another 1+ rendertarget(s), and then combine them at the end by drawing a fullscreen quad (2D) and sampling the textures to re-construct, and simultaneously light, the entire scene at once.

The best link I have

  • 1
    \$\begingroup\$ forgot multiple lights initially; added a little detail \$\endgroup\$
    – Jon
    Apr 13, 2015 at 22:08
  • \$\begingroup\$ thank you very much! That's a great introduction for the subject. Now I know where I should start. I'm still studying the examples at Reimer's. And I'm reading an archived example by Xbox LIVE. But I cannot understand the example at the point it creates the lights array but doesn't sends to the HLSL file as a parameter... \$\endgroup\$ Apr 17, 2015 at 20:20
  • \$\begingroup\$ By the way, let me understand something I'm still confused with: I have an effect file which creates ambient light and draws textures and I want to modify it to add the other point lights. Is it possible (should I add passes and make new VertexShaderOutputs and PixelShaderInputs) or do I need to create a new effect FX file? About the deferred shading, can I do it in the same file too? And I read it doesn't give support to transparency, maybe it'll give me problems in the future, as my voxel engine may use glass and water. Oh, just 1 more thing: the stencil: how do I project it on the floor? \$\endgroup\$ Apr 17, 2015 at 20:27
  • 1
    \$\begingroup\$ @ArthurGibraltar chat.stackexchange.com/rooms/22875/jon-and-r-nold \$\endgroup\$
    – Jon
    Apr 17, 2015 at 21:53
  • 1
    \$\begingroup\$ @ArthurGibraltar, good point. I started an explanation in chat but, TBH, Reimer's says it well and won't forget anything important :) HLSL Series \$\endgroup\$
    – Jon
    Apr 17, 2015 at 22:27

So, after @Jon helped me understand HLSL and render targets, I could understand more tutorials on the internet and I found my answers in the following links, if anyone is interested:

First I read some of the Riemer's tutorials of HLSL to understand its basics.

Second I read RB Whitaker's HLSL/Effect tutorials to get some more information.

Third I read the example project of XBox Create of multipass lighting so I understood how to draw many lights with additive render state. I had to change some semantics and update some old code, as it's written with XNA 2.0.

Then finally I read Advanced Lighting in 3D Graphics with XNA Game - spotlights and point lights with HLSL so I could get the math codes for applying light in the right vertices and pixels.

With all those links and the example diagram given by Jon, I could program my own HLSL effect with multipass.

The code I had to update from XNA 2.0 I searched in XNA blogs on the internet.

Thanks for all the help!


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .