helpdelete

WebGLプログラミングのための準備

ここではWebGLプログラミングの準備について説明します。

WebGLの概要を大まかに知りたい方はこちらを見てください。

必要なもの

WebGL開発ための準備はとても簡単です。必要なものは次の２つしかありません。

  • Webブラウザ
  • テキストエディタ

　かつての3DCGプログラミングは、C言語やC++などの難しい言語やVisualStudioなどの開発環境を揃えて、何年もかけて経験を積まなければ高度な表現は作れませんでした。

　しかしWebGLの登場によって、状況は大きく変わりました。
以前はエラー（動作不具合の原因）を把握するためにもわざわざコードを書かなければならず、多くの初心者がつまづいていました。

　一方のWebGLなら、ブラウザが開発者コンソールにエラー文を自動で出力してくれます。これほど準備と習得、トライアンドエラーのやさしい3DCGプログラム環境はかつてなく、まさに隔世の感があります。

WebGLによって、いまや3DCGプログラミングはすべての人に開かれたと言ってよいでしょう。

WebGLとグラフィックスハードウェア（GPU）の関係

WebGLを用いた3DCGプログラミングの実際に入る前に、WebGLとグラフィックスハードウェア（GPU）の関係について説明します。

今日、3DCGの処理は一般的にグラフィックスハードウェアが行います。最近ではGPU（グラフィックスプロセッサーユニット）という用語が有名になりましたが、どちらもだいたい同じ意味だと考えてください。例としてはNVIDIA社やAMD社の製品で有名な、パソコン内部に搭載するいわゆるグラフィックスボード（グラボ）などがグラフィックスハードウェアに該当します。

グラフィックスハードウェアは一般的なCPUとは異なるチップ回路設計がされており、グラフィックスをCPUよりも高速に処理することができます。

WebGLはこうしたグラフィックスハードウェアにグラフィックス処理の指示を出すためのJavaScript APIです。

image.png

WebGLはグラフィックスハードウェアへ指示を出すためのJavaScript API

グラフィックスハードウェア（GPU）はCPUとは大きく異なった仕組みで処理を行うため、その処理の指示の仕方はそれまで3DCGと無縁だった人からみるとかなり独特なものです。3Dグラフィックスの本質的な理論とも直接的な関係はあまりありません。あくまで現行のグラフィックスハードウェアの仕様を前提とした考え方からAPIが決められているため、表現者が頭で思い描く3DCGのイメージとはかけ離れた別の考え方でグラフィックスハードウェアに指示を与える必要があります。その指示を与えるためのAPIがWebGLなのです。

そのため、より直感的にリアルタイムの3DCGで表現を行いたい人は、通常はUnityやUnreal Engineなどのゲームエンジンや、プログラムベースで表現したい場合でもWebGL処理を内部に隠蔽したThree.jsなど、より抽象度の高いライブラリを利用するのが通常です。

そのため、直接WebGLをJavaScriptで扱うアプローチはあまり主流とは言えなくなってきているのですが、3DCGの細かい技術に興味がある人からすると、これはこれで奥が深く面白い世界です。この講座を読みすすめている方なら、おそらくそのお一人といえるかもしれません。

様々なグラフィックスハードウェア

グラフィックスハードウェアはかつてはパソコンに追加で搭載するグラフィックスボードの形態が有名でしたが、広く使われるようになった現在では、大小様々な形態を取るようになってきました。

  • グラフィックスボード（NVIDIA社のGeforceシリーズ、AMD社のRadeonシリーズなど）
  • CPUに内蔵されたグラフィックスコア
  • コンシューマーゲーム機に搭載されるグラフィックスチップ
  • スマートフォンなどに搭載されるSoC（統合型チップ）内部のグラフィックスコア

あまり主流では有りませんが、こうしたグラフィックスハードウェアの動きをソフトウェア的に模擬するソフトウェアレンダラーも存在し、Chromeなどの一部のWebブラウザはグラフィックスハードウェアが利用できない場合は、内蔵するソフトウェアレンダラーでグラフィックスを処理します。

まとめ

今回は次のことを学習しました。

  • WebGLで必要なものはWebブラウザとテキストエディタだけ
  • WebGLとグラフィックスハードウェア（GPU）の関係