MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

WebGL チュートリアル

WebGL は互換性があるブラウザで、プラグインを使用することなく HTML <canvas> 内で 3D グラフィックスをレンダリングするための、OpenGL ES 2.0 に基づく API を Web コンテンツで使用できるようにします。WebGL のプログラムは JavaScript で記述する制御コードと、コンピュータの Graphics Processing Unit (GPU) で実行する特殊効果コード (シェーダーコード) で構成されます。WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。

このチュートリアルでは WebGL グラフィックスを描画するために <canvas> を使用する方法について、基礎から説明します。ここで提供するサンプルは WebGL で何ができるかの明確な見解をもたらし、また独自のコンテンツ構築し始められるようにするコード部品も提供します。

始める前に

<canvas> 要素を使用することはそれほど難しくありませんが、HTMLJavaScript の基礎を理解していなければなりません。<canvas> 要素や WebGL は古いブラウザでサポートされていませんが、最近のバージョンではすべての主要なブラウザがサポートしています。canvas にグラフィックスを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをオンザフライで生成します。

チュートリアル

WebGL 入門
WebGL コンテキストのセットアップ方法
WebGL コンテキストへの平面コンテンツの追加
WebGL を使用して単純なフラット図形を描画する方法
シェーダーを用いた WebGL での色の指定
シェーダーを用いた図形への色の設定方法についてのデモンストレーション
WebGL でのオブジェクトのアニメーティング
単純なアニメーションの作成の為のオブジェクトの回転と移動の方法について
WebGL を用いた 3D オブジェクトの作成
3D オブジェクトの作成とアニメーションの方法について (キューブを用いた例)
WebGL でのテクスチャの使用
オブジェクトの表面にテクスチャをマッピングする方法についてのデモンストレーション
WebGL でのライティング
WebGL コンテキストにおいて光のエフェクトをシミュレートする方法について。
WebGL でのテクスチャのアニメーティング
テクスチャをアニメーションさせる方法について。ここでは、回転するキューブの表面に Ogg ビデオをマッピングする手法を紹介します。

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss, fscholz
 最終更新者: yyss,