Morten Nielsen

I was wondering whether it is supported to "squeeze/distort" objects into various affine and skeewed forms

Basically what I wan't to do is squeeze an image (or any other object for that matter) into the following shape:

___________
/ \
/ \
/ \
/ \
/ \

I would also need a variant the would require adding some skewing like this:

___________
/ |
/ |
/ |
/ |
/ |

or

______________
/ /
/ /
/ /
/ /
/ /

...or anywhere in between these.

(and no, I'm not talking about clipping :-)

Any ideas on how to accomplish this are very welcomed!



Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

Bryant Likes

Here is an example that shows how to do the bottom squeeze, but I couldn't figure out the top one.

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>

<Rectangle Canvas.Top="50" Canvas.Left="50" Width="100" Height="100" Stroke="Black" />

<Rectangle Canvas.Top="50" Canvas.Left="200" Width="100" Height="100" Stroke="Black">
<Rectangle.RenderTransform>
<SkewTransform CenterX="25" CenterY="25" AngleX="-30" AngleY="0" />
</Rectangle.RenderTransform>
</Rectangle>

</Canvas>





Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

Morten Nielsen

Thank you very much. It at least gave me an idea on what to look for in the docs.

I can see from the docs, that they apparently only use the standard affine matrix transformation, which doesn't support this kind of transform (only skew, rotation, scale and translate).

It would be really awesome if it did though... it would enable us to "fake" 3D by putting objects into a perspecive distortion. Basically what I need is a scale in one direction based on the position of the ortogonal direction.

ex.

Y(x) = scale * x + a;
which is very equivalent to
Width_at_percentage_of_height = scale * percentage_of_height + offset

Of course this could be applied on to various axes.





Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

nooneimportant

As far as I know wpfe only supports affine transformations. Form your three examples only the last can be achived with 2x2+2 matrix.



Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

Morten Nielsen

Thanks, this was also my conclusion above.

Too late for feature requests

As mentioned, this will give people an obvious way of "faking" 3D views, which could give some really awesome WPF/E apps.





Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

nooneimportant

I think the above limitation is inherited from GDI+. GDI+ also doesn't support non affine transformations. I belive the main issue is the difficulty of applying non affine transformations to the bezier splines. GDI + answer to this problem is Wrap (http://msdn2.microsoft.com/en-us/library/ms535571.aspx). From the short descrtiption provided by msdn it appears that Wrap first tesselates path into series of line segments and than performs transform on it.

In short: I wouldn't hold my breath for support of non affine transforms in WPF/e.





Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

Bryant Likes

Based on this example you can simulate a 3D view in WPF/E. The example basically clips the area you want to display into two triangles so that you get a simulated 3D view. Here is a very basic sample that I created in order to understand the concept:

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>

<Rectangle Width="200" Height="150" Canvas.Top="50" Canvas.Left="50" Fill="Red">
<Rectangle.Clip>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure IsClosed="true" StartPoint="33,0">
<PathFigure.Segments>
<PolyLineSegment Points="0,100 100,0" />
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Rectangle.Clip>
</Rectangle>
<Rectangle Width="200" Height="150" Canvas.Top="50" Canvas.Left="50" Fill="Red">
<Rectangle.Clip>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure IsClosed="true" StartPoint="133,100">
<PathFigure.Segments>
<PolyLineSegment Points="0,100 100,0" />
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Rectangle.Clip>
</Rectangle>

</Canvas>

So this does simulate your squeezing effect, but in a much less obvious way. Visit the forum post I linked to above for a description on how you accomlish this.





Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

Morten Nielsen

Thanks for the update. I did see post earlier today, and it's is pretty damn cool.

I do see some artifacts along the center of each "square" (notice how the image is moving around), but is definitely a step closer.





Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

Bryant Likes

Yes I see those as well. I think that issue is the frustum clipping issue that he mentioned. I had no idea what this was but this seems like a good read on the subject: http://www.flipcode.com/articles/article_frustumculling.shtml

From the article "Im always amazed by the fact that most neophyte 3D engine programmers still do not realize the simple principal and benefits of frustum culling."

:)





Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

Morten Nielsen

Nope that is something different (frustum clipping is removing objects from rendering when they are out of the visible view).

I think this artifact is due to the fact that his approach is not entirely correct, because we lack the kind of distortion I was describing. Yeah... splitting it in two triangular-delimited affine projections do come close (and very ingenius I might add), but it's still not the correct way to create a perspective distortion.

Another problem is the lines you are seeing around the triangles. I've seen this in similar apps, where a grid of images are aligned to each other (a bit like the maps on local.live.com). When you animate the parent of the tiles (i.e pan them around using a translate animation), you see faint gray lines between the tiles, although the images should fit together perfectly and are shown without any scale. As soon as the pan stops, the lines are gone. This might be a rounding issue with WPF/E (this is similar to the well-known problem in the 3D world when vertices in objects are not welded together).





Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

smargroth

It's me, the maker of that 3D demo. :)

1. Frustum clipping is cutting the triangles to the area, which is visible. Because of 3D transformation, some vertices after transformation can be in the front of the camera, and some behind. This can lead to some strange artifacts. For example: there is some "wall" and camera is rotating to the right. The left edge of the wall is first to dissapear from the screen. Then, while still displaying the right edge, and when the left edge vertices came behind the camera, the left edge suddenly come to the right side of the screen. This strange artefacts are removed by frustum clipping.

2. Strange lines around and between the triangles are not my fault. The reason is that WPF/E plugin is antialiasing all the edges. If there are two shapes, which have some edge in common, and even if they share the same screen coordinates, there will be a visible line between. It would be nice if WPF/E will support a way to specify which edges should be antialiased and which not.
Now, the only solution is to "push" all transformed vertices about 1 pixel away from the triangle center, so the line would disappear. But, if triangles are transparent, this line will sometimes become more solid, because of two overlapping transparent areas.

3. Strange perspective behaviour (you said distortion) is consequence of non-projective rendering. As WPF/E supports only normal linear images, perspective-correct rendering is of course not possible. For example, if we have some texture with uniform grid, and when such a texture is viewed from an angle (e.g 45 degrees), the "squares" are smaller if they are far and larger when they are near. When rendering the image, some bilinear formula like (a * x + b) / (c * x + d) is used to propagate the texture coordinates.
But with WPF/E, this is not possible. WPF/E's images have linear propagation.
The only solution past this problem is triangular tesselation, so that one triangle is split into many smaller triangles. Of course this would slow down the transformation and rendering process. If instead of the box in my demo I would use a sphere, it would be far more correctly rendered, as spheres consist of many small triangles.




Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

smargroth

I have improved the 3D demo. As I proposed in the previous post, I pushed the screen coordinates out from the triangle, so the lines are almost always removed. I have also divided the front and the back side of the box each into 4 triangles. Now, the non-perspective rendering is not so annoying.

You must manualy reload the page or even clear the cache, as sometimes browsers are not aware of content changes...




Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

Morten Nielsen

Hi Smargroth

You continue to amaze!

Anyway, I guess from what you are saying, my original request in this thread is very much still wanted feature: Perspective Distortion (in my field we call it distortion, but I guess that's because we usually don't like it).





Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

smargroth

Thank you! :)
I have about 15 year of experiences in 3D programming (half of my life).

There are two things: perspective "distortion" of the outer shape of an object, and perspective rendering of the content (image, area, fill, etc.)

Unfortunately, perspective "distortion" of object's shape can only be approximated by dividing an object into smaller triangular portions and using transform and clip on each. This makes things very complicated and not very realistic, but as I'm aware, this is the only solution.

Perspective rendering of Image, TextBlock and non-gradient filled shapes will probably never be supported, as it requires hardware acceleration, which is not cross-platform compatible. Software emulation can be slow with antialiasing, but is possible. With current version of WPF/E, such objects are always rendered linearly, which makes strange visual artefacts in 3D.

If you only need polygonal objects, with non-gradient filling, their vertices can be specified directly, without Transform and Clip. The coordinates are computed by transformation algorithm in attached code (JS, C#).

As transformation and clipping can be done on Canvas, even complex compositions can be transformed, but there should be as many copies of the compositions as there are subdivided triangles. This could make a headache to the creator :)




Re: Silverlight (formerly WPF/E) Designer Issues Squeezing objects

Morten Nielsen

Actually the perspective distortion isn't that different from the affine transformation that is already supported. It's just an extra parameter in the equation (not everything needs to be done using 3D algorithms :-)