このサイトは、WebGLのライブラリ「Three.js」の入門サイトです。
初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。
Three.js 概要
Three.js は、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。Mr.doob氏が中心となって開発されており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。
WebGLだけで3D表現をするためには、立方体一つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。
もともと2000年代後半のFlashの時代から、ウェブの3D表現が人気を集めてきました。今では標準技術としてのWebGLが、ゲームやビジュアライゼーションなどの多くの場面で採用されています。
Three.js 入門編
まずは少ないコードでThree.jsの基本を学んでいきましょう。
Three.js 基本編
Three.jsには多彩な機能が存在します。機能を習得すればするほど、実現できる表現が増えていくでしょう。
Three.js 中級編
専門的な方法も覚えていきましょう。
Three.js 数値計算
3Dでは、三角関数やベクトルの計算をする場面が多いです。実例を通して、これらを学んでいきましょう。
Three.js 演出編
Three.jsを使った表現を作例を通して学びましょう。
- ゲーム演出に役立つマグマ表現
- RPGのセーブポイント風の魔法陣
- タイムリマップ表現
- アイコンフォント集Font Awesomeを扱う方法
- サウンドビジュアライザー
- エフェクト作成ツールのEffekseerがWebGLに対応。Web表現の新兵器となるか
WebGL シェーダー編
Three.jsだけだと実現できる表現の種類に限界があります。シェーダーをGLSLでカスタマイズすることで表現の種類を大きく広げられます。
WebGL 応用編
WebGLの最適化や次世代の仕様について理解を深めましょう。
VR表現
3Dの知識はバーチャルリアリティーの実装にも役立ちます。
Node.jsを使ったフロントエンド開発
効率のよい開発ができるよう、最新の開発環境の構築もしましょう。開発環境を整えれば最新のJavaScript言語仕様を利用でき、開発効率向上に役立つはずです。また、型定義のあるTypeScriptを使ってコード補完をフルに効かせて開発するのもおすすめです。
