threejs でリアルタイムポリゴン屈折を実装する方法

this.orthoCamera = 新しい THREE.OrthographicCamera( 幅 / - 2, 幅 / 2, 高さ / 2, 高さ / - 2, 1, 1000 );
// カメラをレイヤー 1 に割り当てます (レイヤー 0 がデフォルト)
this.orthoCamera.layers.set(1);

const tex = loadTexture('texture.jpg') を待機します。
this.quad = 新しい THREE.Mesh(新しい THREE.PlaneBufferGeometry()、新しい THREE.MeshBasicMaterial({map: tex}));

this.quad.scale.set(幅、高さ、1);
// 平面もレイヤー1に移動します
this.quad.layers.set(1);
this.scene.add(this.quad);

this.envFBO = 新しい THREE.WebGLRenderTarget(幅、高さ);

this.renderer.autoClear = false;

与える（） {
    アニメーションフレームをリクエストします( this.render );

    this.renderer.clear();

    // 背景を fbo にレンダリングする
    this.renderer.setRenderTarget(this.envFbo);
    this.renderer.render( this.scene, this.orthoCamera );

    // 背景を画面にレンダリングする
    this.renderer.setRenderTarget(null);
    this.renderer.render( this.scene, this.orthoCamera );
    this.renderer.clearDepth();

    // ジオメトリを画面にレンダリングする
    this.renderer.render( this.scene, this.camera );
};

変化する vec3 eyeVector;
変化する vec3 worldNormal;

void main() {
    vec4 ワールド位置 = modelMatrix * vec4( 位置、 1.0 );
    eyeVector = normalize(worldPos.xyz - cameraPosition);
    ワールドノーマル = 正規化( modelViewMatrix * vec4(normal, 0.0)).xyz;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(位置、1.0);
}

均一なサンプラー2D envMap;
均一な vec2 解像度。

変化する vec3 worldNormal;
vec3 viewDirection を変更する;

void main() {
    // 画面座標を取得
    vec2 uv = gl_FragCoord.xy / 解像度;

    vec3 法線 = ワールド法線;
    // 屈折を計算して画面座標に追加します
    vec3 屈折 = refract(eyeVector, normal, 1.0/ior);
    uv += 屈折.xy;
    
    // 背景テクスチャをサンプリングする
    vec4 tex = texture2D(envMap, uv);

    vec4 出力 = tex;
    gl_FragColor = vec4(出力.rgb、1.0);
} 

float Fresnel(vec3 eyeVector, vec3 worldNormal) {
    pow( 1.0 + dot( eyeVector, worldNormal), 3.0 ) を返します。
}

均一なサンプラー2D envMap;
均一な vec2 解像度。

変化する vec3 worldNormal;
vec3 viewDirection を変更する;

float Fresnel(vec3 eyeVector, vec3 worldNormal) {
    pow( 1.0 + dot( eyeVector, worldNormal), 3.0 ) を返します。
}

void main() {
    // 画面座標を取得
    vec2 uv = gl_FragCoord.xy / 解像度;

    vec3 法線 = ワールド法線;
    // 屈折を計算して画面座標に追加します
    vec3 屈折 = refract(eyeVector, normal, 1.0/ior);
    uv += 屈折.xy;

    // 背景テクスチャをサンプリングする
    vec4 tex = texture2D(envMap, uv);

    vec4 出力 = tex;

    // フレネル比を計算する
    float f = Fresnel(eyeVector, normal);

    // 屈折色と反射色を混ぜる
    output.rgb = mix(output.rgb、vec3(1.0)、f);

    gl_FragColor = vec4(出力.rgb、1.0);
} 

変化する vec3 worldNormal;

void main() {
    gl_FragColor = vec4(ワールドノーマル、1.0);
}

this.backfaceFbo = 新しい THREE.WebGLRenderTarget(幅、高さ);

...

与える（） {
    アニメーションフレームをリクエストします( this.render );

    this.renderer.clear();

    // 背景を fbo にレンダリングする
    this.renderer.setRenderTarget(this.envFbo);
    this.renderer.render( this.scene, this.orthoCamera );

    // ダイヤモンドの裏面を fbo にレンダリングします
    this.mesh.material = this.backfaceMaterial;
    this.renderer.setRenderTarget(this.backfaceFbo);
    this.renderer.clearDepth();
    this.renderer.render( this.scene, this.camera );

    // 背景を画面にレンダリングする
    this.renderer.setRenderTarget(null);
    this.renderer.render( this.scene, this.orthoCamera );
    this.renderer.clearDepth();

    // 屈折マテリアル付きのダイヤモンドを画面にレンダリングする
    this.mesh.material = this.refractionMaterial;
    this.renderer.render( this.scene, this.camera );
};

vec3 backfaceNormal = texture2D(backfaceMap, uv).rgb;

浮動小数点数 a = 0.33;
vec3 法線 = worldNormal * (1.0 - a) - backfaceNormal * a;