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

Question

我想做的很简单描述：

我想在立方体上映射一个像这个问题一样的 UV 贴图： WPF Texture mapping of a cube.

但是具有更高级别的完整性：我想动态生成 2d 渐变（从以 N 种不同方式着色的 N 个点）。

我在某处读到 wpf 无法创建 2d 渐变：它仍然是真的吗？有什么办法可以创建这个梯度，避免混合N个线性梯度等复杂的解决方案？

也许使用 2d 网格或一些外部库之类的东西？

谢谢。

Answer 1

不支持 2D 渐变，但如果您可以将其解构为两个 1d 渐变的一些 alpha 混合或相加组合，那么它仍然可以完成。以my answer to this question 为例。

任何更复杂的东西，您都必须自己生成阴影。最简单的方法是手动创建 2D 纹理并将其应用于几何体。网上有很多例子说明了如何做到这一点。

如果您不想生成纹理，那么您唯一剩下的选择就是使用自定义着色器。这不是一个微不足道的话题，但我会给你一个大致的想法。您从着色器 fx 代码开始，然后将其编译为 ps 文件：

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

显然，这只是一个非常简单的着色器，沿 x 轴设置红色，沿 y 轴设置绿色，在您的示例中，您可能希望将两个轴作为包含渐变色标的 1D 纹理传入。无论哪种方式，您都可以将其编译下来，将其添加为资源并使用基于 ShaderEffect 的类加载它：

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

除此之外，您现在需要将其应用于几何体。 WPF 不直接支持 3d 纹理着色器，但由于您已将着色器作为效果加载，您可以创建 2d VisualBrush 并像这样应用它：

<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>

结果是使用您的自定义着色器输出映射的 3D 几何体：