Search code examples
javascriptthree.jstextures

How to make emissiveMap lighting only in dark areas in three.js?

With three.js, I render earth with textures. I also add an emissive texture to add the city light. But I have an issue, even the light areas of earth emit the cities light.

Exemple:

Earth render result

It is possible to render the emissive texture lighting only in dark areas? I don't find any ways.

My texture is set like this:

material.emissiveMap = loader.load('../assets/earth-light.png');
material.emissiveIntensity = 0.005;
material.emissive = new THREE.Color(163, 169, 133);
Solution

  • I've been thinking about this problem after my initial comment. I think there's a solution. You could render your city lights in a separate layer after you've rendered the Earth globe. Layers let you do separate render passes with compartmentalized lights that don't affect each other.

    With this in mind, instead of making the cities emissive, make them reflect a second light shining from the opposite side of the sun.

    Layer 1 renders:

    • Sunlight
    • Sphere with Earth texture

    Layer2 renders:

    • Light on the opposite side of the sun
    • Another sphere with cities texture

    Your city material would look something like this:

    const cityOutlines = loader.load('../assets/earth-light.png');

const citiesMaterial = new THREE.MeshLambertMaterial({
    transparent: true,
    alphaMap: cityOutlines,
    color: new THREE.Color(163, 169, 133),
    depthTest: false,                   // So it doesn't z-fight the main Earth sphere
    blending: THREE.AdditiveBlending    // Lights are additive
});

    This material could be illuminated from the opposite side of the sun. With additiveBlending the black parts that get no light will be invisible, and bright parts will shine.

    To see layers in action, and how to set them up, visit this demo in the Three.js website. You can see the source code by clicking the < > icon.