Drawing Spheres with RadialGradientBrush

Question

I'm trying to draw spherical pieces for a game, in WPF. Pieces are drawns as Elipses with RadialGradientBrushs. As you can see below, my black pieces look fantastic, but it is hard to get the white ones having any depth without making them look grey.

I'm currently using:

private readonly Brush _whitePieceBrush = new RadialGradientBrush(Colors.Snow, Colors.Ivory);
private readonly Brush _blackPieceBrush = new RadialGradientBrush(Colors.DarkGray, Colors.Black);

...

using (DrawingContext dc = _piecesVisual.RenderOpen())
{
    ....
    Brush brush = piece.Value.IsBlack ? _blackPieceBrush : _whitePieceBrush;
    var pen = new Pen(new SolidColorBrush(Colors.Black), 0.5); 
    dc.DrawEllipse(brush, pen, new Point(posX, posY), 15, 15);
    ...

}

The black circles around the white pieces don't help, but with out them, it looks even worse. (If I can find a good way to draw them that looks better, I'll be removing it)

Follow

screw that it looks fun i wanna play it :D – Lanam

when it is done and submitted (it is for a uni project), i'll probably put up a link to the source and the installer (will link into the main post) – Follow

paraphrasing Field of Dreams here but "Compile it, and they shall come" – Lanam

Looking around my office, I note that most white things that have depth (i.e. all real things) look gray as part of their depth. The parts that stay consistently white don't really appear to have depth (from the color - obviously I can discern it from perspective and whatnot). – Gamo

yes, definately some grey is needed, but so far my expeiments with Colors.Silver, made it too grey. I think it is all about how you define the colour points – Follow

this is probably why people sometimes revert to using blue and red as piece colours to avoid the greyscale on white objects – Lanam

Basically, you need some gray. Experiment until you find something that looks good. – Vivisection

Answer 1

I tried:

    private readonly Brush _whitePieceBrush = new RadialGradientBrush()
    {
        GradientStops = new GradientStopCollection
        {

            new GradientStop(Colors.WhiteSmoke,0.3),
            new GradientStop(Colors.LightGray, 1.0),


        }
    };
    private readonly Brush _whitePieceBorder = new SolidColorBrush(Colors.Silver);

---

Taking Clemens' advice and having them off center: With them a bit off center: I think this helps the black more than the white, but still and improvement

    private static readonly Point _lightSource = new Point(0.3, 0.35);

    private readonly Brush _blackPieceBrush = new RadialGradientBrush(Colors.DarkGray, Colors.Black)
    {
        GradientOrigin = _lightSource
    };
    private readonly Brush _blackPieceBorder = new SolidColorBrush(Colors.Black);

    private readonly Brush _whitePieceBrush = new RadialGradientBrush()
    {
        GradientOrigin = _lightSource,
        GradientStops = new GradientStopCollection
        {

            new GradientStop(Colors.WhiteSmoke,0.3),
            new GradientStop(Colors.LightGray, 1.0),

        }
    };
    private readonly Brush _whitePieceBorder = new SolidColorBrush(Colors.Silver);

Follow

Looks perfect. Did you also try to make it a bit off-center? – Burthen

Yes i did (actually immediately after uploading the first image) – Follow

Answer 2

What about something like the following. The focal point is a bit off-center, which i find improves the spatial impression.

<Ellipse Width="60" Height="60">
    <Ellipse.Fill>
        <RadialGradientBrush GradientOrigin="0.3,0.3">
            <RadialGradientBrush.GradientStops>
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="White" Offset="0.3"/>
                <GradientStop Color="#FFF0F0F0" Offset="1"/>
            </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
    </Ellipse.Fill>
</Ellipse>

Burthen

Doesn't come out so great for me for some reason. Really obvious banding, on my computer – Follow