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!

関連するリファレンス