HOME > natural science Laboratory > コンピュータ・シミュレーション講座 > 仮想物理実験室

「three.jsによるHTML5 3Dグラフィックス(下)」 出版決定(発売日:2014年1月25日)

文責:遠藤 理平 (2014年1月23日) カテゴリ:WebGL(46)仮想物理実験室(277)

978-4-87783-324-4.png

three.jsによるHTML5 3Dグラフィックス 〈下〉
ブラウザで実現するOpenGL(WebGL)の世界

著者 遠藤 理平
出版社 株式会社カットシステム
発売日 2014年1月25日
判型 B5変型判、304頁
税込価格 3,570円(本体3,400円)
ISBN 978-4-87783-331-2

はじめに

 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によるHTML5 3Dグラフィックス〈上〉」の続編です。three.jsを利用する上での必要事項を解説した〈上〉に対して、本書ではコンピュータ・グラフィックスの醍醐味であるテクスチャマッピングやシェーダー言語、各種データ形式による3次元オブジェクトの生成、スキンメッシュアニメーション、モーフィングアニメーションなどを取り上げます。なお、筆者の勉強不足のために、プログラムやクラスのプロパティ、メソッドの説明に間違いが有るかもしれません。その際はお手数ですが、ご指摘いただければ幸いです。

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

2014年1月 遠藤理平


目次

  • 第7章 マッピング
    • 7.1 テクスチャマッピング
      • 7.1.1 テクスチャマッピングとは
      • 7.1.2 テクスチャマッピングの実装方法
      • 7.1.3 Textureクラス
      • 7.1.4 canvas要素によるテクスチャ画像の生成と実装
    • 7.2 Textureクラスのプロパティ
      • 7.2.1 テクスチャラッピング方法の指定
      • 7.2.2 補間方法の指定
      • 7.2.3 ミップマップの用意
      • 7.2.4 異方性フィルダリング
      • 7.2.5 上下反転
    • 7.3 法線マッピング
      • 7.3.1 法線マッピングとは
      • 7.3.2 canvas要素による法線マッピング
      • 7.3.3 地球の法線マッピング
    • 7.4 鏡面マッピング
      • 7.4.1 鏡面マッピングとは
      • 7.4.2 canvas要素による鏡面マッピング
      • 7.4.3 地球の作り方
    • 7.5 バンブマッピング
      • 7.5.1 バンブマッピングとは
      • 7.5.2 エンボス効果
      • 7.5.3 月オブジェクトの作成
    • 7.6 ライトマッピング
    • 7.7 環境マッピング
      • 7.7.1 環境マッピングとは
      • 7.7.2 基本材質による反射マッピング
      • 7.7.3 反射材質による反射マッピング
      • 7.7.3 反射材質による反射マッピング
      • 7.7.4 基本材質による屈折マッピング
      • 7.7.5 反射材質による屈折マッピング
      • 7.7.6 バンプマッピング+環境マッピング
    • 7.8 キューブカメラによる環境マッピング
      • 7.8.1 キューブカメラとは
      • 7.8.2 キューブカメラを利用した環境マッピングの方法
      • 7.8.3 CubeCameraクラス
    • 7.9 スプライトオブジェクト
      • 7.9.1 スプライトオブジェクトの生成
      • 7.9.2 SpriteMaterialクラス
      • 7.9.3 Spriteクラス
    • 7.10 その他の画像形式
      • 7.10.1 DDS形式によるテクスチャマッピング
      • 7.10.2 CompressedTextureクラス
      • 7.10.3 データテクスチャによるマッピング
      • 7.10.4 DataTextureクラス
    • 7.11 ユーティリティ関数:ImageUtils関数
  • 第8章 様々なテクニック
    • 8.1 フォグ効果
      • 8.1.1 フォグ効果とは
      • 8.1.3 Fogクラス
      • 8.1.4 FogExp2クラス
    • 8.2 ブレンディング
      • 8.2.1 ブレンディングの基本形
      • 8.2.2 blendingプロパティの詳細
      • 8.2.3 カスタムブレンディング
      • 8.2.4 ポリゴンオフセット
    • 8.3 レンズフレア
      • 8.3.1 レンズフレアの実装
      • 8.3.2 LensFlareクラス
    • 8.4 バッファリング
      • 8.4.1 バッファーオブジェクトによる点と線の描画
      • 8.4.2 バッファーオブジェクトの頂点データの更新
      • 8.4.3 バッファーオブジェクトによる三角形オブジェクトの描画
      • 8.4.4 頂点インデックスの指定
      • 8.4.5 2^16個以上の頂点データを扱う場合(頂点インデックスの指定)
      • 8.4.6 BufferGeometryクラス
    • 8.5 オフスクリーンレンダリング
      • 8.5.1 オフスクリーンレンダリングとは
      • 8.5.2 オフスクリーンレンダリングの実装方法
      • 8.5.3 WebGLRenderTragetクラス
    • 8.6 モーフィング
      • 8.6.1 モーフィングによる頂点座標の補間
      • 8.6.2 モーフィングによる法線ベクトルの補間
      • 8.6.3 モーフィングによる頂点色の補間(未実装)
      • 8.6.4 モーフィングによるアニメーション
      • 8.6.5 MorphAnimMeshクラス
      • 8.6.6 Clockクラス
  • 第9章 シェーダー言語
    • 9.1 シェーダー言語の基本
      • 9.1.1 シェーダー言語とは
      • 9.1.2 シェーダー材質の基本形
      • 9.1.3 ShaderMaterialクラス
      • 9.1.4 シェーダープログラムにおける入力と出力
      • 9.1.5 バーテックスシェーダープログラムの意味
      • 9.1.6 フラグメントシェーダープログラムの意味
    • 9.2 バッファーオブジェクトによる頂点データの指定
      • 9.2.1 attribute変数、uniform変数、varying変数
      • 9.2.2 attribute変数:position(頂点座標)とcolor(頂点色)
      • 9.2.3 attribute変数:index(頂点インデックス)
      • 9.2.4 カスタムuniform変数の利用方法
      • 9.2.5 カスタムattribute変数の利用方法
    • 9.3 シェーダー材質によるテクスチャマッピング
      • 9.3.1 attribute変数:uv(テクスチャ座標)
      • 9.3.2 uv指定とテクスチャラッピング
      • 9.3.3 フラグメントシェーダーにおける色演算
      • 9.3.4 GLSL ES における組み込み関数
    • 9.4 平行光源・環境光源・点光源のシェーディング
      • 9.4.1 ランバート反射モデルの数理
      • 9.4.2 ランバート反射モデルの実装方法
      • 9.4.3 フォン反射モデルの数理
      • 9.4.4 フォン反射モデルの実装
      • 9.4.5 環境光の実装
      • 9.4.6 点光源によるシェーディング
      • 9.4.7 グローシェーディングについて
    • 9.5 球体オブジェクトへの適用例
      • 9.5.1 頂点座標のスライド
      • 9.5.2 頂点色のグラデーション
      • 9.5.3 頂点座標と頂点色の変更
    • 9.6 背景シェーダー
      • 9.6.1 スカイドームの作成
      • 9.6.2 背景テクスチャマッピング
      • 9.6.3 背景テクスチャマッピング+環境マッピング
      • 9.6.4 外部シェーダープログラムの利用:フレネル回折シェーダー
  • 第10章 データローディング
    • 10.1 JSON形式による3次元オブジェクト
      • 10.1.1 シンプルJSON形式
      • 10.1.2 JSONLoaderクラス
      • 10.1.3 Loaderクラス
      • 10.1.4 頂点色の利用
    • 10.2 OBJ形式による3次元オブジェクト
      • 10.2.1 OBJ形式について
      • 10.2.2 OBJ形式ローダー(OBJLoader.js)
      • 10.2.3 OBJLoaderクラス
      • 10.2.4 ImageLoaderクラス
    • 10.3 MTL形式+OBJ形式による3次元オブジェクト
      • 10.3.1 MTL形式について
      • 10.3.2 OBJMTL形式ローダー(OBJMTLLoader.js)
      • 10.3.3 MTLLoaderクラス
      • 10.3.4 OBJMTLLoaderクラス
    • 10.4 STL形式による3次元オブジェクト
      • 10.4.1 STL形式について
      • 10.4.2 STL形式ローダー(STLLoader.js)
      • 10.4.3 STLLoaderクラス
    • 10.5 PLY形式による3次元オブジェクト
      • 10.5.1 PLY形式について
      • 10.5.2 PLY形式ローダー(PLYLoader.js)
      • 10.5.3 PLYLoaderクラス
    • 10.6 VTK形式による3次元オブジェクト
      • 10.6.1 VTK形式について
      • 10.6.2 VTK形式ローダー(VTKLoader.js)
      • 10.6.3 VTKLoaderクラス
    • 10.7 バイナリー形式による3次元オブジェクト
      • 10.7.1 バイナリーローダー(BinaryLoader.js)
      • 10.7.2 バイナリーローダーにおける材質パラメータの利用
      • 10.7.3 バイナリーローダーにおける効果的な材質の設定方法
      • 10.7.4 BinaryLoaderクラス
      • 10.7.5 CTMローダー(CTMLoader.js)
      • 10.7.6 CTMLoaderクラス
      • 10.7.7 UTF8ローダー(UTF8Loader.js)
      • 10.7.8 UTF8Loaderクラス
  • 第11章 外部データによるアニメーション
    • 11.1 JSON形式によるスキンメッシュアニメーション
      • 11.1.1 スキンメッシュアニメーションの実装方法
      • 11.1.2 JSON形式データ内に記述された画像データによるテクスチャ
      • 11.2.3 SkinnedMeshクラス
      • 11.2.4 Animationクラス
      • 11.2.5 AnimationHandler関数
    • 11.2 JSON形式によるモーフィングアニメーション
      • 10.2.1 JSON形式のデータ構造
      • 10.2.2 モーフィングアニメーションの実装方法
      • 10.2.3 JSON形式データmorphColorsプロパティの利用
    • 11.3 Collada形式によるキーフレームアニメーション
      • 11.3.1 Collada形式について
      • 11.3.2 Collada形式によるキーフレームアニメーション
      • 11.3.3 ColladaLoaderクラス
      • 11.3.4 KeyFrameAnimationクラス

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

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

ファイル名説明
7.1.1Earth.htmlテクスチャマッピングと法線マッピングと鏡面マッピング+雲テクスチャマッピングを施した地球オブジェクト。
7.1.2test_texture.htmlテクスチャマッピングのテスト。
7.1.4texture_Gaussian.htmlテクスチャ用画像としてcanvas要素の描画内容を利用した例。
7.2.1texture_RepeatWrapping.htmlリピートラッピングの例。
7.2.3mipmap_test.htmlミップマップの例。
7.2.4texture_crate.html異方性フィルダリングのテスト。
7.3.2normal_test.html法線マッピングのテスト。
7.3.3Earth_normal.html地球の法線マッピングだけを球体オブジェクトに施した例。
7.4.2specular_test.html鏡面マッピングのテスト。
7.4.2Earth_specular.html地球の鏡面マッピングだけを球体オブジェクトに施した例。
7.5.1bump_test.htmlバンプマッピングのテスト。
7.5.2texture_bump.html画像データを用いたエンボス効果。
7.5.3Moon.htmlテクスチャマッピングとバンプマッピングを施した月オブジェクト。
7.6lightMap_test.htmlライトマッピングのテスト。
7.6lightMap_transparent.htmlアルファ値の指定したライトマッピングの例。
7.7.2reflection_test_basic.html発光材質に対する反射マッピングのテスト。
7.7.3reflection_test_phong.htmlフォン反射材質に対する反射マッピングのテスト。
7.7.3reflection_test_phong_ambient.html環境光源を加えたフォン反射材質に対する反射マッピングのテスト。
7.7.4refraction_test_basic.html発光材質に対す屈折マッピングのテスト。
7.7.5refraction_test_phong.htmlフォン反射材質に対する屈折マッピングのテスト。
7.7.6Moon_envmap.html
7.8.2cubeCamera_test.htmlキューブカメラによる反射マッピングのテスト。
7.8.2cubeCamera_test_refraction.htmlキューブカメラによる屈折マッピングのテスト。
7.8.2cubeCamera_test_refraction2.htmlキューブカメラによる屈折マッピングのテスト2。
7.9.1Sprite.htmlスプライトオブジェクト。
7.9.1Sprite2.htmlスプライトオブジェクト2。
7.10.1test_compressedTexture.htmlDDS形式画像によるテクスチャマッピングのテスト。
7.10.3test_dataTexture.htmlデータテクスチャのテスト。
8.1.1Fog.html線形フォグ効果の例。
8.1.1FogExp2.html指数フォグ効果の例。
8.2.1AdditiveBlending.html加算ブレンディングの例。
8.2.4polygonOffset.htmlポリゴンオフセットの例。
8.3.1LensFlare.htmlレンズフレアの例。
8.4.1BufferGeometry_ParticleSystem.htmlバッファー形状オブジェクトを利用した点集合オブジェクトの例。
8.4.1BufferGeometry_Line.htmlバッファー形状オブジェクトを利用した線オブジェクトの例。
8.4.2BufferGeometry_ParticleSystem_dynamic.htmlバッファー形状オブジェクトを利用した点集合オブジェクトにて頂点座標を時間変化させたの例。
8.4.3BufferGeometry_MeshBasicMaterial.htmlバッファー形状オブジェクトと発光材質による三角形オブジェクトの例。
8.4.3BufferGeometry_MeshPhongMaterial.htmlバッファー形状オブジェクトとフォン反射材質による三角形オブジェクトの例。
8.4.4BufferGeometry_MeshBasicMaterial_dynamic.htmlバッファー形状オブジェクトと発光材質による三角形オブジェクトを動的に生成した例。
8.4.5BufferGeometry_MeshPhongMaterial_chunk.htmlバッファー形状オブジェクトとフォン反射材質による三角形オブジェクトを21845個以上生成する例。
8.5.1RRT.htmlオフスクリーンレンダリングの例
8.6.1morphTargets.html頂点モーフィングの例。
8.6.2morphTargets_lambert.html法線ベクトルモーフィングの例。
8.6.3morphTargets_colors_未実装.html頂点色モーフィングの例(r58未実装)。
8.6.4morphTargets_animation.html頂点モーフィングアニメーションの例。
9.1.2ShaderMaterial.htmlシェーダー材質の基本形。
9.1.2ShaderMaterial_string.htmlシェーダープログラムを文字列として直接与えた例。
9.1.3ShaderMaterial_wireframe.htmlシェーダー材質におけるワイヤーフレーム表示。
9.1.5ShaderMaterial_2.htmlシェーダー材質の基本形2。
9.1.5ShaderMaterial_3.htmlシェーダー材質の基本形3。
9.1.6ShaderMaterial_gl_FragCoord.htmlgl_FragCoordによる頂点色の指定の例。
9.2.2triangle.htmlシェーダー材質を利用した三角形オブジェクト。
9.2.3square.htmlシェーダー材質を利用した四角形オブジェクト。
9.2.4triangle_uniforms.htmlシェーダー材質を利用した三角形オブジェクトをuniform変数を用いて操作した例。
9.2.5triangle_attributes.htmlシェーダー材質を利用してテクスチャマッピングを施した例。
9.3square_texture.html補間方法による違いの例。
9.3.2square_texture_filter.htmlリピート方法の違いの例。
9.3.2square_texture_repeat.html三角形オブジェクトにテクスチャマッピング。
9.3.2triangle_texture.html自前ランバート反射材質を実装した平面オブジェクト。
9.3.4square_texture_mix.htmlmix関数によるテクセルと頂点色の混合。
9.4.2square_castumLambert.html自前ランバート反射材質を実装した平面オブジェクト(両面)。
9.4.2square_castumLambert_doubleside.html自前フォン反射材質を実装した平面オブジェクト。
9.4.4square_castumPhong.html自前修正フォン反射材質を実装した平面オブジェクト。
9.4.4square_castumPhong2.html平行光源と環境光源に対する自前ランバート反射材質による立方体オブジェクト。
9.4.5cube_castumLambert_ambient.html平行光源と環境光源に対する自前ランバート反射材質による立方体オブジェクトをattribute変数で操作した例。
9.4.5square_castumPhong_point.html平行光源と環境光源に対する自前フォン反射材質による立方体オブジェクト。
9.4.5cube_castumLambert.html平行光源に対する自前ランバート反射材質による立方体オブジェクト。
9.4.5cube_castumLambert_attribute.html点光源に対する自前ランバート反射材質による平面オブジェクト。
9.4.6square_castumLambert_point.html点光源に対する自前フォン反射材質による平面オブジェクト。
9.4.6square_castumLambert_Gouraud.htmlグローシェーディングによる平行光源の実装。
9.4.6square_castumLambert_Gouraud_point.htmlグローシェーディングによる点光源の実装
9.5.1cube_castumPhong_ambient.htmlシェーダプログラムによる球体オブジェクトの分割。
9.5.1sphere_castumPhong_ambient.htmlシェーダプログラムによる頂点色のグラデーション。
9.5.2sphere_castumPhong_ambient_marble.htmlシェーダプログラムによる頂点色のグラデーション。
9.5.2sphere_castumPhong_ambient_marble2.htmlシェーダプログラム内で、ワールド座標系による位置座標を用いて頂点色を決定する例。
9.5.3sphere_castumPhong_ambient_marble_apple.htmlシェーダプログラムによる頂点座標と頂点色の変更。
9.6.1skydome.html球体オブジェクトによるスカイドーム。
9.6.2skybox.html背景テクスチャマッピング。
9.6.2skybox_z.htmlz軸方向を上向きとした背景テクスチャマッピング
9.6.3skybox_envMap.html背景テクスチャマッピングに対する環境マッピング。
9.6.3skybox_envMap_cubeCamera.html背景テクスチャマッピングに対するキューブカメラを利用した環境マッピング。
9.6.3skybox_envMap_cubeCamera2.html背景テクスチャマッピングに対するキューブカメラを利用した環境マッピング。
9.6.4skybox_FresnelShader.html背景テクスチャマッピングに対するフレネル回折シェーダー。
10.1.1JSON_LeePerrySmith.htmlJSON形式のスミス氏。
10.1.1JSON_LeePerrySmith_lambert.htmlJSON形式のスミス氏(テクスチャマッピング+ランバート反射材質)。
10.1.1JSON_Lucy.htmlJSON形式のルーシーさん(フォン反射材質)。
10.1.1JSON_LeePerrySmith_lambert_canvas.htmlJSON形式のスミス氏(Canvas2D)。
10.1.4JSON_cubecolors.htmlJSON形式による立方体オブジェクト。
10.2.2OBJLoader_male.htmlOBJ形式の男性。
10.3.2MTLLoader_male.htmlMTL形式の男性。
10.4.2STLLoader_slotted_disk.htmlSTL 形式の溝付円盤。
10.5.2PLYLoader_dolphins.htmlPLY 形式のイルカたち。
10.6.2VTKLoader_bunny.htmlVTK形式のうさぎ。
10.7.1BinaryLoader_Lucy.htmlバイナリーフォーマットのルーシーさん。
10.7.2BinaryLoader_f50_materials.htmlバイナリーフォーマットのフェラーリF50
10.7.3BinaryLoader_f50.htmlバイナリーフォーマットのフェラーリF50(環境マッピング)
10.7.5CTMLoader_ben.htmlCTM形式のベン氏。
10.7.5CTMLoader_camaro.htmlCTM形式のカマロ。
10.8.1UTF8Loader_ben.htmlUTF8形式のベン氏。
11.1.1JSON_buffalo.htmlバッファローのスキンメッシュアニメーション。
11.1.2JSON_buffalo_lambert.htmlバッファローのスキンメッシュアニメーション(テクスチャマッピング+ランバート反射材質)。
11.1.5JSON_human.htmlスキンメッシュアニメーションの人間。
11.1.5JSON_knight.htmlスキンメッシュアニメーションの騎士。
11.2.2JSON_monster.htmlモーフィングアニメーションのモンスター。
11.2.2JSON_monster_lambert.htmlモーフィングアニメーションのモンスター(ランバート反射材質)。
11.2.3JSON_flamingo.htmlモーフィングアニメーションのフラミンゴ。
11.3.1ColladaLoader_monster.htmlCollada形式のモンスター(モーフィングアニメーション)。
11.3.2ColladaLoader_pump.htmlCollada 形式によるキーフレームアニメーション。

サンプルプログラム実行例(画面キャプチャ)



▲このページのトップNPO法人 natural science トップ

関連記事

WebGL

仮想物理実験室







▲このページのトップNPO法人 natural science トップ