WebGL を始める全ての人へ

必要なもの、それはブラウザ

特別なプラグインやライブラリを必要とせず、対応ブラウザさえ手元にあれば今すぐにでも GPU を利用した 3D レンダリングが行なえる――一昔前ではとても考えられなかったような話ですが、今現在、それは既に現実のものとなっています。

HTML5 で策定された canvas タグを用いて、ブラウザ上で 3DCG を描画することを可能にした WebGL――

WebGL を用いれば、インターネットコンテンツ上でリアルタイム 3D レンダリングを行なうことが可能になります。いくらかの javascript の知識と、いくらかの数学的知識さえあれば、誰もが今すぐにでもこの驚くべきテクノロジーを利用することができます。

wgld.org の特徴

当サイトでは実際にブラウザ上で動作する多くの WebGL サンプル・デモを用意しています。

WebGL 初心者にもわかりやすいよう、できる限り詳細に概念やテクニックを解説しています。また、中級者以上のレベルの人にも参考になるようなコンテンツをたくさん紹介できたらと考えています。上級者の方は、むしろいろいろ教えてください(笑)

各テキストの内容を参照しても理解できない部分や、テキスト内の誤りを発見した場合には下のほうにメールアドレスを記載してありますので、そちらまでお気軽にご連絡ください。できる限り迅速に対応します。※確実に対応することをお約束するものではありませんが……

Twitter で DM やリプライ飛ばしてもらえれば割とすぐに反応できると思います。Twitter : @h_doxas

また、当サイトのサンプルやデモに限らず WebGL には環境によって動作に差が出る場合があります。完全に動作しない場合もあれば、動作はするが描画がおかしくなる場合など様々です。3D の PC ゲームがそうであるように、環境に依存する部分がどうしても出てしまいますのでその点はご理解ください。

WebGL の特徴

  • OpenGL ES から派生した言語仕様
  • OpenGL あるいは OpenGL ES 対応のハードが必要
  • WebGL に対応したブラウザが必要
  • ブラウザ以外に特別なプラグインなどは不要
  • javascript で記述できる
  • HTML5 の canvas タグを利用する
  • 独自にシェーダを記述できる
  • 設定などを特に行なわなくとも GPU を利用
  • GPU を使えるので高速に動作する

WebGL の最大の利点は、やはり直接 GPU を利用できることでしょうか。それ以外にも、javascript による記述であるため敷居が低い、特別な開発環境を事前に整えておく必要はない、などの利点があります。

WebGL の難点

WebGL は 3D レンダリングの規格として有名な OpenGL のファミリーに属していますが、余分な機能が削られている分、実装が多少面倒になることがあります。

最近では、WebGL を利用する上で非常に便利なライブラリもそれなりに充実してきました。事実上デファクトスタンダードとなりつつある Three.js をはじめ、その他にも多数のライブラリが有志によって公開されています。これらを利用することで WebGL はグッと使いやすいものとなり、必ずや開発の助けになるでしょう。

ただし、当サイトはあくまでも極力ライブラリを使わない方針です。ライブラリの使い方は、それに詳しい方々がやってくれるでしょう。当サイトはあくまでも、ライブラリを使わず直接 WebGL を書く方針で運営しています。ライブラリの中身でどのようなことが起こっているのかを理解するためにも、まず WebGL そのものがどのように機能するのかを理解することは無駄にはならないと思います。いずれは当サイトでもライブラリの使い方などご紹介するかもしれませんが、たぶんするとしてもだいぶ先です(笑)

また WebGL に関しては、ブラウザ上で動作する都合もあって、セキュリティ面での不安はずっとついてまわることになる可能性が高いと言えます。現在では対応が進んでいますが、かつて、セキュリティ上の理由により WebGL が敬遠されていたことがあるのだという事実も、忘れてはならない事柄のひとつでしょう。

WebGL のこれから

WebGL に関する資料や入門記事などは、ウェブ上を見渡してみても現状まだまだ豊富とは言えないのが現実です。また、javascript を利用するため敷居が低いとは言っても、お世辞にも簡単とは言いがたいのがリアルタイム 3D レンダリングの世界です。それなりに数学的な知識も必要となります。

しかし、GPU を利用でき、しかもシェーダを自前で記述できるという WebGL の特性は、今後のウェブグラフィックの世界を大きく変える可能性を秘めています。難易度が高いことは間違いありませんが、その分、習得できればプログラミングやコンテンツ作成の幅が大きく広がります。

これをご覧になっている方々にとって、このサイトの存在が少しでも WebGL を理解することの助けになれたら嬉しいのですが。

コンテンツ

当サイトを初めてご利用いただく場合には、サイトポリシーに目を通していただけるとよろしいかと思います。

当サイトの全てのコンテンツにアクセスするには、サイトマップを活用してください。

そのほか、利用規約や免責次項についても確認してください。

ご意見、ご要望などは admin[$]wgld.org ($ -> @) までご連絡ください。

WebGL JP コミュニティ

WebGL は OpenGL ES の API を直接操作するような実装を行う必要があり、普段 Web のフロントエンドをバリバリこなしている方であっても、3DCG の経験がないと非常に難しいと感じる場面が多いでしょう。また、WebGL の API の他に GLSL と呼ばれるシェーダ言語を同時に習得する必要があり、学習コストが高めになる傾向もあります。

当サイトでは、Slack を用いた WebGL コミュニティを開設しています。参加は無料で、質問や意見交換、雑談など、参加者の自由な粒度で活用できると思います。気軽にご参加ください。

WebGL に限らず、3DCG はちょっとしたことで大きな罠に引っかかることが多いです。

自分の力でじっくりと問題解決に取り組むことももちろん大切ですが、どうしてもわからないことがある場合など、気軽に質問してみましょう。きっと WebGL 界の猛者たちが、あなたの助けになってくれると思います(笑)

entry

PR

press Z key