在WPF3D三角渐变 [英] Triangular Gradient in WPF3D
问题描述
我想要一个渐变的纹理应用到WPF 3D三角形网格。我想得出的三角形看上去仿佛每一个角落，发光，其各自的颜色，像经典的OpenGL例如：
I'm trying to apply a gradient texture to a triangle mesh in WPF 3D. I would like the resulting triangle to look as though each corner is "emitting" its respective color, like the classic OpenGL example:
这是最接近我已经能够获得：
This is the closest I've been able to get:
下面是刷我想：
var brush = new LinearGradientBrush {
StartPoint = new Point(0, 0),
EndPoint = new Point(1, 0)
};
brush.GradientStops.Add(new GradientStop(Colors.Blue, 0.0));
brush.GradientStops.Add(new GradientStop(Colors.Green, 0.5));
brush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));
这是纹理的应用：
And this is the application of the texture:
var mesh = new MeshGeometry3D();
Point3D p1 = new Point3D(0, 0, 0);
Point3D p2 = new Point3D(0, 5, 0);
Point3D p3 = new Point3D(10, 0, 0);
mesh.Positions.Add(a);
mesh.Positions.Add(b);
mesh.Positions.Add(c);
// Make triangle visible from both sides
mesh.TriangleIndices.Add(0);
mesh.TriangleIndices.Add(1);
mesh.TriangleIndices.Add(2);
mesh.TriangleIndices.Add(2);
mesh.TriangleIndices.Add(1);
mesh.TriangleIndices.Add(0);
mesh.TextureCoordinates.Add(new Point(0.0, 0.0));
mesh.TextureCoordinates.Add(new Point(0.5, 0.0));
mesh.TextureCoordinates.Add(new Point(1.0, 0.0));
我也试着添加第四颜色的画笔和第4位/的TextureCoordinate在点交流完成环绕式（那么蓝触摸绿色，绿色触摸红色，红色触摸蓝色），但没有工作。这甚至可能有一个LinearGradientBrush？
I've also tried adding a 4th color to the brush and a 4th Position/TextureCoordinate at point ac to finish the "wrap-around" (so blue touches green, green touches red, and red touches blue), but that didn't work. Is this even possible with LinearGradientBrush?
推荐答案
OpenGL的例子是基于两个dimesionals线性插值，所以你不能老是用一个LinearGradientBrush做到这一点。取而代之的是，你可以通过3 trianlges用画笔效仿这一点。
OpenGL example is based on linear interpolation in two dimesionals, so you can`t do it with LinearGradientBrush. Instead of this you can emulate this by 3 trianlges with RadialGradientBrush.
<Viewport3D x:Name="viewport">
<Viewport3D.Camera>
<PerspectiveCamera Position="0,0,2" LookDirection="0,0,-1" FieldOfView="60" />
</Viewport3D.Camera>
<Viewport3D.Children>
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFF" Direction="0,0,-0.612372" />
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D
TriangleIndices="0,1,2 2,1,0 "
Normals="0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 "
TextureCoordinates="0,0 1,0 0,1"
Positions="-0.5,-0.5,0.5 0.5,-0.5,0.5 0,0.5,0.5 " />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<MaterialGroup>
<DiffuseMaterial Brush="Black"/>
</MaterialGroup>
</GeometryModel3D.Material>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D
TriangleIndices="0,1,2 2,1,0 "
Normals="0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 "
TextureCoordinates="0,0 1,0 0,1"
Positions="-0.5,-0.5,0.5 0.5,-0.5,0.5 0,0.5,0.5 " />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<MaterialGroup>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<RadialGradientBrush Center="0,0" GradientOrigin="0,0" RadiusX="1" RadiusY="1">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#FFFF0000" Offset="0" />
<GradientStop Color="#00FF0000" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</MaterialGroup>
</GeometryModel3D.Material>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D
TriangleIndices="0,1,2 2,1,0 "
Normals="0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 "
TextureCoordinates="0,0 1,0 0,1"
Positions="-0.5,-0.5,0.5 0.5,-0.5,0.5 0,0.5,0.5 " />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<MaterialGroup>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<RadialGradientBrush Center="0.5,1" GradientOrigin="0.5,1" RadiusX="1" RadiusY="1">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#FF00FF00" Offset="0" />
<GradientStop Color="#0000FF00" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</MaterialGroup>
</GeometryModel3D.Material>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D
TriangleIndices="0,1,2 2,1,0 "
Normals="0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 "
TextureCoordinates="0,0 1,0 0,1"
Positions="-0.5,-0.5,0.5 0.5,-0.5,0.5 0,0.5,0.5 " />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<MaterialGroup>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<RadialGradientBrush Center="1,0" GradientOrigin="1,0" RadiusX="1" RadiusY="1">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#FF0000FF" Offset="0" />
<GradientStop Color="#000000FF" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</MaterialGroup>
</GeometryModel3D.Material>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D.Children>
</Viewport3D>
或者，您可以创建自定义像素着色器的色彩插值。
Or you can to create custom pixel shader for color interpolation.
这篇关于在WPF3D三角渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
