Let There Be Light
So, we displayed a lot of cubes and triangles together, and we also created a few controls to play around with the 3D Scene. But the very essence of 3D content is light.
For this tutorial, I’ve included a bunch of classes I am currently working one, not as a 3D engine, but as a small toolbax for future experiments. You will find in the given source code those currently “W.I.P” classes :
* Geometry : Stores a geometry, and it’s indexes. Has shorcuts to declare square faces instead of triangles. Can create and upload the buffers for you. Later, will be able to generate the faces normals (more about that later)
* Cube : A Simple class extending Geometry, creating a Cube made of 24 points so that the future faces normals act as intended.
* ColorMaterial : Right now a simple RGB value object like, but should contain the fragment shader soon.
* ArcBallCamera : Not something new, but completely revamped. It’s now really moving onto a circle and using the pointAt method to target the origin. This new method make the drag controler a little bit smarter (dragging to the bottom will only make the object rotate as if the screen would be the X axis.)
When I announced a few weeks ago this tutorial, I compared faces normals (actual normals in 3D language) to normalized vertices.
You will find in the Geometry class a method called “computeNormals” that will give you the first ones, the one we wants. This method is still in progress as right now, the normal can be the opposite of the wanted one if the face is drawn counter clockwise.
I will explain in another article how you can generate basic normals for your models, but keep in mind that this data should ideally be computed by your 3D designer, because it can “smooth” edges for low-poly meshes.
So anyway, by calling the computeNormals method, we will get small vector perpendicular to each face (each triangle).
The Lamberian Factor
The first light we will compute is what we call the diffuse light. The amount of light diffused by a surface depends on the angle between that surface, and the light. this is call the Lamberian Factor, or the Lamberiance Reflectance. Quoting Wikipedia, “The reflection is calculated by taking the dot product of the surface’s normal vector, and a normalized light-direction vector, pointing from the surface to the light source.”
The dot product is an operation we can do using AGAL very simply using the opcode dp3, which stands for Dot Product 3, 3 being the number of components (here, x, y and z).
Just a word about the dot product. The dot product, or scalar product takes two vectors and returns a single number. The only thing you need to remember is this :
- If two vectors goes toward the “same” direction, the dot product will be a positive number.
- If the vectors are perpendicular to each other, the dot product will be equal to zero
- If the Vector are facing each other, the dot product will be a negative number.
Allright, let’s now code this. First of all, download the following source code.
The LetThereBeLight class is rather simple. On context creation, I simply get an ArcBallCamera class, a bunch of projection matrix, a model matrix (that will be added to the Geometry class later), and a Cube. The Cube instance will receive a ColorMaterial (not really relevant right now) andcreate the buffers for me :
geometry = new Cube(50); geometry.setMaterial(new ColorMaterial(0xFF00FF)); geometry.createBuffers(context);
This is simple stuff for you now, so let’s move on to the actual shader.
The Shader Constants
As we saw, the Lamberian Factor requires, in order to be calculated, the light direction, and the surface normal. The surface normals are already stored in the vertexBuffer, so we still need the Light Direction. But we also need a bunch of other values :
- The Light Color. Here I chose a plain white
- The Ambient Light. The ambient light is the minimum amount of light a surface can receive. It’s a simple technique to simulate the fact that, in the real world, the light is reflected so many time that even when an object side is not under the light, it’s still visible and doesn’t turns completely black.
- The Light Direction. In this example, the light will always come from the camera, meaning that we will more have the impression of moving the cube under the light than moving around it, but feel free to try other values
All those data will be stored in shader constants, so here we go :
context.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 0, Vector.<Number>([0,0,0,0])); //fc0, for clamping negative values to zero context.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 1, Vector.<Number>([0.1,0.1,0.1,0])); //fc1, ambient lighting (1/4 of full intensity) var p:Vector3D = camera.position; p.negate(); p.normalize(); context.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 2, Vector.<Number>([p.x,p.y,p.z,1])); // Light Direction context.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 3, Vector.<Number>([1,1,1,1])); // Light Color
You may have noticed that all those constants, even if they are mostly vectors, directions, positions, are FRAGMENT constants, since we have no use of them in the vertex shader. Looking at the source, you will see that the color of the cube (here a nice pinkish color) is uploaded as a constant. We saw that already.
OK, so now, everything is in place, we may have a look at the shader AGAL code.
What we need to do according to the Lamberian Factor :
- Calculate the Lamberian Factor using a dot product between the normal (v1) and the light direction (fc2)
- Negate the result : We do this because the Lamberian formula is using the light direction from the surface to the light source. So you can either negate the light direction vector, or negate the dot product result
- Clamp any result below 0 : if the angle between the light and the surface normal is higher than 90°, then the dot product will be negative. This could cause unexpected result when computing the output color, so we just set it to 0 (no light).
- Multiply the fragment color by the light amount. For a light amount equals to 0, the surface will be black, for a light amount equals to 1, the surface will have it’s regular color.
- Multiply the resulted color by the light color. Your red cube might look a little more purple if your light is blue
- Add the ambient light. This way, every black surface will become a little brighter.
Here is the corresponding AGAL code :
code = ""+ "dp3 ft1, fc2, v1 n"+ // dot the transformed normal (v1) with light direction fc2 -> This is the Lamberian Factor "neg ft1, ft1 n"+ // Get the "opposite" vector. We could also have uploaded the opposite of the light direction to avoid this step "max ft1, ft1, fc0 n"+ // clamp any negative values to 0 // ft1 = lamberian factor "mul ft2, fc4, ft1 n"+ //multiply fragment color (fc4) by light amount (ft1). "mul ft2, ft2, fc3 n"+ //multiply fragment color (ft2) by light color (fc3). "add oc, ft2, fc1"; //add ambient light and output the color
UPDATE : Thanks to the help of Jean Marc, I discovered the sat opcode that one can use to clamp any value to the range [0,1]. So I should just replace the “max” line with this one :
" sat ft1, ft1 n"+
which allows me to save a constant, so I should also get rid of fc0.
Also, you now know that copying values to the varying registers (v0, v1) the values are interpolated. That behavior was demonstrated by the color slowly fading between two points in the previous tutorials. Well, as Jean Marc stated, when being interpolated, the normals could not “normalized” anymore, so I should normalize my normals (duh !) in the fragment shader before using them. Thanks Jean Marc !
Compile and run : here it is, your first directional light !
For the posted demo, I added two options that are not in the sources : the first checkbox fix the light at the current position so you can rotate the cube and see the effect of ambient light, and the second one switch the normals to normalized vertices (see two first schemes).
As always, have fun with the sources, and tell me what you think ! If you need more explainations or anything, just feel free to ask.
See you !