WPF3D中的三角形渐变 [英] Triangular Gradient in WPF3D

问题描述

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

想要的结果 http://shoefitr.com/images/desiredGradientTriangle.jpg>

这是我能得到的最接近的:

目前最接近 http://shoefitr.com/images/gradientTriangle2.png

这是我正在尝试的画笔:

var Brush = new LinearGradientBrush {起点 = 新点(0, 0),终点 = 新点(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);//使三角形从两侧可见mesh.TriangleIndices.Add(0);网格.TriangleIndices.Add(1);mesh.TriangleIndices.Add(2);mesh.TriangleIndices.Add(2);网格.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 实现吗?

解决方案

OpenGL 示例是基于二维的线性插值，所以你不能用 LinearGradientBrush 来做.您可以使用 RadialGradientBrush 通过 3 个三角形来模拟这个.

 <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><MeshGeometry3DTriangleIndices="0,1,2 2,1,0 "法线=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><材料组><DiffuseMaterial Brush="黑色"/></材料组></GeometryModel3D.Material></GeometryModel3D></ModelVisual3D.Content></ModelVisual3D><ModelVisual3D><ModelVisual3D.Content><GeometryModel3D><GeometryModel3D.Geometry><MeshGeometry3DTriangleIndices="0,1,2 2,1,0 "法线=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><材料组><漫反射材料><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></材料组></GeometryModel3D.Material></GeometryModel3D></ModelVisual3D.Content></ModelVisual3D><ModelVisual3D><ModelVisual3D.Content><GeometryModel3D><GeometryModel3D.Geometry><MeshGeometry3DTriangleIndices="0,1,2 2,1,0 "法线=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><材料组><漫反射材料><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></材料组></GeometryModel3D.Material></GeometryModel3D></ModelVisual3D.Content></ModelVisual3D><ModelVisual3D><ModelVisual3D.Content><GeometryModel3D><GeometryModel3D.Geometry><MeshGeometry3DTriangleIndices="0,1,2 2,1,0 "法线=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><材料组><漫反射材料><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></材料组></GeometryModel3D.Material></GeometryModel3D></ModelVisual3D.Content></ModelVisual3D></Viewport3D.Children></Viewport3D>

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

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:

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

This is the closest I've been able to get:

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

Here's the brush I'm trying:

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

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