Make earth look brighter?

Questions
1

I have my animated earth and moon working now. Thank you to all of you who answered my previous questions. Now on to aesthetics. My earth, as you can see in the screen is too dark and too blue. What can I do to make it look more like the picture of earth you can see in the lower right hand corner of the screenshot? Not the clouds, just the light blue and ambient light. What is an easy way to make my earth look brighter and a lighter blue?

Note, please do not discount obvious solutions. Chances are I did not think of them. I am an experienced programmer but a graphics weakling. The easier and faster a fix I can apply, the better.

Here is my code:

    // The group we use to contain the solar system.
    g_TheSolarSystem_group = new THREE.Group();

    // -------------------- BEGIN: BUILD THE EARTH AND MOON ------------

    const textureLoader = new THREE.TextureLoader();

    const earthGeometry = new THREE.SphereBufferGeometry( EARTH_RADIUS, useSegments, useSegments );
    const earthMaterial = new THREE.MeshPhongMaterial( {
        // specular: 0x333333,
        // shininess: 5,
        specular: 0x2222FF,
        shininess: 35,
        map: textureLoader.load( '/javascripts/threejs/examples/textures/planets/earth_atmos_2048.jpg' ),
        specularMap: textureLoader.load( '/javascripts/threejs/examples/textures/planets/earth_specular_2048.jpg' ),
        normalMap: textureLoader.load( '/javascripts/threejs/examples/textures/planets/earth_normal_2048.jpg' ),
        normalScale: new THREE.Vector2( useScale, useScale )
    } );

    g_TheEarth = new THREE.Mesh( earthGeometry, earthMaterial );

    // Set the earth position.
    g_TheEarth.position.set( EARTH_X_POS, EARTH_Y_POS, EARTH_Z_POS);

    // Add the Earth to the group.
    g_TheSolarSystem_group.add(g_TheEarth);

    const moonGeometry = new THREE.SphereBufferGeometry( MOON_RADIUS, useSegments, useSegments );
    const moonMaterial = new THREE.MeshPhongMaterial( {
        shininess: 5,
        map: textureLoader.load( '/javascripts/threejs/examples/textures/planets/moon_1024.jpg' )
    } );

    g_TheMoon = new THREE.Mesh( moonGeometry, moonMaterial );
    
    // Set the moon position.
    g_TheMoon.position.set( MOON_X_POS, MOON_Y_POS, MOON_Z_POS);

    // Add the Moon to the group.
    g_TheSolarSystem_group.add(g_TheMoon);

    // Enable all layers.
    g_TheEarth.layers.enableAll();
    g_TheMoon.layers.enableAll();


    // -------------------- END  : BUILD THE EARTH AND MOON ------------


    // Set the position of the solar system.
    g_TheSolarSystem_group.position.set( SOLAR_SYSTEM_X_POS, SOLAR_SYSTEM_Y_POS, SOLAR_SYSTEM_Z_POS);

    // Add the solar system to the scene.
    g_ThreeJsScene.add(g_TheSolarSystem_group);
	
	// --------------------- LIGHTS ----------------------

    // Create a light for the solar system.
    const light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 1, ); // 0.75);
    light.position.set(SOLAR_SYSTEM_X_POS, SOLAR_SYSTEM_Y_POS - 3, SOLAR_SYSTEM_Z_POS);

    light.lookAt(g_TheEarth.position);

    g_ThreeJsScene.add(light);

image
image762Ă—481 61.3 KB

2

Bit of a hack, but material.emissive might do it

3

Got an easy sample I could look at?

4

There’s energy conservation at play, the “smoother” the surface is - the more it reflects in a single direction, and the “rougher” it is - the more it reflects in all directions. This is often referred to as “specular” and “diffuse” reflection.

Why does this matter? Your “earth” is very “smooth”/ (shiny in Phong terms), this means that it reflects more of the light in specular way. So it has a sharp specular lobe, but very little diffuse reflection, hence the result that you observe. Tone down shininess/smoothness to 0 and you’ll get the result you want. Earth’s reflection profile is actually quite complex, as there is a lot of light diffusion happening in the atmosphere and not at the surface, that’s also why you see a bit of a halo around the earth, and since we’re looking at the earth from very far away, it might as well be full of microfacets, so it’s pretty “rough”.

I’m sure someone who actually knows atmospherics or astrophysics can chime in and provide more clarity, but that’s it in a nutshell.

2 Likes