C#/WPF image transformation over a trapezoid

Question

I have an image which I want to scale/stretch it over a trapezoid in WPF. Is there an easy way of doing it? I want to achieve 3D effect / perspective / bending. Basically taking a 2D image and bending it in 3D space.

This is what I want to accomplish:

original:          new:

 *  *               *  *

 *  *             *      *

Another note, I need this to happen very fast. I tried using this code, and the performance is unusable: http://www.vcskicks.com/image-distortion.php

Any help would be greatly appreciated. Thanks a lot in advance!

Answer 1

I think the easiest way to do this fast is using the WPF 3D. Just set-up a viewport with perspective projection and put a quad with the content being transformed there, GPU will do the rest.

WPF has a very nice MatrixTransform class which offers GPU-accelerated transformations of pretty much anything (and its derivatives which simplify application of for example rotation transformation). Sadly, the trapezoid transformation is not possible to do with simple matrix transform, these are mathematically limited to scaling, shearing and rotations (and their combinations).

EDIT: You can also see some examples here, 3D is really trivial in WPF.

EDIT 2:

here is code which displays a common button displayed in perspective view. Don't try to interact with it, google "WPF Interactive3D" if you want that.

If you want only image to be displayed in the 3D view, you don't have to use the VisualBrush.

Also, the coordinates will have to be fixed if you really want the mapped content to fit with the edges of the viewport, you will likely have to do a lot of experimenting or some math to calculate the coordinates. lease post the result if you get something nice (after you cleanup the code, I just edited an example I found somewhere).

And you now officially owe me your soul :D

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <Viewport3D>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <GeometryModel3D>
                        <GeometryModel3D.Geometry>
                            <MeshGeometry3D
                                Positions="-0.5  0.5  -0.5,  0.5  0.5  -0.5,
                                           -0.5  0  0.5,  0.5  0  0.5"
                                TriangleIndices=" 0  2  1,  1  2  3"
                                TextureCoordinates="0 0, 1 0, 0 1, 1 1" />
                        </GeometryModel3D.Geometry>

                        <GeometryModel3D.Material>
                            <DiffuseMaterial>
                                <DiffuseMaterial.Brush>
                                    <VisualBrush>
                                        <VisualBrush.Visual>
                                            <Button>Hi</Button>
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </DiffuseMaterial.Brush>
                            </DiffuseMaterial>                              
                        </GeometryModel3D.Material>

                        <!-- Non-Affine Matrix Transform. -->
                        <GeometryModel3D.Transform>
                            <MatrixTransform3D>
                            </MatrixTransform3D>
                        </GeometryModel3D.Transform>

                    </GeometryModel3D>
                </ModelVisual3D.Content>
            </ModelVisual3D>

            <!-- Light sources. -->
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <Model3DGroup>
                        <AmbientLight Color="#404040" />
                        <DirectionalLight Color="#C0C0C0" Direction="0 -2 -1" />
                    </Model3DGroup>
                </ModelVisual3D.Content>
            </ModelVisual3D>

            <!-- Camera. -->
            <Viewport3D.Camera>
                <PerspectiveCamera Position="0 0.2 1"
                                   LookDirection="0 0 -1.5"
                                   UpDirection="0 1 0"
                                   FieldOfView="100">
                </PerspectiveCamera>
            </Viewport3D.Camera>
        </Viewport3D>
    </DockPanel>
</Window>