将自定义和复杂的 2d 渐变应用于 WPF 3d 对象

Question

What I would like to do is simple to describe:

I want to map an UV map like in this question on a cube: WPF Texture mapping of a cube .

But with an higher level of complety: I want to generate the 2d gradient on the fly (from N points coloured in N different ways).

I've read somewhere that wpf cannot create 2d gradient: is it still true? Is there any way to create this gradient, avoiding complex solution such as mixing N linear gradients?

Maybe using something like a 2d mesh or some external library?

Thank you.

Answer 1

2D gradients aren't supported, but if you can deconstruct it down to some alpha-blended or additive combination of two 1d gradients then it can still be done. Check out my answer to this question for an example.

Anything more complex and you'll have to generate the shading yourself. The easiest way to do this is to create a 2D texture manually and apply that to your geometry. Plenty of examples on the net showing how to do that.

If you don't want to generate a texture then your only remaining option is to use a custom shader. This is not a trivial topic, but I'll give you the general idea. You start with your shader fx code, which you then compile to a ps file:

float4 main(float2 uv : TEXCOORD) : COLOR
{
    return float4(uv.x, uv.y, 0, 1);
}

Obviously this is just a very simple shader that sets red along the x axis and green along y, in your example you'd probably want to pass both axis in as 1D textures containing your gradient stops. Either way, you compile it down, add it as a resource and load it with a class based on ShaderEffect:

public class MyShader : ShaderEffect
{
    public MyShader() => this.PixelShader = new PixelShader { UriSource = new Uri("/MyApp;component/MyShader.ps", UriKind.Relative) };
}

With that out of the way, you now need to apply it to geometry. WPF doesn't directly support 3d texture shaders, but since you've loaded your shader as an effect you can create a 2d VisualBrush and apply it like that instead:

<Viewport3D>
    <Viewport3D.Camera>
        <PerspectiveCamera Position="0 0 10" LookDirection="0 0 -1"/>
    </Viewport3D.Camera>
    <ModelVisual3D>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <AmbientLight Color="White" />
            </ModelVisual3D.Content>
        </ModelVisual3D>
    </ModelVisual3D>
    <ModelVisual3D>
        <ModelVisual3D.Content>
            <GeometryModel3D>
                <GeometryModel3D.Geometry>
                    <MeshGeometry3D 
                        Positions="-1 -1 0  1 -1 0  -1 1 0  1 1 0"
                        TextureCoordinates="0 1  1 1  0 0  1 0"
                        TriangleIndices="0 1 2  1 3 2" />
                </GeometryModel3D.Geometry>
                <GeometryModel3D.Material>
                    <DiffuseMaterial>
                        <DiffuseMaterial.Brush>
                            <VisualBrush>
                                <VisualBrush.Visual>
                                    <Image Source="texture.png"> <!-- placeholder texture -->
                                        <Image.Effect>
                                            <local:MyShader />
                                        </Image.Effect>
                                    </Image>
                                </VisualBrush.Visual>
                            </VisualBrush>
                        </DiffuseMaterial.Brush>
                    </DiffuseMaterial>
                </GeometryModel3D.Material>
            </GeometryModel3D>
        </ModelVisual3D.Content>
    </ModelVisual3D>
</Viewport3D>

The result is 3D geometry mapped with your custom shader output: