ただいま新デザインバージョンのプレビュー中です。旧バージョンはこちら。不具合等はお問い合わせより報告お願いいたします。

WebGLの基礎

全8回

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

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

最終回 three.jsでシェーダーを利用する

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

第7回 移動・回転・拡大縮小

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

第6回 JSONの読み込み

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

第5回 COLLADAの読み込み

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

第4回 THREE.jsを使う

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

第3回 ピュアなWebGLを使う

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

第2回 WebGLのコードを書くための基礎知識

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

第1回 フロントエンドのグラフィック技術

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