WebGL でカスタムジオメトリを作成
p5.js には box() や sphere() などの基本的な形状がいくつかありますが、p5.js は3D モデルファイルやコードから複雑なカスタムジオメトリをレンダリングすることもできます。 このチュートリアルでは、p5.js に 3D モデルをインポートする方法、およびゼロからジオメトリを作成する方法について説明します。
ファイルから 3D モデルを読み込む
カスタムジオメトリは、OBJ ファイルまたは STL ファイルを使用して p5.js にインポートできます。これらのファイルは通常、Blender などの 3D モデリングツールで生成され、3D シーンを構築するときにより多くの制御が可能です。これを読み込むためには preload() 内で使用する必要があるloadModel() を使用します。そうすると、 model() 関数を使って、下記の例のように使用できます。
カスタムモデルで発生することがよくある問題は、スケーリングです。モデルがどのように構築されているかに応じて、p5.js で描画するとはるかに異なるサイズになる場合があり、描画できない場合もあります。loadModel() メソッドには、p5.js でうまく機能するサイズにモデルをリサイズする normalize パラメーターが含まれています。
基本的なプロシージャルジオメトリの作成
コードを使って、プロシージャルにジオメトリを定義することもできます。自分自身のルールに従ってジオメトリを作成する方法です。quad()、triangle()、rect()、circle() など、各メソッドには 3D で使用できるようにするための追加パラメーターがあります。
ジオメトリを制御するための別の方法があります。 beginShape(), vertex(), と endShape(). というメソッドを使って、点ごとに形状を定義することができます。次の例では、これらのメソッドを使用して、数学的に 3D シェイプを構築する方法を示します。
また、p5.js は内部的に loadModel() で使用されている p5.Geometryクラスがあり、カスタムジオメトリの定義にも使用できます。これは、面や法線を計算するための便利なツールを提供します。
3D では、面は表面を形成する3つまたは4つのポイントのコレクションを指します。法線は、面に垂直な方向であり、p5.js が表面全体にわたって照明を計算するのに役立ちます。
次の例では、p5.Geometry を使用してジオメトリのグリッドをプロットしています。
結論
これでカスタムジオメトリを作成できるようになりました。他のツールやコードからユニークな形状を作成できるようになりました。さまざまな 3D モデリングツールで作業を行い、あなたに最適なツールを見つけるための時間を費やしてください。
その他のチュートリアル
このチュートリアルは、p5.js で WebGL を使用する基本についてのシリーズの一部です。以下の他のチュートリアルをすべてチェックしてください。
用語集
プロシージャル
数学的に定義されたもので、ファイルなどの保存されたデータではないことを意味します。
モデル
ジオメトリの表現方法。
STL
STL（"standard tesselation language"の略）3D モデルのファイル形式。ジオメトリに関する情報のみを保存します。
OBJ
ジオメトリデータだけでなく、一部のマテリアルやテクスチャデータも保存するオープンなファイル形式。p5.js ではジオメトリに限定されていますが、テクスチャを使用して表面に画像をマッピングすることができます。
面
3つの点間で生成される固体の表面。
法線
面に垂直な方向で、ライティングの計算やマテリアルの使用時に必要な方向性です。
正規化
標準範囲内に収まるように何かを変更すること。