この考えは、Marco Tariniによる webGL 「Spinnable World Maps」のさまざまな投影法で写真を表示するという非常に興味深い例に出会うまで、考え続けました。 この例は1年前に同僚によって示されましたが、最近彼に興味を持ちました。 このコード例は、 punto centrale 、 mostra / nasconde griglia 、 movimentoなど、イタリア語の著者の元のコメントでも興味深いものです。
Tariniのコードは、画面サイズ、ピクセルと三角形のマウスカーソル座標、投影ジオメトリ座標、ジオメトリ回転行列など、あらゆる計算で飽和していることが判明しました。 この場合、経絡と花の画像はシェーダーで完全に形成されます。 国の国境など、この地図に何かを描きたかったのです。 ただし、このためには、経線の場合と同様に、ラインピクセルを計算するためのコードをシェーダーコードに挿入する必要があり、これは既に多すぎます。 そのため、Canvas 2dのマップの画像とwebGLおよびTariniの式による再プログラミングを組み合わせるというアイデアが生まれました。 つまり、キャンバスをテクスチャのソースとして使用して、ジオメトリにオーバーレイします。 Three.jsソースには、このような例が含まれています。
Spinnable Mapsコードから、ほとんどの計算関数を使用しました。
*ジオメトリの頂点（geometry.vertices）および三角形（geometry.faces）の座標を計算するため：buildEquirectangular、buildCircleMap、buildLambert、...
* VertexOnSphere配列から座標を計算するには：f_equirectangular、f_lambert、f_orthographic、... VertexOnSphere配列は頂点シェーダーに渡され、XYZ座標がXYに変換されてテクスチャが三角形にカットされます。 実際には、ここで画像が再投影されます。 この式は、キャンバス2Dカードに使用されたProj4jsモジュールの計算に似ています。
dbcartajsの例から- レイヤーごとにマップを作成し、ピクセルでマウス座標を再計算するロジック、タイマー。 2つのプロジェクトの合併の結果は、 「Projection 3d」の例で見ることができます。
マウスでマップを制御できます。 マウスでドラッグすると、マップは平面上でオフセットではなく、3つの軸に沿って球体で回転します。 これにより、マップをX軸に沿って無限にループさせる効果が得られ、レイヤーとデバイスの管理だけでなく、投影法の切り替えもリストから利用できます。