sentoplene - intertwining details

For my little Papervision3D-rotating-portfolio-item-cube (that’s a mouth full, for such a simple thingie) I thought of a little enhancement that, at the same time, would give me a little more insight in a Papervision subject: Some lighting.

For my first experiment I used the phongshader, cause for some reason found on the internet, I thought this was the best quality shader around. You can see it a bit like this, but all shaders have their own specific use.

Ok so, the PhongShader has 3 main parameters (maybe in a follow up I will discuss some more little details about the shaders): The Light, the lightcolor and the ambientcolor.

Experiment 1
For example 1 I used an out-of-the-box light, and white as lightcolor, and for the ambientcolor I used black:
phongshader example 1
Looks pretty cool almost straigt out of the box. But although I really love vignettes, in a page already with a vignette and my content being this dark, I thought it wasn’t really doing it’s work here, so I wanted to alter the lighting.

First el-simplo adjustment (some call it el-lazy). So I changed the ambient-light to a lighter shade of gray:
phongshader example 2
Although the vignette of the lighting is working really nice for my content looking straight to the camera, I really miss the dark shadows that need to be there when I rotate the cube.

So… as an amateuristic-amateur-strobist-hobby-photographer my first thought was: I need to make my light-source bigger. Tried it, but with absolutely no effect. Then I thought: Maybe when I place my light further away from my subject, the light-bulbs would be more parallel blablabla… tried it, didn’t do the trick. Basically, there’s no way to alter the light-source yet.

Experiment 2
So then I said to myself… Maybe another shader would be more to my liking.
For this example I’m gonna discuss 4 shaders: FlatShader, CellShader, GouraudShader and the Phongshader. On this site the 4 shaders are explained nicely.

In my planned version 2 of the papervision shaders, I also will take a closer look at the EnvMapShader and the BumpMapShader. But for now to only discuss these 4 ’simple’ techniques, and because my 1-dimensional-rotating cube only has 4 visible sides, I made a visual example of the 4 shaders:

(drag to rotate the cube)

So the CellShader is indeed the cartoon shader. Not usable for my use, but I can see tons of cool uses for this one.
The GouraudShader looks pretty cool, a bit too dark for my liking still, but nice gradients and nice dark shadows when rotating. The shadows are a bit strange though. If you rotate really slow, look at the specular highlight and the shadows. The highlight, and the shadow pattern are following a diagonal line. Must be because of the splitting of the rectangle into triangles. In this example it looks weird enough for me so it’s not usable.
The FlatShader looks really good. Simple, clean, bright and with the dark shadows when rotating. No disturbing vignette, but also thus without specular highlight. Ok, fair enough. You win some, you lose some with Flash
And last but not least the PhongShader again for comparison. Try to rotate this side really slowly as well, and see that the same diagonal line is seen here in the highlight and shadows as with the GouraudShader.

I tried to solve this by increasing the amount of segments on the cube, but this gave unexpected behavior; almost a bevel like effect:

Thought it might had something to do with the precise materials, so turned precise of, but the same results. It’s a bit too late now to dive into this. Maybe for an update, or a second version. If someone can explain this, please comment!

For my portfolio version 0.2 I will go for the FlatShader. Nice, subtle, lighting detail that adds to the design and doesn’t distract from the content.

Please comment, if you think I’m incorrect, or you can add some info that is missing. I would love to hear your feedback on this subject!

Tags: cellshader, flatshader, gauraudshader, papervision3d, phongshader, shader

This entry was posted on Monday, June 29th, 2009 at 00:52 and is filed under flash, papervision3d. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.