Frank Hileman's WebLog

Vector Graphics with VG.net and Visual Studio Integration

Success! Fast PathGradientFills!

Path gradient fills created with VG.net vector graphics version 2.2

We have succeeded in optimizing path gradient fills. Now we have only a few more tweaks and the VG.net vector graphics system version 2.2 will be released.

PathGradientFill now has a Quality property you can use to determine the best trade-off between memory usage and drawing speed. Before we did the optimization, path gradient fills were essentially useless when you zoomed in a great deal. The screen became so slow you could not easily perform precise point editing. Now the fills are speedy! Look at the image above. All those fills are drawn using the lowest Quality setting -- it is difficult to see any difference for smaller objects. VG.net is the first and only GDI+ based vector graphics system with optimized gradients.

The PathGradientFill makes it possible to add drop-shadows to shapes. It may be a nice enhancement to just say ShadowVisible = true, and a shadow is drawn, instead of forcing people to create them explicitly. What do you think? Something for version 2.3?

Published Tuesday, October 05, 2004 4:27 PM by Frank Hileman

Comments

# re: Success! Fast PathGradientFills!@ Tuesday, October 05, 2004 8:47 PM

I think that it could be a problem, since there are lots of types of shadows, each with its own set of properties.
For instance, shadow dropped from an ambient light source isn't the same as shadow from a direct light source. The latter also has properties like where the light is located, how intense it is, etc.
It's just a matter of how much you want to get into this sort of thing.

All in all, it seems like you did an excellent job with these gradients. Can't wait till v2.2 is out. :)

by Omer van Kloeten

# re: Success! Fast PathGradientFills!@ Wednesday, October 06, 2004 1:22 AM

Hello Omer,

The type of shadow were thinking of is either a gaussian blur of a monochrome bitmap, or the type produced by a path gradient on a shape, similar, but a "fake". Also we could allow the shadow to be used as a "glow".

So I think we have a good handle on the blur and gradient types. We would have a Shadow property, like Stroke, Fill, where you could adjust parameters.

The question I have for you: where can we get more info on simulating the different types of shadows, aside from the two I mentioned. Keep in mind we do not want a full 3D engine here (too slow), just a fast simulation.

Thanks.

by Frank Hileman

# re: Success! Fast PathGradientFills!@ Wednesday, October 06, 2004 2:07 PM

I googled a bit, but I can't find anything in particular to match the whole methodology.
However, I did find one site [1] which gives a really nice introduction to shadows.
I'm sure that there's something about it somewhere, but I just can't seem to find it. Sorry :(

[1] http://www.cgl.uwaterloo.ca/Projects/rendering/shadow.html

by Omer van Kloeten

# re: Success! Fast PathGradientFills!@ Wednesday, October 06, 2004 2:48 PM

Thanks Omer. It is interesting. I believe the gaussian blur is a simulation of ambient shadows, whereas a transparent black bitmap of the same shape is equivalent to a direct light shadow (hard-edged). It seems people prefer ambient. We will provide a penumbra parameter so people can make it more or less "blurred".

In release 2.2 you will control that with the FocusScaling property of a PathGradientFill. This adjusts the scaling of the focus shape, which is a scaled version of the original shape. By adjusting that and the opacity of the black shadow you can get something pretty close, but not perfect for concave shapes, because the inner shape is only scaled, instead of being an edge offset from the original shape. A true gaussian blur will not have that type of artifact.

by Frank Hileman

# re: Success! Fast PathGradientFills!@ Wednesday, October 06, 2004 3:36 PM

How about creating a base Shadow object that will have the ability to define the distance of the 2d background from the 2d element displayed (size of shadow), how much the light source is pointellar (focus of shadow), direction of light (location of shadow), etc.

It could prove effective as you could create other types of shadows and just use them as plugins for your drawn objects.

Also, you could create a LightSource object that would be used for your entire image, affecting all shapes in the same manner. It could save up quite a lot of work defining each shape's shadow.
Also, you could define the light's color, affecting the shapes' color, the background color (maybe) and even the shadow, when the shape is drawn with alpha-enabled colors.

Again, this is just a brain dump. I'd love to see these things.
I've had quite a lot of experience with creating graphics using GDI+ in the past and this is one of the things I worked on with one of my projects.

Drop me a line thru my blog's contact page if you wanna discuss this further. :)

by Omer van Kloeten

# re: Success! Fast PathGradientFills!@ Wednesday, October 06, 2004 8:07 PM

Yes Omer, that is basically the right idea. Except here is what were were thinking of:

Right now we are drawing up to 3 things per shape: a fill, a stroke, and text. Those are controlled by the Fill property, the Stroke property, and the TextAppearance property. Since VG.net supports appearance inheritance (something missing from Avalon), the Fill etc. can be set on any parent, or on a Style, and whatever portions are not overridden by the child take effect. That is, you might define the width on the parent and the color on the child for the Stroke, and they are combined at render time.

So here is the idea. Instead of a DrawingAction property, we would have 4 bool properties: FillVisible, StrokeVisible, TextVisible, and ShadowVisible. Set any one to true and the corresponding part of the Shape is visible.

To control the Shadow we would have a ShadowAppearance. This would be like all other Appearance properties; you can set some or all of the ShadowAppearance properties on a parent, such as a Picture or Group, or on a Style, and it will affect all children. Then you can also set some ShadowAppearance properties on children and override what is on the parent. So we could add all the type of control you are speaking of with LightSource.

Now a second idea is Effects. That is basically a plugin extensibility for people to do custom pixel-twiddling per element, with the results cached for speed. You would not need that for shadows. The whole idea of VG.net is to expose as much of the power of GDI+ to people, in an easy to use way, and still be completely dynamic and animated.

Thanks for all the ideas; I will pop you a line!

by Frank Hileman

# re: Success! Fast PathGradientFills!@ Wednesday, October 06, 2004 8:15 PM

Actually it would just be called Shadow, not ShadowAppearance.

by Frank Hileman

# re: Success! Fast PathGradientFills!@ Tuesday, October 26, 2004 11:50 AM

1. Shadows would be useful.

2. However, I have another point, perhaps this was covered by Omer's reply, but in case not...

I'd like to see the 3D fills on rotated shapes using a constant light source point so that the "bright" part of the shape is, for instance, always at the top left (if you chose the light source to be at the top left of screen).

by Hugh Robinson

# re: Success! Fast PathGradientFills!@ Tuesday, October 26, 2004 1:11 PM

To interpret a 2D object as 3D for shine, you need some idea of the z-dimension (depth). It is posible to do this with a digital filter, such as a bump map, and rotations can be ignored, but the results may not always be as you please. We hope to add filters, a bump mapping one and the option for custom ones, at some point. If it does not produce the correct result, though, you have have to do the "shine" yourself. In these images the shine is very strong, like phong shading. It is not so easy to produce that with a basic bump map filter. We could add a true 3D phong shader as a filter but again the depth may not look right always.

by Frank Hileman