How can I simulate a realistic atmosphere around a 3D Earth model using Three.js and a custom fragment shader?

Three.js is a popular JavaScript library for creating 3D graphics in the browser. It's often used for creating interactive visualizations and games. One of the challenges with 3D graphics is rendering objects that are not opaque, such as clouds or smoke. These objects allow light to pass through them, which can create a softer, more realistic look.

In this case, the goal is to add an "atmosphere" effect to a representation of the Earth. The atmosphere will be a semi-transparent layer that surrounds the Earth and scatters light, giving it a more realistic appearance.

To achieve this effect, we'll create a fragment shader that will compute the color of each pixel in the atmosphere based on its position in the atmosphere and the direction of the light source. The fragment shader will use a technique called "atmospheric scattering" to simulate the way that light is scattered by particles in the atmosphere.

Here is the fragment shader code:

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

uniform vec3 lightDirection;
uniform sampler2D earthTexture;

varying vec2 vUv;
varying vec3 vNormal;

void main() {
  // Compute the surface normal at this position
  vec3 normal = normalize(vNormal);
  // Compute the direction from this point to the light source
  vec3 lightDir = normalize(lightDirection);
  // Compute the amount of light that is scattered in this direction
  float scattering = dot(normal, lightDir);
  // Compute the color of the atmosphere at this position
  vec3 color = texture2D(earthTexture, vUv).rgb * scattering;
  // Output the color
  gl_FragColor = vec4(color, 1.0);
}

This fragment shader takes several inputs:

• lightDirection: The direction to the light source.
• earthTexture: The texture used to represent the Earth.
• vUv: The texture coordinates for the current pixel.
• vNormal: The normal vector for the current pixel.

The fragment shader first computes the surface normal at the current pixel. It then computes the direction from the current pixel to the light source. These two values are used to compute the amount of light that is scattered in the direction of the pixel.

The fragment shader then computes the color of the atmosphere at the current pixel by multiplying the color of the Earth texture by the amount of scattering. The resulting color is output as the fragment color.

To use this fragment shader, we need to create a material that uses it. Here is an example of a material that uses the atmospheric scattering fragment shader:

const material = new THREE.ShaderMaterial({
  fragmentShader: `
    #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
    #else
    precision mediump float;
    #endif
    
    uniform vec3 lightDirection;
    uniform sampler2D earthTexture;
    
    varying vec2 vUv;
    varying vec3 vNormal;
    
    void main() {
      vec3 normal = normalize(vNormal);
      vec3 lightDir = normalize(lightDirection);
      float scattering = dot(normal, lightDir);
      vec3 color = texture2D(earthTexture, vUv).rgb * scattering;
      gl_FragColor = vec4(color, 1.0);
    }
  `,
  uniforms: {
    lightDirection: { value: new THREE.Vector3(0, 1, 0) },
    earthTexture: { value: new THREE.TextureLoader().load('earth.jpg') }
  }
});

This material takes two uniforms:

• lightDirection: The direction to the light source.
• earthTexture: The texture used to represent the Earth.

The material uses the lightDirection uniform to compute the amount of light that is scattered in each direction. It uses the earthTexture uniform to represent the surface of the Earth.

To use this material, we need to create a mesh and assign it to the material. Here is an example of how to create a mesh and assign it to the material:

const geometry = new THREE.SphereGeometry(10, 32, 32);
const material = new THREE.ShaderMaterial({
  fragmentShader: `
    #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
    #else
    precision mediump float;
    #endif
    
    uniform vec3 lightDirection;
    uniform sampler2D earthTexture;
    
    varying vec2 vUv;
    varying vec3 vNormal;
    
    void main() {
      vec3 normal = normalize(vNormal);
      vec3 lightDir = normalize(lightDirection);
      float scattering = dot(normal, lightDir);
      vec3 color = texture2D(earthTexture, vUv).rgb * scattering;
      gl_FragColor = vec4(color, 1.0);
    }
  `,
  uniforms: {
    lightDirection: { value: new THREE.Vector3(0, 1, 0) },
    earthTexture: { value: new THREE.TextureLoader().load('earth.jpg') }
  }
});
const mesh = new THREE.Mesh(geometry, material);

This code creates a sphere geometry with a radius of 10, 32 segments, and 32 rings. It then creates a material that uses the atmospheric scattering fragment shader. Finally, it creates a mesh and assigns it to the material.

Once the mesh has been created, it can be added to the scene. Here is an example of how to add the mesh to the scene:

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

uniform vec3 lightDirection;
uniform sampler2D earthTexture;

varying vec2 vUv;
varying vec3 vNormal;

void main() {
  // Compute the surface normal at this position
  vec3 normal = normalize(vNormal);
  // Compute the direction from this point to the light source
  vec3 lightDir = normalize(lightDirection);
  // Compute the amount of light that is scattered in this direction
  float scattering = dot(normal, lightDir);
  // Compute the color of the atmosphere at this position
  vec3 color = texture2D(earthTexture, vUv).rgb * scattering;
  // Output the color
  gl_FragColor = vec4(color, 1.0);
}

This code adds the mesh to the scene. The mesh will now be rendered using the atmospheric scattering fragment shader. The result will be a semi-transparent atmosphere that surrounds the Earth.

The above is the detailed content of How can I simulate a realistic atmosphere around a 3D Earth model using Three.js and a custom fragment shader?. For more information, please follow other related articles on the PHP Chinese website!