p5.jsの2つのレンダリングモードの1つで、3Dレンダリングやシェーダーなどの計算集約型タスクに使用されます。
WEBGL
は、デフォルトのP2D
レンダラーと以下の点で異なります:
- 座標系 -
WEBGL
モードで描画する場合、原点(0,0,0)は画面の左上隅ではなく、画面の中心にあります。座標と変換に関するチュートリアルをご覧ください。 - 3D形状 -
WEBGL
モードは、box()、sphere()、cone()、その他などの3次元形状を描画するのに使用できます。より複雑なオブジェクトを作成するには、カスタムジオメトリに関するチュートリアルをご覧ください。 - 形状の詳細度 -
WEBGL
モードで描画する際、detail
パラメータを使用して曲線をどれだけ滑らかに描画するかを指定できます。詳細な情報と例については、形状に関するwikiセクションをご覧ください。 - テクスチャ - テクスチャは形状に巻き付く皮のようなものです。テクスチャを使用して表面に画像をマッピングする例については、テクスチャに関するwikiセクションをご覧ください。
- マテリアルとライティング -
WEBGL
は、シーンの周りに配置できるambientLight()のような異なるタイプのライトを提供します。specularMaterial()のようなマテリアルは、形状と深さを伝えるためにライティングを反射します。異なる組み合わせを試すには、スタイリングと外観に関するチュートリアルをご覧ください。 - カメラ -
WEBGL
スケッチのビューポートは、カメラ属性を変更することで調整できます。カメラコントロールの説明については、チュートリアルのカメラに関するセクションをご覧ください。 - テキスト -
WEBGL
では、loadFont()を使用してopentype/truetypeフォントファイルを事前にロードする必要があります。詳細と回避策については、テキストに関するwikiセクションをご覧ください。 - シェーダー - シェーダーは、様々な効果やグラフィックスに使用できるハードウェアアクセラレーションプログラムです。p5.jsでシェーダーを始めるには、シェーダー入門をご覧ください。
- グラフィックスアクセラレーション -
WEBGL
モードはCPUの代わりにグラフィックスカードを使用するため、スケッチのパフォーマンス向上に役立つ場合があります(例:一度に画面上により多くの形状を描画する)。
WEBGLモードについてさらに学ぶには、このウェブサイトの「チュートリアル」セクションにあるすべてのインタラクティブなWEBGLチュートリアルをチェックするか、"Getting started with WebGL in p5"というwiki記事をお読みください。
Notice any errors or typos? Please let us know. Please feel free to edit src/core/constants.js and open a pull request!