「three.jsによるHTML5 3Dグラフィックス（上）」 出版決定（発売日：2013年9月25日）

three.jsによるHTML5 3Dグラフィックス　上
ブラウザで実現するOpenGL（WebGL）の世界

著者　遠藤 理平
出版社　株式会社カットシステム
発売日　2013年9月25日
判型　B5変型判、324頁
税込価格　3,570円（本体3,400円）
ISBN　978-4-87783-324-4

はじめに

　HTML5の登場により、ブラウザで動いているとはとても思えないようなハイクオリティな3Dグラフィックスを、特殊な環境を必要とせずに、ブラウザとテキストエディタのみで、ネイティブアプリケーション並みなハイパフォーマンスで実装できる時代が到来しました。これを可能としたのが、HTML5で初めて登場したWebGLという新しい規格です。しかしながら、WebGLは非常に精密なグラフィクスを制作できる反面、難解で非常に敷居が高いと言われており、WebGLを簡単に取り扱えるライブラリが望まれていました。そこで登場したのが、本書で取り扱うthree.jsです。本書は、HTML5で3Dグラフィックスを実現するthree.jsの使い方を、コンピュータグラフィクス未経験者でも理解できる手順で、豊富なサンプルを用いて実践的に学んでいくことを目的としています。

　ウェブページ作成用の記述言語であるHTMLは、通信技術の飛躍的発展や、ウェブブラウザの機能拡充に伴い、テキストがメインであったHTML4から、プラグインなしにインタラクティブなアプリケーション作成が可能なHTML5へ、劇的な進化を遂げました。グラフィクスを取り扱う要素も、画像をあくまでサブ的な情報と位置づけていたHTML4ではimg要素のみだったのに対して、HTML5では、canvas、video、svgといった要素が一挙に増えました。発展目覚ましいグラフィック要素の中でも、本書ではタイトルの通り3Dグラフィックスを作成するcanvas要素に絞ります。このcanvas要素を使って3Dグラフィックスを実行するのが、WebGLというOpenGL（Open Graphic Library）のウェブブラウザ版です。

　OpenGLは、グラフィックスの演算・出力に特化したGPU（Graphics Processing Unit）を用いてグラフィックスを出力するための新規格です。描画演算にGPUを使うおかげで、ハードウェアの真の力を引き出し高速かつ高性能な描画が可能である点が最大の強みです。これまでもGPUは、リアリティが要求されるゲームや映画等のエンターテインメント分野において先行して使われてきましたが、これまでプラウザでは利用が不可能でした。人々の要求が高まるにつれ、ブラウザはGPUの機能を最大限に引き出そうと進化を遂げ、それが、WebGLの登場につながりました。2013年、ブラウザで最大シェアを誇るIE（InternetExplorer）においても最新バージョン（IE11）でWebGLが解禁されたことにも象徴されるように、WebGL実行環境標準化の流れはモバイルも含めて、さらに進んで行くことと期待されます。

　そんなWebGLを簡単に取り扱えるライブラリとして登場したthree.js。WebGLだけでなく、Canvas 2D Context やSVG、CSS3といった、HTML5で利用できるグラフィクス要素を統一的に取り扱うことが可能なライブラリであり、HTML5のグラフィックスにおけるライブラリのデファクトスタンダードとして、今後成長が見込まれています（※WebGLとCanvas 2D Contextは実用レベルですが、残りの二つは開発段階であり実用化が待たれるところです）。three.jsの作者たちによって用意された、見栄えの素晴らしいサンプルを見れば、勉強心が刺激されるでしょう。ただ、公式ページにはドキュメントが用意されているものの、未完成部分も多く、学習が難しいとも言われています。three.jsを用いたHTML5による3Dグラフィクスを理解する一助として、本書がお役に立てれば幸いです。なお、筆者の勉強不足のために、プログラムやクラスのプロパティ、メソッドの説明に間違いが有るかもしれません。その際はお手数ですが、ご指摘いただければ幸いです。

　最後に、本書の執筆の機会を頂きました株式会社カットシステムの石塚勝敏さん、今回も厳しいスケジュールのなか丁寧な編集を行なって頂きました株式会社チューリングの鈴木光治さん、three.jsにてクラスのプロパティとメソッドの整理のお手伝いをして頂きました東北大学大学院情報科学研究科博士課程前期1年の藤原脩くん、また、日常的に議論に付き合って頂いている特定非営利活動法人natural scienceの皆さんには、深く感謝申し上げます。

2013年9月 遠藤理平

目次

• 第１章　HTML5グラフィックス
  • 1.1　HTMLとグラフィックス
    • 1.1.1 HTML4からHTML5への進化
    • 1.1.2 Canvas 2D ContexとWebGL Context
    • 1.1.3 WebGL利用上の注意点
  • 1.2　HTML5文書の基本形
    • 1.2.1 はじめてのHTML5文書
    • 1.2.2 HTMLの文法チェック
    • 1.2.3 img要素による三角形の描画
  • 1.3　動的な三角形の描画（DHTML）
    • 1.3.1 DHTMLとは
    • 1.3.2 CSSによるボックス領域の確保
    • 1.3.3 JavaScriptによるHTML要素の生成
  • 1.4　Canvas 2D Contextによる三角形の描画
  • 1.5　WebGL Contextによる三角形の描画
  • 1.6　SVGによる三角形の描画
• 第２章　three.jsの基礎
  • 2.1　three.jsの準備
    • 2.1.1 three.jsの特徴
    • 2.1.2 three.jsによる「Canvas 2D Context」
    • 2.1.3 ダウンロードと環境設定
  • 2.2　three.jsの基本形
    • 2.2.1 軸オブジェクトの描画プログラムソース
    • 2.2.2 HTML文書の準備（AxisHelper.html）
    • 2.2.3 three.jsスタート関数の定義
    • 2.2.4 three.js初期化関数の定義
    • 2.2.5 カメラ初期化関数の定義
    • 2.2.6 オブジェクト初期化関数の定義
    • 2.2.7 描画関数の定義
  • 2.3　レンダラーオブジェクトとシーンオブジェクト
    • 2.3.1 WebGLRendererクラス
    • 2.3.2 CanvasRendererクラス
    • 2.3.3 Sceneクラス
  • 2.4　軸オブジェクトと矢印オブジェクト
    • 2.4.1 AxisHelperクラス
    • 2.4.2 ArrowHelperクラス
  • 2.5　透視投影カメラと正投影カメラ
    • 2.5.1 Cameraクラス
    • 2.5.2 PerspectiveCameraクラス
    • 2.5.3 OrthographicCameraクラス
• 第３章　3次元オブジェクトの描画
  • 3.1　立方体オブジェクトの描画方法
    • 3.1.1 形状オブジェクトと材質オブジェクト
    • 3.1.2 立方体オブジェクトの描画
    • 3.1.3 CubeGeometryクラス
    • 3.1.4 MeshNormalMaterialクラス
    • 3.1.5 Meshクラス
  • 3.2　様々な形状オブジェクト
    • 3.2.1 PlaneGeometryクラス
    • 3.2.2 CircleGeometryクラス
    • 3.2.3 SphereGeometryクラス
    • 3.2.4 CylinderGeometryクラス
    • 3.2.5 TorusGeometryクラス
    • 3.2.6 ConvexGeometryクラス
    • 3.2.7 PolyhedronGeometryクラス
    • 3.2.8 LatheGeometryクラス
    • 3.2.9 TetrahedronGeometryクラス
    • 3.2.10 OctahedronGeometryクラス
    • 3.2.11 IcosahedronGeometryクラス
    • 3.2.12 TorusKnotGeometryクラス
    • 3.2.13 ParametricGeometryクラス
    • 3.2.14 TubeGeometryクラス
    • 3.2.15 ShapeGeometryクラス
    • 3.2.16 ExtrudeGeometryクラス
    • 3.2.17 TextGeometryクラス
  • 3.3　材質オブジェクトの基底クラス
    • 3.3.1 Materialクラス
    • 3.3.2 MeshBasicMaterialクラス
    • 3.3.3 MeshDepthMaterialクラス
    • 3.3.4 Colorクラス
  • 3.4　形状オブジェクトの基底クラス
    • 3.4.1 Geometryクラス
    • 3.4.2 Face3クラス
    • 3.4.3 Face4クラス
  • 3.5　点オブジェクト
    • 3.5.1 点オブジェクトの生成方法（WebGL）
    • 3.5.2 ParticleBasicMaterialクラス
    • 3.5.3 ParticleSystemクラス
    • 3.5.4 異なる色点の描画
    • 3.5.5 点オブジェクトの生成方法（Canvas2D）
    • 3.5.6 Particleクラス
    • 3.5.7 任意の形状の点オブジェクト（Canvas2D）
    • 3.5.8 ParticleCanvasMaterialクラス
  • 3.6　線オブジェクト
    • 3.6.1 線オブジェクトの生成方法（WebGL）
    • 3.6.2 LineBasicMaterialクラス
    • 3.6.3 Lineクラス
    • 3.6.4 色補完直線の描画
    • 3.6.5 破線の描画
    • 3.6.6 LineDashedMaterialクラス
    • 3.6.7 スプライン補完による補完曲線の描画
    • 3.6.8 Splineクラス
  • 3.7　三角形オブジェクト
    • 3.7.1 三角形オブジェクトの生成方法
    • 3.7.2 色補間三角形の描画手順
    • 3.7.3 Face4クラスによる四角形オブジェクトの描画
  • 3.8　その他のオブジェクト
    • 3.8.1 LODオブジェクト
    • 3.8.2 LODクラス
    • 3.8.3 リボンオブジェクト
    • 3.8.4 Ribbonクラス
    • 3.8.5 面材質による立方体オブジェクト
    • 3.8.6 MeshFaceMaterialクラス
  • 3.9　精密な形状オブジェクトの生成方法
    • 3.9.1 Pathクラス
    • 3.9.2 Shapeクラス
• 第４章　3次元オブジェクトの制御
  • 4.1　様々な数学クラス
    • 4.1.1 Vector2クラス
    • 4.1.2 Vector3クラス
    • 4.1.3 Vector4クラス
    • 4.1.4 Matrix3クラス
    • 4.1.5 Matrix4クラス
    • 4.1.6 Quaternionクラス
    • 4.1.7 Mathユーティリティ
  • 4.2　移動・回転・拡大
    • 4.2.1 Object3Dクラス
    • 4.2.2 位置座標の指定
    • 4.2.3 オイラー角による回転角の指定
    • 4.2.4 クオータニオンによる回転角の指定
    • 4.2.5 3次元オブジェクトの拡大と縮小
  • 4.3　three.jsによるアニメーション
    • 4.3.1 JavaScriptによるアニメーション
    • 4.3.2 アニメーション実行のための構成
    • 4.3.3 カメラ移動のアニメーション
  • 4.4　マウスによるカメラコントロール
    • 4.4.1 トラックボールコントロール
    • 4.4.2 TrackballControlsクラス
    • 4.4.3 フライコントロール
    • 4.4.4 任意のカメラの向きと上ベクトルを指定する方法【中級】
    • 4.4.5 FlyControlsクラス
    • 4.4.6 ポインタロックコントロール
    • 4.4.7 PointerLockControlsクラス
    • 4.4.8 OrbitControlsクラス
    • 4.4.9 PathControlsクラス
    • 4.4.10 FirstPersonControlsクラス
  • 4.5　マウスによるオブジェクトの操作
    • 4.5.1 マウスポインタによるオブジェクトの選択
    • 4.5.2 Raycasterクラス
    • 4.5.3 Rayクラス
    • 4.5.4 Projectorクラス
    • 4.5.5 マウスドラックによるオブジェクトの移動
    • 4.5.6 マウスドラックによるオブジェクトの移動＋トラックボールコントロール
• 第５章　シェーディング
  • 5.1　シェーディングの基本
    • 5.1.1 シェーディングの必要性
    • 5.1.2 光源の設定
    • 5.1.3 反射材質の設定
    • 5.1.4 法線の設定
  • 5.2　平行光源オブジェクトの準備
    • 5.2.1 平行光源とは
    • 5.2.2 Lightクラス
    • 5.2.3 DirectionalLightクラス
    • 5.2.4 DirectionalLightHelperクラス
  • 5.3　反射材質オブジェクトの準備
    • 5.3.1 反射材質とは
    • 5.3.2 ランバート反射材質
    • 5.3.3 MeshLambertMaterialクラス
    • 5.3.4 フォン反射材質
    • 5.3.5 MeshPhongMaterialクラス
  • 5.4　法線の設定
    • 5.4.1 メソッドによる自動計算
    • 5.4.2 Face3クラスのプロパティへの手動設定１
    • 5.4.3 Face3クラスのプロパティへの手動設定２
• 第６章　ライティングとシャドーイング
  • 6.1　点光源
    • 6.1.1 点光源とは
    • 6.1.2 点光源とポリゴン数
    • 6.1.3 PointLightクラス
    • 6.1.4 PointLightHelperクラス
    • 6.1.5 点光源の移動サンプル
  • 6.2　スポットライト光源
    • 6.2.1 スポットライト光源とは
    • 6.2.2 スポットライト光源のパラメータ
    • 6.2.3 SpotLightクラス
    • 6.2.4 SpotLightHelperクラス
    • 6.2.5 スポットライト光源のターゲットの設定
  • 6.3　環境光源
    • 6.3.1 環境光源とは
    • 6.3.2 環境光源を実装する際の注意点
    • 6.3.3 AmbientLightクラス
  • 6.4　半球光源オブジェクト
    • 6.4.1 半球光源とは
    • 6.4.2 HemisphereLightクラス
    • 6.4.3 HemisphereLightHelperクラス
  • 6.5　シャドーイングの方法
    • 6.5.1 影の必要性
    • 6.5.2 影描画の手法と実装手順
    • 6.5.3 影の高精密化
    • 6.5.4 シャドーカメラの可視化
    • 6.5.5 スポットライト光源によるシャドーイング
    • 6.5.6 点光源によるシャドーイング

付属サンプルプログラム一覧

本書で取り扱ったすべての題材にはサンプルプログラムが用意されています。