wpf - WPF3D中的三角形渐变

Question

我正在尝试将渐变纹理应用于WPF 3D中的三角形网格。我希望生成的三角形看起来像每个角都在“发射”其各自的颜色，例如经典的OpenGL示例:

Desired result http://shoefitr.com/images/desiredGradientTriangle.jpg

这是我所能获得的最接近的结果:

Closest so far http://shoefitr.com/images/gradientTriangle2.png

这是我正在尝试的刷子:

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

这是纹理的应用:

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种颜色，并在ac点添加第4个Position / TextureCoordinate以完成“环绕”(因此，蓝色代表绿色，绿色代表红色，红色代表蓝色)，但是没有工作。使用LinearGradientBrush甚至可能吗？

Answer 1

OpenGL示例基于两个维度的线性插值，因此您无法使用LinearGradientBrush做到这一点。取而代之的是，您可以使用RadialGradientBrush将其模拟3个三角形。

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

或者，您可以创建用于颜色插值的自定义像素着色器。