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 种位置/纹理坐标以完成“环绕”（因此蓝色与绿色接触，绿色与红色接触，红色与蓝色接触），但是没用。 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>

或者您可以为颜色插值创建自定义像素着色器。