webgl - WebGL-ブロックを使用したオブジェクトの構築

Question

ブロックを使用してテキストを作成しようとしていますが、後でカスタマイズする予定です。添付の画像は、私がやろうとしていることのモックアップです。

WebGLを使用することを考えていたのは、3Dで実行したいので、フラッシュを実行できないためですが、文字から立方体の構造を構築する方法がわかりません。誰かが私にテキストを一連のポイントにマップして、遠くから見て同じテキストを描くようにするための提案やテクニックを教えてもらえますか？

Answer 1

1. まず、コードから読み取ることができる形式のフォント (文字の形状のテーブル) が必要です。すでにお持ちですか？ほんの数文字の場合は、文字ごとに手動でポリゴンを作成できます。

2. 次に、ラスター化アルゴリズムを使用して、文字の形状を存在または不在のポイント/キューブの配列に変換します。完全にフラットなテキストがある場合は、2D 配列を使用してください。「カスタマイズ」によって深度効果が作成される場合は、代わりに 3D 配列が必要になります (配列の複数の平面に同じように書き込むことによって形状を「押し出す」)。

   実行時にテキストが変化しない場合に適切な、前の 2 つの手順の代替方法は、最初に目的のテキストを含む画像を作成し、次に画像のピクセルを上記の 2D 配列として使用することです。ブラウザーでは、2D キャンバス機能を使用してイメージをキャンバスに描画し、そこからピクセルを読み取ることでこれを行うことができます。

3. 次に、このボクセル配列から 3D 形状を生成するために、「存在する」点と「存在しない」点が交わる配列内のすべての場所に対してポリゴン フェースを作成します。隣接するペアに基づいてこれを行うと、分厚いピクセルの外観が得られます (Minecraft のように)。（サンプル画像のように）滑らかな斜面が必要な場合は、より複雑な手法が必要です。滑らかな表面を作成する従来の方法は、マーチング キューブです(ただし、マーチング キューブを行うだけですべての角が丸くなります)。