3D Engine Creation pt 2: Lighting & Shaders


Quick update on my current experiment building a 3D engine in Flash – I’ve added light and shaders. Shaders are special materials that are effected by the direction each face is pointing (called the normal) and another vector, in this case, a light direction. During the render process, each face calculates its brightness thus giving the illusion that light is reflection off of the mesh.

Upon researching, I found on a few occasions that the way to calculate lighting is to simply add the normalized normal and normalized light vector. This, however, seems to be slightly incorrect applicable to this situation. First, the result is another Point3D, where instead I am looking for a brightness value. Upon consulting coworker Mathieu Badimon, he suggested using the dot product of the normal and light vector. This returns a single number value, and when used to calculate brightness seems to work perfectly.

Next step? Finally tackling bitmap distortion in 3D, allowing for bitmap materials. (Which opens the doors to different types of shades as well, such as bump maps and dot3 normal mapping.) Once I’ve tackled that, I plan to completely restructure the engine, as I have a better idea now of how it can work while still sticking to my original plan of excluding a view3D. In the process of restructuring, I plan to write up the core math equations used in the most simplified way that I can, as finding some of these equations in a non-language specific explanation or simplified manor can be difficult.

Check out the new demo here. Click and drag the white dot to move the light source.

8 thoughts on “3D Engine Creation pt 2: Lighting & Shaders”

  1. Very cool! One question I have is have you tested different FPS to see how your 3D engine performs? I know I typically will use about 61, not sure what you use or if you have to use a standard working at FB.

    1. I think I have it set at 71, which is usually what we use at work. I haven’t really done any performance testing or benchmarking yet, I want to optimize and restructure my code before I get into that.

  2. Hi, nice example, I would like to know how you do the light effect I’ve tested that function flash dotproduct but still I don’t get teh result I want, could you tell me or show me that code part, same as you I’m just trying to know more about 3d and as3 stuff. Thanks.

    1. Sure, here’s what my code for the dot product looks like:

      public static function dot(v0:Point3D, v1:Point3D):Number {
      return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;

      And here is where I apply it:

      override public function apply(graphics : Graphics, face : Face) : void {
      var normal:Point3D = face.normal;
      var angle:Number = ( 1+GeomUtils.dot(normal, _light.getNormalized()) )/2;
      var brightness:Number = ( (angle+_light.falloff)*(_light.intensity) )- _light.falloff;
      var color: uint = (brightness <= 1) ? ColorUtils.getSimpleBlend(_light.shadowColor, fillColor, brightness) : ColorUtils.getSimpleBlend(fillColor, _light.color, brightness-1) ;
      graphics.beginFill(color, this.fillAlpha);
      graphics.lineStyle(this.lineThickness, this.lineColor, this.lineAlpha);

      Again, this is still a work in progress. Basically, you need the normal of the normal of the face and the normalized vector of the light, and the result of the dot product will give you something to base basic brightness off of. I found a lot of useful information that can probably be explained a lot better than I could over at: http://www.gamedev.net

Leave a Reply

Your email address will not be published. Required fields are marked *