WebGLの基礎

全8回

JavaScriptもグラフィック表現の手段としても用いられる時代。このシリーズでは、その技術のひとつ「WebGL」の実装を可能にするTHREE.jsというJavaScriptライブラリの基礎を解説します。

基本的な考え方は変わりませんが、一部書式が変更されています。また古いライブラリバージョンは、現在最新のブラウザで再生できない機能が含まれています。（2016年9月現在）

最終回 three.jsでシェーダーを利用する 2012年9月20日

ピュアなWebGLのコードでは、座標を元にGLSLによりその形や色を決めることができます。「WebGLの基礎」の最終回では、three.jsを用いたJavaScriptとGLSLの連携について解説します。

three.jsのさまざまなオブジェクト（カメラ、光源、メッシュ）の位置、角度、拡大率などを指定するコードを紹介します。これまでのthree.jsのコードと同じく、直感的に書くことができます。

3Dモデル作成アプリケーションのネイティブファイルをJSON形式にエクスポートし、そのファイルをthree.jsに読み込み描画する方法を紹介します。COLLADA形式読み込みとの仕組みの違いにも注目してみましょう。

前回はthree.jsによる立方体の描画を紹介しました。今回は外部の3Dモデル作成アプリケーションで作られたモデルをthree.js経由で読み込み、描画してみましょう。

今回はWebGLによる描画を、直感的に扱うためのJavaScriptライブラリthree.jsを紹介します。three.jsはWebGLにおけるjQueryのような存在であり、もしWebGLに興味があるのであれば知っておくといいでしょう。

ピュアなWebGLを用い、最終的に三角形を描画します。なお、この記事の目的としては、WebGLのコードを学ぶためではなく、WebGLのコードの冗長さ、流れを理解するためのものです。難しいとは思いますが軽く読み進めてみてください。

WebGLは、通常のWeb制作にはなかった新しい概念の理解が必要です。実際にコードを書く前に、コードの理由、つまりどのように動いているのか、なぜそう書くのかを知っておきましょう。

HTML5関連の新技術は、これまでになかった豊かなグラフィック表現を可能にします。はじめにフロントエンド技術で扱えるようになってきたグラフィック関連技術を概観してみましょう。

運営会社