2017-10-13 9 views
1

ThreeJSフラグメントシェーダでノーマルマップを実装しようとしていますが、最近ではキー機能computeTangentsが失われているようですバージョン。ここで THREEJS v0.87.1:ノーマルマッピングで使用する接線とバイノーラルを生成できません

は三つの古いバージョンを使用して、作業のデモです:

http://coryg89.github.io/technical/2013/06/01/photorealistic-3d-moon-demo-in-webgl-and-javascript/

Normals Working

ThreeJSに送信され、頂点に「接線」と呼ばれる属性を追加するcomputeTangents()を使用していますシェイダー。

私は可能な限り研究し、接線を計算するシェーダのみの方法を試しましたが、これはGL_OES_standard_derivativesというMacBook Proのエラーを引き起こすdFdxを必要とします。

次に、接線を生成するために、BufferGeometryUtils.computeTangent()関数で使用する単純な立方体のジオメトリをバッファジオメトリに変換しようとしましたが、「インデックス付きジオメトリ」が必要です。 ThreeJS。

元デモから、これは私が最新のThreeJSを使用して再作成する必要がある行である:ここ

var mesh = new THREE.Mesh(geo, mat); 
mesh.geometry.computeTangents(); 

レポ:

https://github.com/CoryG89/MoonDemo

このデモは、使用して作業を取得することは可能です3の新しいバージョン?

答えて

1

私はこれに対する答えを見つけました。上記のデモでは、THREE.SphereGeometryをTHREE.SphereBufferGeometryに変更する必要がありました。

var geo = new THREE.SphereBufferGeometry(radius, xSegments, ySegments); 

は、その後、私はBufferGeometryUtils.jsファイルを追加し、次のコードを使用していた:

THREE.BufferGeometryUtils.computeTangents(geo); 

は、これが再び動作デモを得ました。

関連する問題