0
\$\begingroup\$

I am trying to use a shader to get an effect like this. Notice how

  • every cube has exactly the same lightning as every other no matter where it is on the screen
  • if you look closely the lightning is making the front face's top parts darker, and the front face's lower parts lighter (about 20% difference at most)
  • also more importantly the edges of the cubes are smoothed ( filleted ) and foggy looking

1

I am drawing my cubes like this with the default lightning.

        cubeEffect.EnableDefaultLighting();
        for (int i = 0; i < 10; i++)
        {
            for (int j = 0; j < 25; j++)
            {
                // apply the effect and render the cube
                foreach (EffectPass pass in cubeEffect.CurrentTechnique.Passes)
                {
                    cubeEffect.World = Matrix.CreateTranslation(-15.6f + i * 3.05f, 15.5f - j * 1.168f, 0.0f);
                    pass.Apply();
                    //draw
                    RenderToDevice(GraphicsDevice);
                }
            }
        }

This is how my cubes looks like with the default lightning... i am trying to achieve an effect like the first image. I have no experience with lightning effects and how to do something like this so, i'd appreciate any help on how to get started.

2

I used this http://blogs.msdn.com/b/dawate/archive/2011/01/20/constructing-drawing-and-texturing-a-cube-with-vertices-in-xna-on-windows-phone-7.aspx tutorial's help to draw this

\$\endgroup\$
  • \$\begingroup\$ In addition to others suggestions, try using smooth normals. \$\endgroup\$ – concept3d Jan 25 '15 at 12:37
  • \$\begingroup\$ @concept3d um, can you explain what smooth normals is ? because i sadly don't know how what it is to try it \$\endgroup\$ – dimitris93 Jan 25 '15 at 13:12
  • \$\begingroup\$ Check my answer here \$\endgroup\$ – concept3d Jan 25 '15 at 14:29
  • \$\begingroup\$ @concept3d this is exactly what i am trying to do here with smooth/rounded edges, but i have absolutely no idea on how to code that. right now i know 2 things. making cubes solely from vertices. and making cubes with vertices and indexes. the problem i had with indexes is that i drew everything on the same color, lets say red, and then when i enabled lightning everything was black-ish or purple. but even so, i cant even imagine, how someone can use vertices and indexes to draw a cube with rounded edges \$\endgroup\$ – dimitris93 Jan 25 '15 at 14:36
  • \$\begingroup\$ How many vertices do you use to draw a cube? \$\endgroup\$ – concept3d Jan 25 '15 at 14:40
1
\$\begingroup\$

I believe all you need for this is some ambient lighting (light that is allways there, even in the dark parts), and a diffuse light. Instead of enabling default lighting, call

cubeEffect.LightingEnabled = true;
cubeEffect.AmbientLightColor = new Vector3( 0.3f, 0.3f, 0.3f );
cubeEffect.DirectionalLight0.Enabled = true;
cubeEffect.DirectionalLight0.DiffuseColor = new Vector3( 0.7f, 0.7f, 0.7f );
cubeEffect.DirectionalLight0.Direction = new Vector3( 0, 1, -1);
for (int i = 0; i < 10; i++)
{
    for (int j = 0; j < 25; j++)
    {
        // apply the effect and render the cube
        foreach (EffectPass pass in cubeEffect.CurrentTechnique.Passes)
        {
            cubeEffect.World = Matrix.CreateTranslation(-15.6f + i * 3.05f, 15.5f - j * 1.168f, 0.0f);
            pass.Apply();
            //draw
            RenderToDevice(GraphicsDevice);
        }
    }
}
\$\endgroup\$
  • \$\begingroup\$ what direction should my color have ? right now all i get is a solid red color (no shades anywhere) \$\endgroup\$ – dimitris93 Jan 25 '15 at 10:50
  • \$\begingroup\$ Oops sorry, I'll edit my answer to include the direction. But it depends on your axes. If you have Y up, x to the right, you would want something like new vector3(0,1,-1) \$\endgroup\$ – Peethor Jan 25 '15 at 10:54
  • \$\begingroup\$ Do note, however, that this only makes all cubes uniformly lit. You could get that fade by messing with the normals. You could, for example, make cubes with actual round edges (will take a few more polygons), and curve the sides a little bit, as if you're inflating the cube. \$\endgroup\$ – Peethor Jan 25 '15 at 10:59
  • \$\begingroup\$ hmm with this code i do have the same lightning in every cube with Vector3( 0, 0, -1), but what about the top-down lightning i mentioned in my question, or the "foggy edges" any idea about those ? (the Vector3( 0, 1, -1) gives a different color on each cube) \$\endgroup\$ – dimitris93 Jan 25 '15 at 11:03
  • 1
    \$\begingroup\$ Oh no, don't code it. Download a program like blender, and create the model in that. All you have to do in code is load the model you made, and draw it like you're drawing the model you have now. \$\endgroup\$ – Peethor Jan 25 '15 at 14:44
1
\$\begingroup\$

You need a directional lighting. Also disable specular lighting if you want screen position not to matter. This type of directional lighting is achieved by:

float lighting = saturate(dot(normal,lightDirection));

But you can enable it in a BasicEffect, too. If you want speculars gone, turn down the material's specular intensity to zero (you can also do it in the BasicEffect by setting SpecularColor to black).

Update:

You should try this if you are using built-in effects:

cubeEffect.DirectionalLight0.Direction = Vector3(1,1,1);
cubeEffect.SpecularColor = Color.Black.ToVector3();

If you want your faces to not be uniformly lit, you should have smoothed normals on the faces. You can achieve this, by having your vertex normals account for their adjacent faces. So each corner should have one normal which points outwards, not three normals for each face.

\$\endgroup\$
  • \$\begingroup\$ can you explain the line float lighting = saturate(dot(normal,lightDirection)); i don't quite understand how do use this in my code. i have barely touched a shader in my life \$\endgroup\$ – dimitris93 Jan 25 '15 at 10:48
  • \$\begingroup\$ It goes into the vertex shader if you want per-vertex lighting or pixel shader if you want per-pixel lighting. normal variable is your vertex normal, lightDirection is a shader uniform variable, they are both float3 vectors. \$\endgroup\$ – János Turánszki Jan 25 '15 at 10:51
  • \$\begingroup\$ i'm not sure what saturate function does, and how will i use the "lightning" variable in my code, if you see Peethor's answer you can see how the code in xna works if you don't remember the syntax. because i can't understand which variable you want me to tweak \$\endgroup\$ – dimitris93 Jan 25 '15 at 10:56
  • \$\begingroup\$ Sorry, updated for XNA code \$\endgroup\$ – János Turánszki Jan 25 '15 at 11:04
  • \$\begingroup\$ hmm, do you any any idea how in the image i showed in my question has the edges smoothed like that though ? my edges look rough and not game-looking , its more like colored excel blocks \$\endgroup\$ – dimitris93 Jan 25 '15 at 11:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.