5

たとえば、頭上にカメラがあり、アバターが上にある地形がある場合、アバターの周りの地形が霧にフェードインしている間、アバターが完全に曇らないように霧をレンダリングすることは可能ですか？

4

1 に答える 1

4

もちろん、私が知る限り、three.jsで提供されているシェーダーを使用するのではなく、独自のシェーダーを作成する必要があります。このようにカスタマイズする方法があるかもしれませんが、あるとしても、私はそれに慣れていません。

カメラからの距離として霧を行うことについてのこの答えをチェックしてください。そこで説明されているように、カメラの位置をユニフォームとしてシェーダーに渡し、すべてのオブジェクトの頂点シェーダーで、カメラの位置から変換する頂点までの距離を見つけるという考え方です。次に、その距離をフラグメントシェーダーに変化として渡し、ピクセルあたりの距離を計算します。これを使用して、曇った色とオブジェクトの通常の色を混合します。この例では、OpenGLES2.0プログラミングガイドから確認できます。

キャラクターからの距離に基づいて変更するのは簡単です。カメラの位置ではなく、距離を計算しているユニフォームとしてキャラクターの位置を渡すだけです（このサンプルコードでは、u_eyePos次のようなものu_characterPosに置き換えます。からv_eyeDistへの変化を変更しますv_characterDist）。名前の変更を除いて、フラグメントシェーダーはまったく同じにすることができます。

したがって、次のようなものです（警告：テストされていません。three.jsを使用して満足させるには、これを修正する必要があります。ただし、このような例はたくさんあります）：

頂点シェーダー：

uniform mat4 matViewProjection;
uniform mat4 matView;
uniform vec4 u_characterPos;

attribute vec4 rm_Vertex;
attribute vec2 rm_TexCoord0;

varying vec2 v_texCoord;
varying float v_characterDist;

void main() {
  // Transform vertex to view-space
  vec4 vViewPos = matView * rm_Vertex;

  // Compute the distance to character
  v_characterDist = length(vViewPos - u_characterPos);                  

  gl_Position = matViewProjection * rm_Vertex;
  v_texCoord    = rm_TexCoord0.xy;
}

フラグメントシェーダー：

precision mediump float;

uniform vec4 u_fogColor;
uniform float u_fogMaxDist;
uniform float u_fogMinDist;
uniform sampler2D baseMap;

varying vec2 v_texCoord;
varying float v_characterDist;

float computeLinearFogFactor() {
  float factor;

  // Compute linear fog equation
  factor = (u_fogMaxDist - v_characterDist) /
        (u_fogMaxDist - u_fogMinDist );

  // Clamp in the [0,1] range
  factor = clamp(factor, 0.0, 1.0);

  return factor;            
}

void main() {
  float fogFactor = computeLinearFogFactor();
  vec4 fogColor = fogFactor * u_fogColor;
  vec4 baseColor = texture2D(baseMap, v_texCoord);

  // Compute final color as a lerp with fog factor
  gl_FragColor = baseColor * fogFactor +
               fogColor * (1.0 - fogFactor); 
}
于 2012-08-28T00:39:59.350 に答える