xna - Draw many flashlights' focused lights' "circles" on a voxel engine map (and other objects)

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.

Answer

Where could I find good HLSL tutorials?

Reimer's

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.

Diagram:
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.

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