4

three.jsでレーシングゲームをやっていますが、次の問題に悩まされています...

私は 2 台の車を持っているので、各車の後部の車のライトと前部の車のライトに 4 つのスポットライト (最小) をレンダリングする必要があります...

また、道路にはいくつかのライトが必要です...

だから私はこのコードを持っています:

//front car1 light
var SpotLight = new THREE.SpotLight( 0xffffff, 5, 300, Math.PI/2, 1 );
SpotLight.position.set( 50, 10, 700 );
SpotLight.target.position.set(50, 0, 800);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

//front car2 light
var SpotLight = new THREE.SpotLight( 0xffffff, 5, 300, -Math.PI/2, 1 );
SpotLight.position.set( -50, 10, 40 );
SpotLight.target.position.set(-50, 0, 100);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

//rear car1 light
var SpotLight = new THREE.SpotLight( 0xff0000, 2, 200, Math.PI/2, 2 );
SpotLight.position.set( 50, 20, 660 );
SpotLight.target.position.set(50, 0, 600);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

//rear car2 light
var SpotLight = new THREE.SpotLight( 0xff0000, 2, 100, Math.PI/2, 1 );
SpotLight.position.set( -50, 20, -35 );
SpotLight.target.position.set(-50, 0, -100);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

//some road light
var SpotLight = new THREE.SpotLight( 0x404040, 3, 500, Math.PI/2, 2 );
SpotLight.position.set( 0, 300, 0 );
SpotLight.target.position.set(0, 0, 0);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

特別なことは何もありません..しかし、パフォーマンスは20〜30 FPSに低下し、少し遅れています:-1:そして、将来いくつかのライトを追加すると、パフォーマンスはさらに向上します...

誰かがすでに同様の問題に遭遇しましたか? これに対処する方法は？それとも、私は何か間違ったことをしていますか？

4

3 に答える 3

4

リアルタイム レンダリングを行う場合、ライトは非常に消費量が多くなります。求めている結果を模倣する最も安価なアプローチを見つける必要があります。

たとえば、車の前に、スポット ライトが床に向けられている場合のように見えるテクスチャ付きの平面を配置できます。それは正しくありませんが、正しい印象を与え、4 つのスポットライトを保存し、ゲームは 60fps で実行されます。

于 2013-04-14T12:13:45.010 に答える
3

この場合、影が原因である可能性が最も高くなります。フードの下では、影を落とす各ライトの視点からシーンをレンダリングする必要があります。可能であれば、最も重要なもののためにそれらを保存し、他のライトの影を無効にします。

多くのライトでは、WebGLDeferredRenderer を使用することができます。デフォルトのレンダラーよりもはるかに優れた複数のライトを処理できます。ただし、これは進行中の実験的な作業であるため、他の問題に遭遇する可能性があります。また、シャドウ マッピングのパフォーマンスに役立つかどうかもわかりません。

于 2013-04-14T14:42:06.157 に答える
1

mrdoob と yaku の提案に加えて、まったく同じ問題がありました。これは本当に役に立ちました。別のアプローチは、ジオメトリ内のセグメントとポリゴンの数を減らすことです。

つまり、シーンに単純な円柱がある場合、初期化時に heightSegments と RadialSegments を割り当てることで、セグメントの数を減らすことができます。

非常に単純な例として、単純な円柱を作成する必要がある場合は、次のようなことは避けてください。

sampleCylinderGeo = new THREE.CylinderGeometry(2, 2, 5, 16, 32);

代わりに試してください：

sampleCylinderGeo = new THREE.CylinderGeometry(2, 2, 5, 8, 1);

もちろん、より滑らかな円柱が必要な場合は、必要に応じて放射状のセグメントを 8 から 16 などに増やすことができますが、heightSegments の場合、単純な円柱に 1 つ以上のセグメントを含めることはまったく役に立ちません。

したがって、必要に応じてセグメントの数を調整するだけで、多くの不要なセグメントを節約し、ライトを操作するときに、特にシーンに多数のジオメトリがある場合に、より多くの FPS を実現できます。

于 2015-03-18T17:31:25.380 に答える