Posted by: pixelero | October 8, 2008

Flash 10, Part 6 of testing drawTriangles, shading objects

You’ll need Flash Player 10 for these demos to show corrently …

Doing a diffuse shading with graphics.drawTriangles(): the principle is to connect two shapes,
one with normally wrapped texture and one with shading:

To get the actual shading I’m using a bitmap-stripe with different shade values as the texture:

The u-coordinate for shading mapping is defined by the dot-product, = cosine of the between-angle, of the vertex normal and vector of light direction, from values near 0.0 in the dark parts to 1.0 on the brighter areas. Similar to Gouraud-shading, the color from the vertices is interpolated over the triangle by drawTriangles(). Using a bitmap as some kind of lookup-table also allows easy control of brightness, contrast and light color. Notice that I’ve used a very dark blue at the darkest parts to simulate ambient light and give the shape some extra depth (Africa in the image below).

and here’s the resulting image – and demo, two layers combined with blendmode ‘hardlight’ :

… source for globe-demo

… for comparing an earlier demo of a rotating globe with pixel bender

Ok, rotating cubes and spheres, seen it: let’s have some more advanced shapes, the classic Stanford Bunny with 500 vertices and mesh of 1000 triangles – in fact the smallest I could find on the net, the texture mapping may not be the best possible, the model had no uv-data, so I applied a simple sphere-mapping:

An Eagle with a mesh of 1500 triangles – hope it’s not after the bunny:

Update October 9, 2008:
Things are getting funnier, and the bunny’s getting bunnier: it’s gained some more weight, 2500 vertices with 5k triangles currently, and still keeps on rolling – this time with only the shading layer, but it does process through all the 2.5k vertices and normals and update the shading each frame :
stanford bunny 5000v



  1. wow!

  2. “hope it’s not after the bunny”, LOL thx for sharing ;D

  3. This is great! Keep it up! 🙂

  4. Hi,
    Sweet demos! The rabbit plays really smooth on my MBP. Is this a custom engine and/or something you’ll release?


    PS: Make sure you have FP10 RC installed or you’ll only see this:

  5. Thanks everyone for your comments !

    Jensa: these demos are more like separate studies on the possibilities of FP10, some ideas that keep popping to my mind. Although I love playing with 3D maths, [at least currently] I don’t think I would write a whole 3D-engine …

    The reason for Bunny appearing totally flat in Jensa’s pic was the Matrix3D bug, scaling by 0.05, in the earlier releases of the player …

  6. Nice demos, thank u for the ideas, it will be helpful in my studies.

  7. Oi. Insane!

  8. Maybe a stupid question:
    How can I run this code?
    When I paste it in Adobe Flex Builder, it doesn’t work…

  9. Ajanz:
    try with this – opens in Flex Builder as an archive : file/import/flex project…

    … or is it just this code or any with FP10-content ? in case you need to check the settings:

  10. Thanks so much for your work – I was able to create a super primitive with a little recoding.

    Blog Post

    After creating a million custom primitives in Papervision3D, I have always wanted to create just one that did it all using parametric equations. But many of the algorithms used to generate the basic primitives in Papervision3D (Away3D is a little better) are so complicated that its hard to bring them altogether under one roof.

    It’s something you need to do from the start. And with many thanks to Petri Leskinen (and a little recoding on my part) we can now do that as shown in the demo above.

  11. thank you great article.
    However i have a question about the bunny 😛
    How did you import it ? did you type the vertex one by one ?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: