Three.js は、ブラウザーで 3D グラフィックスを作成するための人気のある JavaScript ライブラリです。インタラクティブなビジュアライゼーションやゲームの作成によく使用されます。 3D グラフィックスに関する課題の 1 つは、雲(yún)や煙などの不透明でないオブジェクトをレンダリングすることです。これらのオブジェクトは光を通過(guò)させるため、より柔らかく、よりリアルな外観を作成できます。

この場(chǎng)合の目標(biāo)は、地球の表現(xiàn)に「雰囲気」効果を追加することです。大気は地球を囲み光を散亂させる半透明のレイヤーとなり、よりリアルな外観を與えます。

この効果を?qū)g現(xiàn)するには、各ピクセルの色を計(jì)算するフラグメント シェーダーを作成します。大気中の位置と光源の方向に基づいて大気中での位置を特定します。フラグメント シェーダーは、「大気散亂」と呼ばれる手法を使用して、大気中の粒子によって光が散亂する様子をシミュレートします。

フラグメント シェーダー コードは次のとおりです:

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

このフラグメントシェーダーはいくつかの入力を受け取ります:

• lightDirection: ライトの方向source.
• earthTexture: 地球を表すために使用されるテクスチャ。
• vUv: 現(xiàn)在のピクセルのテクスチャ座標(biāo)。
• vNormal: 現(xiàn)在のピクセルの法線ベクトル。

フラグメント シェーダーはまず、現(xiàn)在のピクセルでのサーフェス法線を計(jì)算します。次に、現(xiàn)在のピクセルから光源までの方向を計(jì)算します。これら 2 つの値は、ピクセルの方向に散亂する光の量を計(jì)算するために使用されます。

次に、フラグメント シェーダーは、地球テクスチャの色に次の値を乗算して、現(xiàn)在のピクセルにおける大気の色を計(jì)算します。飛散量。結(jié)果のカラーはフラグメント カラーとして出力されます。

このフラグメント シェーダーを使用するには、それを使用するマテリアルを作成する必要があります。以下は、大気散亂フラグメント シェーダを使用するマテリアルの例です:

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

このマテリアルは 2 つのユニフォームを取ります:

• lightDirection: 光源への方向。
• earthTexture: を表現(xiàn)するために使用されるテクスチャEarth.

マテリアルは、lightDirection ユニフォームを使用して、各方向に散亂する光の量を計(jì)算します。 EarthTexture ユニフォームを使用して地球の表面を表現(xiàn)します。

このマテリアルを使用するには、メッシュを作成してマテリアルに割り當(dāng)てる必要があります。メッシュを作成してマテリアルに割り當(dāng)てる方法の例を次に示します。

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

このコードは、半徑 10、セグメント 32、リング 32 個(gè)の球ジオメトリを作成します。次に、大気散亂フラグメント シェーダを使用するマテリアルを作成します。最後に、メッシュを作成し、マテリアルに割り當(dāng)てます。

メッシュが作成されたら、シーンに追加できます。シーンにメッシュを追加する方法の例を次に示します。

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

このコードは、メッシュをシーンに追加します。メッシュは大気散亂フラグメント シェーダを使用してレンダリングされます。その結(jié)果、地球を取り囲む半透明の大気が生まれます。

以上がThree.js とカスタム フラグメント シェーダーを使用して、3D Earth モデルの周囲の現(xiàn)実的な雰囲気をシミュレートするにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。