Going Grey in Three.js Space Simulations (sigh)

‹prev | My Chain | next›

I was bummed when my editor reminded me that 3D Gaming JavaScript for Kids will need to support greyscale devices. Well, devices and print, but who buys print anymore? Well some people do apparently. Anyhow...

My pretty space simulations:

End up looking like this in greyscale:

Dang it. The Sun and the Moon look OK, but Earth is barely visible. Looks like I need to make a complete greyscale version of each game. Fuuuuuuu....

Well, hopefully I won't have to do each game, but I definitely need to do the space-based games. And I suppose that I do not need it completely grey—just the Earth. But I do need a way to toggle the color back and forth so that I can have exact duplicates for each picture that I take.

So I add yet another key handler:

 document.addEventListener("keydown", function(event) {
    var code = event.which || event.keyCode;

    if (code == 67) changeCamera(); // C
    if (code == 32) changeCamera(); // Space
    if (code == 71) colorToggle(); // G
    if (code == 80) pause = !pause; // P
    if (code == 49) speed = 1; // 1
    if (code == 50) speed = 2; // 2
    if (code == 51) speed = 10; // 3
    event.preventDefault();
  });

For the actual toggle, I check for all white in the Three.js Mesh:

  function colorToggle() {
    var c = earth.material.color.clone();
    if (c.r == 1 && c.g == 1 && c.b ==1) earth.material.color.setRGB(0,0,0.8);
    else earth.material.color.setRGB(1,1,1);
  }

That seems to do the trick. Now I can take a picture of a Third Quarter Moon from the Earth:

Then take a color snapshot from above:

And quickly toggle to greyscale:

I think that'll have to be the solution that I use for this and just about any image that does not look right in color. But mostly I am going to work to keep games that look OK in greyscale.


Day #634