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

Question

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 1

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

Answer 2

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!