Wie kann ich mit Three.js und einem benutzerdefinierten Fragment-Shader eine realistische Atmosphäre um ein 3D-Erdmodell simulieren?

Three.js ist eine beliebte JavaScript-Bibliothek zum Erstellen von 3D-Grafiken im Browser. Es wird häufig zum Erstellen interaktiver Visualisierungen und Spiele verwendet. Eine der Herausforderungen bei 3D-Grafiken besteht darin, nicht undurchsichtige Objekte wie Wolken oder Rauch darzustellen. Diese Objekte lassen Licht durch, was zu einem weicheren, realistischeren Aussehen führen kann.

In diesem Fall besteht das Ziel darin, einer Darstellung der Erde einen „Atmosphären“-Effekt hinzuzufügen. Die Atmosphäre wird eine halbtransparente Schicht sein, die die Erde umgibt und Licht streut, was ihr ein realistischeres Aussehen verleiht.

Um diesen Effekt zu erzielen, erstellen wir einen Fragment-Shader, der die Farbe jedes Pixels berechnet in der Atmosphäre, basierend auf seiner Position in der Atmosphäre und der Richtung der Lichtquelle. Der Fragment-Shader verwendet eine Technik namens „atmosphärische Streuung“, um die Art und Weise zu simulieren, wie Licht durch Partikel in der Atmosphäre gestreut wird.

Hier ist der 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);
}

Dieses Fragment Shader benötigt mehrere Eingaben:

• lightDirection: Die Richtung zur Lichtquelle.
• earthTexture: Die Textur, die zur Darstellung der Erde verwendet wird.
• vUv: Die Texturkoordinaten für das aktuelle Pixel.
• vNormal: Der Normalenvektor für das aktuelle Pixel.

Der Fragment-Shader berechnet zunächst die Oberflächennormale am aktuellen Pixel. Anschließend wird die Richtung vom aktuellen Pixel zur Lichtquelle berechnet. Diese beiden Werte werden verwendet, um die Lichtmenge zu berechnen, die in Richtung des Pixels gestreut wird.

Der Fragment-Shader berechnet dann die Farbe der Atmosphäre am aktuellen Pixel, indem er die Farbe der Erdtextur mit multipliziert das Ausmaß der Streuung. Die resultierende Farbe wird als Fragmentfarbe ausgegeben.

Um diesen Fragment-Shader zu verwenden, müssen wir ein Material erstellen, das ihn verwendet. Hier ist ein Beispiel für ein Material, das den atmosphärischen Streuungsfragment-Shader verwendet:

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') }
  }
});

Dieses Material nimmt zwei Uniformen an:

• Lichtrichtung: Die Richtung zur Lichtquelle.
• earthTexture: Die Textur, die zur Darstellung der Erde verwendet wird.

Das Material verwendet die einheitliche Lichtrichtung, um die Lichtmenge zu berechnen, die in jede Richtung gestreut wird. Es verwendet die EarthTexture-Uniform, um die Erdoberfläche darzustellen.

Um dieses Material zu verwenden, müssen wir ein Netz erstellen und es dem Material zuweisen. Hier ist ein Beispiel, wie man ein Netz erstellt und es dem Material zuordnet:

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);

Dieser Code erstellt eine Kugelgeometrie mit einem Radius von 10, 32 Segmenten und 32 Ringen. Anschließend wird ein Material erstellt, das den atmosphärischen Streuungsfragment-Shader verwendet. Abschließend wird ein Netz erstellt und dem Material zugewiesen.

Sobald das Netz erstellt wurde, kann es der Szene hinzugefügt werden. Hier ist ein Beispiel dafür, wie das Netz zur Szene hinzugefügt wird:

#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);
}

Dieser Code fügt das Netz zur Szene hinzu. Das Netz wird nun mit dem Fragment-Shader „Atmosphärische Streuung“ gerendert. Das Ergebnis wird eine halbtransparente Atmosphäre sein, die die Erde umgibt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Three.js und einem benutzerdefinierten Fragment-Shader eine realistische Atmosphäre um ein 3D-Erdmodell simulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!