WPF: 2-D Graphics, 3-D Graphics

Color picker 3D

• Resizeable 3D color picker
  
• Technical requirements:
  • the most left panel
    • a 30px width of vertical linear gradient
    • a uniform gradient of the following colors: red, magenta, blue, cyan, green, yellow, red
    • gradient has a height of the whole window
    • left mouse button click in the panel changes color of the upper right corner of the rectangle in the adjacent panel
  • central panel
    • a Viewport3D control
    • flat rectangle drawn in 3D environment, mesh used in the exemplary program is shown below

      <MeshGeometry3D
          Positions="-1,1,0  1,1,0  -1,-1,0  1,-1,0" 
          TriangleIndices="2,1,0  2,3,1 "
          TextureCoordinates="0,0  1,0  0,1  1,1" />

    • two materials are used for the rectangle
      • horizontal gradient of the selected color (transparency decreasing horizontally)
      • vertical gradient of black color (transparency decreasing vertical)
    • rectangle is rotated around the axis Y, angle of the rotation is 10 degree
  • right panel
    • has exactly the same size as a central panel
    • its content is a mirrored view of the central panel
    • no Viewport3D control can be used (only one Viewport3D control can be used in solution)
    • content's transparency increasing horizontally (from left to right)
• Hints:
  • LinearGradientBrush, example of the code examining a color (at positon <x,y>) of the control named Palette (of size <width, height>)

    RenderTargetBitmap rtb = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Default);
    rtb.Render(Palette);
    int stride = width * ((rtb.Format.BitsPerPixel + 7) / 8);
    byte[] pixels = new byte[stride * height];
    BitmapFrame bf = BitmapFrame.Create(rtb);
    bf.CopyPixels(pixels, stride, 0);
    Color c = Color.FromRgb(pixels[y * stride + x * stride / width + 2], pixels[y * stride + x * stride / width + 1], pixels[y * stride + x * stride / width]);

  • Viewport3D
    • PerspectiveCamera (<PerspectiveCamera Position="0,0,3.2" LookDirection="0,0,-1" FieldOfView="45" />)
    • AmbientLight (<AmbientLight Color="White"></AmbientLight>)
    • MaterialGroup, DiffuseMaterial
      

      <GeometryModel3D.Material>
          <MaterialGroup>
              <DiffuseMaterial>
                  ...
              </DiffuseMaterial>
              <DiffuseMaterial>
                  ...
              </DiffuseMaterial>
          </MaterialGroup>
      </GeometryModel3D.Material>

    • RotateTransform3D, AxisAngleRotation3D (<AxisAngleRotation3D Axis="0,1,0" Angle="10" />)
  • VisualBrush, ScaleTransform (<ScaleTransform ScaleX="-1" CenterX="0.5"></ScaleTransform>), OpacityMask

• Approximate points:
  • left panel (appearance and behaviour without the click handling): 2.0
  • left panel click handling: 2.0
  • central panel: 3.5
  • right panel: 2.5

• Links for uploading:
  • Solutions
  • Corrections