2

Three.jsを使ってWebGLで水面を作ろうとしています。ディスプレイスメントを追加して基本的な波紋効果を作成する方法を知っていると思うので、鏡だけから始めると思います。

これは私が知っていることです。反射は、通常、水面をカリング面として使用して、FBO で垂直方向 (y 軸) に反転したシーンをレンダリングすることによって行われます。次に、この FBO を水平面のテクスチャとして使用します。ディスプレイスメント マップ (またはノイズ テクスチャ) を使用して、画像を移動し、水の効果を実現できます。

問題:まず、ThreeJS でシーンを反転する方法が見つかりません。OpenGL では、glScale を使用して Y に -1 を指定するだけで済みますが、これは WebGL (またはベースとなっている GLES) では不可能だと思います。少なくとも、ThreeJS にはそのようなものは見つかりませんでした。ジオメトリにはスケール パラメータがありますが、シーンにはありません。1 つの解決策は Camera の .matrixWorldInverse を変更することですが、どうすればそれができるかわかりません。何か案は？

2 つ目のハードルは、クリッピング/カリング プレーンです。繰り返しますが、古い方法では glClipPlane を使用していましたが、私の知る限り、最新の OpenGL 標準でもサポートされていないため、WebGL にもありません。頂点シェーダーでそれを行うことができるとどこかで読みましたが、ThreeJS ではシェーダーをマテリアルとして追加する方法しか知らず、FBO へのレンダリング中にこれが必要です。

3 つ目は、FBO を正しいテクスチャ座標で水平面にレンダリングすることです。つまり、基本的にはカメラの位置から投影していると思います。

これについては、インターネット上でこれ以上の情報を見つけることができません。WebGL 反射の例はほとんどなく、近いのはここだけで、カリングに「斜めビュー フラスタム」メソッドを使用していました。これは本当に今日それを行うための最良の方法ですか？1 つの関数の代わりに、これを自分でソフトウェアでコーディングする必要があります (GPU ではなく CPU で実行する必要があります)。もちろん、ThreeJS で提供される立方体反射は平面には適用できないので、はい、それらを試しました。誰かがこれを行う方法についてできるだけ簡単な例を作ることができれば、私はそれを大いに感謝します.

4

3 に答える 3

4

この three.js の例を確認してください。

ソースから直接、箱から出してすぐに使用できます。

water = new THREE.Water( renderer, camera, scene, {
    textureWidth: 512, 
    textureHeight: 512,
    waterNormals: waterNormals,
    alpha:  1.0,
    sunDirection: light.position.clone().normalize(),
    sunColor: 0xffffff,
    waterColor: 0x001e0f,
    distortionScale: 50.0,
} );


mirrorMesh = new THREE.Mesh(
    new THREE.PlaneBufferGeometry( parameters.width * 500, parameters.height * 500 ),
    water.material
);

mirrorMesh.add( water );
mirrorMesh.rotation.x = - Math.PI * 0.5;
scene.add( mirrorMesh );

私には海のように見えます:)

于 2015-01-20T15:04:07.667 に答える
2

このプレゼンテーションを見ることができます http://29a.ch/slides/2012/webglwater/

このフィドルはあなたに役立つかもしれません jsfiddle.net/ahmedadel/44tjE

于 2013-02-24T08:57:58.577 に答える
0

これは、質問のスケーリング部分にのみ対処します。Object3D に関連付けられているマトリックスには、makeScale メソッドがあります。

于 2013-02-23T23:23:27.483 に答える