「three.jsによるHTML5グラフィックス下【改定版】」出版決定（発売日：2016年10月25日）

文責：遠藤理平（2016年10月18日）カテゴリ：OpenGL入門(27)

three.jsによるHTML5グラフィックス下　【改定版】
ブラウザで実現するOpenGL（WebGL）の世界

著者　遠藤理平
出版社　株式会社カットシステム
判型　B5変型、400頁
本体価格 4,000円（税込 4,320円）
ダウンロードサービス：学習に使えるサンプルファイル
ISBN　978-4-87783-407-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の登場につながりました。2016年、ウェブブラウザで最大シェアを誇るIE（InternetExplorer）の最新バージョン（IE11）を含め、主要ウェブブラウザのすべてでWebGLが実行可能となり、いよいよ普及期に入ってきました。

　そんなWebGLだけでなく Canvas 2D Context やSVG、CSS3といったHTML5で利用できるグラフィクス要素を統一的に取り扱うことが可能なライブラリとしてデファクトスタンダードとしての地位を確立してきたthree.js。近年注目を集めている様々なセンサーと組み合わせることで実現することのできる仮想現実（VR）や拡張現実（AR）といった３次元グラフィックスの新たな利用方法にも対応していることから、three.jsは今後ますます利用する機会も増えてくると考えています。

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

　最後に、本書の執筆の機会を頂きました株式会社カットシステムの石塚勝敏さん、製作作業にあたられた同社編集部の皆さん、また、日常的に議論に付き合って頂いている特定非営利活動法人natural science の皆さんには、深く感謝申し上げます。

2016年10月
遠藤理平

第９章マッピング
- 9.1 テクスチャマッピング
  - 9.1.1 テクスチャマッピングとは
  - 9.1.2 テクスチャマッピングの実装方法
  - 9.1.3 Textureクラス
  - 9.1.4 TextureLoaderクラス
  - 9.1.5 ImageLoaderクラス
  - 9.1.6 canvas要素によるテクスチャ画像の生成と実装
  - 9.1.7 ローカル環境による画像読み込みエラーの回避方法
  - 9.1.8 GoogleChromeのWebGL実行時RENDER WARNING
- 9.2 Textureクラスのプロパティ
  - 9.2.1 テクスチャラッピング方法の指定
  - 9.2.2 補間方法の指定
  - 9.2.3 ミップマップの用意
  - 9.2.4 異方性フィルダリング
  - 9.2.5 上下反転
- 9.3 法線マッピング
  - 9.3.1 法線マッピングとは
  - 9.3.2 canvas要素による法線マッピング
  - 9.3.3 地球の法線マッピング
- 9.4 鏡面マッピング
  - 9.4.1 鏡面マッピングとは
  - 9.4.2 canvas要素による鏡面マッピング
  - 9.4.3 地球の作り方
- 9.5 バンブマッピング
  - 9.5.1 バンブマッピングとは
  - 9.5.2 エンボス効果
  - 9.5.3 月オブジェクトの作成
- 9.6 頂点変位マッピング
  - 9.6.1 頂点変位マッピングとは
  - 9.6.2 canvas要素による頂点変位マッピング
  - 9.6.3 頂点変位マッピングの実装方法
- 9.7 ライトマッピング
  - 9.7.1 ライトマッピングとは
  - 9.7.2 canvas要素によるライトマッピング
- 9.8 環境閉塞マッピング
  - 9.8.1 環境閉塞マッピングとは
  - 9.8.2 canvas要素による環境閉塞マッピング
- 9.9 アルファマッピング
  - 9.9.1 アルファマッピングとは
  - 9.9.2 canvas要素によるアルファマッピングとは
- 9.10 立方体型環境マッピング
  - 9.10.1 立方体型環境マッピングとは
  - 9.10.2 CubeTextureクラス
  - 9.10.3 CubeTextureLoaderクラス
  - 9.10.4 発光材質による反射マッピング
  - 9.10.5 反射材質による反射マッピング
  - 9.10.6 発光材質による屈折マッピング
  - 9.10.7 反射材質による屈折マッピング
  - 9.10.8 バンプマッピング＋環境マッピング
- 9.11 円筒型環境マッピングと球型環境マッピング
  - 9.11.1 円筒型環境マッピング
  - 9.11.2 球型環境マッピング
  - 9.12 発光色マッピング
第10章マッピング関連テクニック
- 10.1 動画テクスチャマッピング
  - 10.1.1 動画テクスチャマッピングとは
  - 10.1.2 VideoTextureクラス
- 10.2 データテクスチャマッピング
  - 10.2.1 データテクスチャマッピング
  - 10.2.2 DataTextureクラス
- 10.3 オフスクリーンレンダリング
  - 10.3.1 オフスクリーンレンダリングとは
  - 10.3.2 オフスクリーンレンダリングの実装方法
  - 10.3.3 WebGLRenderTargetクラス
  - 10.3.4 デプスバッファーの可視化
  - 10.3.5 DepthTextureクラス
- 10.4 キューブカメラによる環境マッピング
  - 10.4.1 キューブカメラとは
  - 10.4.2 キューブカメラを利用した環境マッピングの実装方法
  - 10.4.3 CubeCameraクラス
- 10.5 圧縮画像によるテクスチャマッピング
  - 10.5.1 圧縮テクスチャマッピングとは
  - 10.5.2 DDSLoaderクラス
  - 10.5.3 PVRLoaderクラス
  - 10.5.4 CompressedTextureクラス
  - 10.5.5 CompressedTextureLoaderクラス
- 10.6 スプライトオブジェクトへのテクスチャマッピング
  - 10.6.1 スプライトオブジェクトの生成
  - 10.6.2 スプライトオブジェクトへのテクスチャマッピング
第11章様々なテクニック
- 11.1 ブレンディング
  - 11.1.1 ブレンディングとは
  - 11.1.2 blendingプロパティの詳細
  - 11.1.3 カスタムブレンディング
  - 11.1.4 カスタムブレンディングの例
- 11.2 フォグ効果
  - 11.2.1 フォグ効果とは
  - 11.2.3 Fogクラス
  - 11.2.4 FogExp2クラス
- 11.3 レンズフレア
  - 11.3.1 レンズフレアの実装
  - 11.3.2 LensFlareクラス
- 11.4 モーフィング
  - 11.4.1 モーフィングによる頂点座標の補間
  - 11.4.2 モーフィングによる法線ベクトルの補間
  - 11.4.3 モーフィングによるアニメーション
  - 11.4.4 MorphBlendMeshクラス
  - 11.4.5 Clockクラス
- 11.5 ３次元オブジェクトをパラメータ更新方法のまとめ
  - 11.5.1 頂点座標の操作
  - 11.5.2 面法線ベクトルの操作
  - 11.5.3 頂点色の操作
  - 11.5.4 テクスチャ座標の操作
  - 11.5.5 ポリゴン面頂点インデックスの操作
  - 11.5.6 ポリゴン面材質インデックスの操作
  - 11.5.7 MultiMaterialクラス
  - 11.5.8 累積距離の更新
  - 11.5.9 ポリゴンオフセット
  - 11.5.10 スプライン補完による補完曲線の描画
  - 11.5.11 Splineクラス
  - 11.5.12 ワールド座標系に対する任意軸回転
- 11.6 点音源の設定
  - 11.6.1 点音源の実装
  - 11.6.2 AudioListenerクラス
  - 11.6.3 Audioクラス
  - 11.6.4 PositionalAudioクラス
  - 11.6.5 AudioAnalyserクラス
  - 11.6.6 AudioLoaderクラス
- 11.7 カメラの利用方法の紹介
  - 11.7.1 ログスケールカメラワーク
  - 11.8.2 デバイスによるカメラコントロール
  - 11.8.3 立体視のためのレンダリング紹介
  - 11.8.4 WebVR APIを用いたバーチャルリアリティ
- 11.8 クリッピング
  - 11.8.1 クリッピングとは
  - 11.8.2 ローカルクリッピング
  - 11.8.3 グローバルクリッピング
- 11.9 イベント管理EventDispatcherクラス
第12章シェーダー言語入門
- 12.1 バッファーオブジェクト
  - 12.1.1 バッファーオブジェクトによる点と線の描画
  - 12.1.2 バッファーオブジェクトの頂点データの更新
  - 12.1.3 バッファーオブジェクトによる三角形オブジェクトの描画
  - 12.1.4 BufferGeometryクラス
  - 12.1.5 BufferAttributeクラス
  - 12.1.6 頂点インデックスの指定
  - 12.1.7 頂点インデックスの描画範囲の指定
  - 12.1.8 形状バッファーオブジェクトとは
- 12.2 シェーダー言語の基本
  - 12.2.1 シェーダー言語とは
  - 12.2.2 シェーダー材質の基本形
  - 12.2.3 ShaderMaterialクラス
  - 12.2.4 シェーダープログラムにおける入力と出力
  - 12.2.5 バーテックスシェーダープログラムの意味
  - 12.2.6 フラグメントシェーダープログラムの意味
- 12.3 バッファーオブジェクトによる頂点データの指定
  - 12.3.1 attribute変数、uniform変数、varying変数
  - 12.3.2 attribute変数：position（頂点座標）とcolor（頂点色）
  - 12.3.3 頂点インデックス：index
  - 12.3.4 カスタムuniform変数の利用方法
  - 12.3.5 カスタムattribute変数の利用方法
- 12.4 シェーダー材質オブジェクトによるテクスチャマッピング
  - 12.4.1 attribute変数：uv（テクスチャ座標）
  - 12.4.2 uv指定とテクスチャラッピング
  - 12.4.3 フラグメントシェーダーにおける色演算
  - 12.4.4 GLSL ES における組み込み関数
- 12.5 GLSLシェーダー材質オブジェクトの利用方法
  - 12.5.1 GLSLシェーダー材質オブジェクトとは
  - 12.5.2 GLSLシェーダー材質オブジェクトの実装例
  - 12.5.3 RawShaderMaterialクラス
- 12.6 既存形状オブジェクト利用時の注意点
第13章シェーダー言語の実装例
- 13.1 自作反射材質の実装
  - 13.1.1 ランバート反射モデルの数理
  - 13.1.2 ランバート反射モデルの実装方法
  - 13.1.3 フォン反射モデルの数理
  - 13.1.4 フォン反射モデルの実装
  - 13.1.5 GLSLシェーダー材質オブジェクトによる実装方法
- 13.2 環境光源と点光源によるシェーディング
  - 13.2.1 環境光の実装
  - 13.2.2 点光源によるシェーディング
  - 13.2.3 グローシェーディングについて
- 13.3 球体オブジェクトへの適用例
  - 13.3.1 頂点座標のスライド
  - 13.3.2 頂点色のグラデーション
  - 13.3.3 頂点座標と頂点色の変更
- 13.4 背景シェーダー
  - 13.4.1 スカイドームの作成
  - 13.4.2 背景テクスチャマッピング
  - 13.4.3 背景テクスチャマッピング＋環境マッピング
  - 13.4.4 外部シェーダープログラムの利用：フレネル回折シェーダー
  - 13.4.5 鏡材質オブジェクト
第14章３次元オブジェクトデータローディング
- 14.1 JSON形式による３次元オブジェクト
  - 14.1.1 JSON形式とは
  - 14.1.2 JSON形式データからの３次元オブジェクト生成
  - 14.1.3 JSONLoaderクラス
  - 14.1.4 頂点色の利用
- 14.2 three.jsにおけるデータローディングの仕組み
  - 14.2.1 単一外部リソースローディング進捗状況の把握
  - 14.2.2 複数外部リソースローディング進捗状況の把握
  - 14.2.3 LoadingManagerクラス
  - 14.2.4 XHRLoaderクラス
- 14.3 OBJ形式による３次元オブジェクト
  - 14.3.1 OBJ形式について
  - 14.3.2 OBJ形式データからの３次元オブジェクト生成
  - 14.3.3 OBJLoaderクラス
- 14.4 STL形式による３次元オブジェクト
  - 14.4.1 STL形式について
  - 14.4.2 STL形式データからの３次元オブジェクト生成
  - 14.4.3 STLLoaderクラス
- 14.5 PLY形式による３次元オブジェクト
  - 14.5.1 PLY形式について
  - 14.5.2 PLY形式データからの３次元オブジェクト生成
  - 14.5.3 PLYLoaderクラス
- 14.6 VTK形式による３次元オブジェクト
  - 14.6.1 VTK形式について
  - 14.6.2 VTK形式データからの３次元オブジェクト生成
  - 14.6.3 VTKLoaderクラス
- 14.7 AMFLoaderクラス
  - 14.7.1 AMF形式について
  - 14.7.2 AMF形式データからの３次元オブジェクト生成
  - 14.7.3 AMFLoaderクラス
- 14.8 BabylonLoaderクラス
  - 14.8.1 Babylon形式について
  - 14.8.2 Babylon形式データからの３次元オブジェクト生成
  - 14.8.3 BabylonLoaderクラス
- 14.9 CTM形式による３次元オブジェクト
  - 14.9.1 CTM形式データからの３次元オブジェクト生成
  - 14.9.2 CTM形式データへのテクスチャマッピング
  - 14.9.3 CTMLoaderクラス
- 14.10 バイナリー形式による３次元オブジェクト
  - 14.10.1 バイナリー化されたOBJ形式データ
  - 14.10.2 バイナリーローダーにおける材質パラメータの利用
  - 14.10.3 バイナリーローダーにおける効果的な材質の設定方法
  - 14.10.4 BinaryLoaderクラス
- 14.11 MTL形式＋OBJ形式による３次元オブジェクト
  - 14.11.1 MTL形式について
  - 14.11.2 MTL形式＋OBJ形式データからの３次元オブジェクト生成
  - 14.11.3 MTLLoaderクラス
- 14.12 PCDLoaderクラス
  - 14.12.1 PCD形式について
  - 14.12.2 PCD形式データからの３次元オブジェクト生成
  - 14.12.3 PCDLoaderクラス
- 14.13 PDB形式による結晶構造オブジェクトの生成
  - 14.13.1 PDB形式について
  - 14.13.2 PDB形式データからの３次元オブジェクト生成
  - 14.13.3 PDBLoaderクラス
- 14.14 その他のデータ形式
  - 14.14.1 ThreeMFLoaderクラス
  - 14.14.2 AWDLoaderクラス
  - 14.14.3 AssimpJSONLoaderクラス
  - 14.14.4 VRMLLoaderクラス
第15章外部データによるアニメーション
- 15.1 アニメーションミキサーによる制御
  - 15.1.1 アニメーションミキサーとは
  - 15.1.2 AnimationMixerクラス
  - 15.1.3 AnimationActionクラス
- 15.2 JSON形式によるモーフィングアニメーション
  - 15.2.1 JSON形式モーフィングアニメーションのデータ構造
  - 15.2.2 モーフィングアニメーションの実装方法
  - 15.2.3 JSON形式データmorphColorsプロパティの利用
- 15.3 JSON形式によるスキンメッシュアニメーション
  - 15.3.1 JSON形式スキンメッシュアニメーションのデータ構造
  - 15.3.2 スキンメッシュアニメーションの実装方法
  - 15.3.3 JSON形式データ内に記述された画像データによるテクスチャ
  - 15.3.3 SkinnedMeshクラス
- 15.4 Collada形式によるキーフレームアニメーション
  - 15.4.1 Collada形式について
  - 15.4.2 Collada形式によるキーフレームアニメーション
  - 15.4.3 ColladaLoaderクラス
  - 15.4.4 KeyFrameAnimationクラス

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

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

章	ファイル名	説明
9.1.1	Earth.html	テクスチャマッピングの例（地球）。
9.1.2	test_texture.html	テクスチャマッピングの基本形。
9.1.2	test_texture_canvas.html	Canvas2Dレンダリングによるテクスチャマッピングの例。
9.1.6	texture_Gaussian.html	canvas要素を用いたテクスチャマッピングの例。
9.1.7	local_texture.html	ローカル環境でテクスチャマッピング。
9.1.7	canvas_image_bitmap_png.html	DataURL形式画像データの生成。
9.1.8	test_texture_noWARNING.html	テクスチャマッピング時のRENDER WARNINGの例。
9.5.2	texture_bump.html	エンボス効果。
9.2.1	texture_RepeatWrapping.html	リピートラッピングの例。
9.2.1	texture_MirroredRepeatWrapping.html	ミラーリピートラッピングの例。
9.2.3	mipmap_test.html	ミップマップの実装例。
9.2.4	texture_crate.html	異方性フィルダリングのテスト。
9.3.2	normal_test.html	法線マッピングの実装例。
9.3.3	Earth_normal.html	地球（法線マッピングのみ）。
9.4.2	specular_test.html	鏡面マッピングの実装例。
9.4.2	Earth_specular.html	地球（鏡面マッピングのみ）。
9.5.1	bump_test.html	バンプマッピングの実装例。
9.5.3	Moon.html	月テクスチャによるバンプマッピング。
9.6.2	texture_displacementMap.html	頂点変位マッピングの実装例。
9.7.1	lightMap_metal.html	ライトマッピングの実装例。
9.7.2	lightMap_test.html	ライトマッピングの実装例。
9.8.2	aoMap_test.html	環境閉塞マッピングの実装例。
9.9.2	alphaMap_test.html	アルファマッピングの実装例。
9.10.4	reflection_test_basic.html	発光材質による反射マッピングの例。
9.10.5	reflection_test_phong.html	反射材質による反射マッピングの例。
9.10.5	reflection_test_phong_ambient.html	反射材質による反射マッピング＋環境光。
9.10.6	refraction_test_basic.html	発光材質による屈折マッピングの例。
9.10.7	refraction_test_phong.html	反射材質による屈折マッピングの例。
9.10.8	Moon_envmap.html	月オブジェクト＋環境マッピング
9.11.1	EquirectangularReflection_test_basic.html	円筒型環境マッピングの実装例（反射マッピング）。
9.11.1	EquirectangularRefraction_test_basic.html	円筒型環境マッピングの実装例（屈折マッピング）。
9.11.2	SphericalReflection_test_basic.html	球型環境マッピングの実装例。
9.12	emissiveMap_test.html	発光色マッピングの実装例。
10.1.1	test_videoTexture.html	動画テクスチャマッピングの実装例。
10.2.1	test_dataTexture.html	データテクスチャマッピングの実装例。
10.3.1	RTT.html	オフスクリーンレンダリングの実装例。
10.3.4	depthBuffer.html	デプスバッファによるテクスチャマッピングの実装例。
10.4.2	cubeCamera_test.html	キューブカメラによるテクスチャマッピングの実装例。
10.4.2	cubeCamera_test_refraction.html	キューブカメラを利用した環境マッピングの実装例。
10.4.2	cubeCamera_test_refraction2.html	キューブカメラを利用した環境マッピングの実装例。
10.5.1	test_compressedTexture.html	DDS形式画像によるテクスチャマッピングの実装例。
10.6.1	Sprite.html	スプライトオブジェクトの例。
10.6.2	Sprite_texture.html	スプライトオブジェクトへのテクスチャマッピングの例。
10.6.2	Sprite_texture2.html	スプライトオブジェクトへのテクスチャマッピングの例（平面オブジェクトとの比較）。
10.6.2	Sprite_texture3.html	スプライトオブジェクトへのテクスチャマッピングの例（発光色による着色）。
11.1.1	AdditiveBlending.html	加算ブレンディングの実装例。
11.1.2	NormalBlending.html	通常ブレンディングの実装例。
11.1.2	MultiplyBlending.html	乗算ブレンディングの実装例。
11.1.2	SubtractiveBlending.html	減算ブレンディングの実装例。
11.1.3	NormalBlending_custom.html	カスタムブレンディングによる通常ブレンディングの実装例。
11.1.3	AdditiveBlending_custom.html	カスタムブレンディングによる加算ブレンディングの実装例。
11.1.3	MultiplyBlending_custom.html	カスタムブレンディングによる乗算ブレンディングの実装例。
11.1.3	SubtractiveBlending_custom.html	カスタムブレンディングによる減算ブレンディングの実装例。
11.2.1	Fog.html	線形フォグ効果の実装例。
11.2.1	FogExp2.html	指数フォグ効果の実装例。
11.3.1	LensFlare.html	レンズフレアの実装例。
11.4.1	morphTargets.html	モーフィングによる頂点座標の補間。
11.4.2	morphTargets_lambert.html	モーフィングによる法線ベクトルの補間。
11.4.3	morphTargets_animation.html	モーフィングによるアニメーション。
11.5.1	triangle_verticesNeedUpdate.html	頂点座標の更新。
11.5.2	triangle_normalsNeedUpdate.html	面法線ベクトルの更新。
11.5.3	triangle_colorsNeedUpdate.html	頂点色の更新。
11.5.4	triangle_uvsNeedUpdate.html	テクスチャ座標の更新。
11.5.5	triangle_elementsNeedUpdate.html	ポリゴン面頂点インデックスの更新。
11.5.6	triangle_groupsNeedUpdate.html	ポリゴン面材質インデックスの更新。
11.5.8	triangle_lineDistancesNeedUpdate.html	累積距離の更新。
11.5.9	polygonOffset.html	ポリゴンオフセット。
11.5.10	Line_Spline.html	スプライン補完の例。
11.5.12	rotation_tset1.html	ローカル座標における任意軸回転。
11.5.12	rotation_tset2.html	ワールド座標系に対する任意軸回転。
11.6.1	AudioLoader.html	点音源の実装例。
11.8.2	clipping_local.html	ローカルクリッピングの実装例。
11.8.3	clipping_global.html	グローバルクリッピングの実装例。
12.1.1	BufferGeometry_Line.html	バッファーオブジェクトによる線オブジェクト。
12.1.1	BufferGeometry_Points.html	バッファー形状オブジェクトによる点集合オブジェクト。
12.1.2	BufferGeometry_Points_dynamic.html	バッファー形状オブジェクトによる点集合オブジェクト（ダイナミック）
12.1.3	BufferGeometry_MeshBasicMaterial.html	バッファーオブジェクトによる三角形オブジェクト（発光材質）。
12.1.3	BufferGeometry_MeshPhongMaterial.html	バッファーオブジェクトによる三角形オブジェクト（フォン反射材質）。
12.1.6	BufferGeometry_MeshBasicMaterial_Index.html	バッファー形状オブジェクト＋頂点インデックス。
12.1.7	BufferGeometry_MeshBasicMaterial_dynamic.html	バッファー形状オブジェクト＋頂点インデックス
12.2.2	ShaderMaterial.html	シェーダー材質の基本形。
12.2.2	ShaderMaterial_string.html	シェーダープログラムとして文字列を用いた例。
12.2.3	ShaderMaterial_wireframe.html	wireframeの有効化。
12.2.5	ShaderMaterial_2.html	行列演算なしの平面オブジェクト。
12.2.5	ShaderMaterial_3.html	modelMatrixのみ演算の平面オブジェクト。
12.2.6	ShaderMaterial_gl_FragCoord.html	gl_FragCoordによる頂点色の指定。
12.3.2	triangle.html	バッファーオブジェクト＋シェーダー材質による三角形オブジェクト。
12.3.3	square.html	バッファーオブジェクト＋シェーダー材質による四角形オブジェクト。
12.3.4	triangle_uniforms.html	カスタムuniform変数の利用方法。
12.3.5	triangle_attributes.html	カスタムattribute変数の利用方法。
12.4.1	square_texture.html	シェーダー材質によるテクスチャマッピングの例。
12.4.1	square_texture_filter.html	シェーダー材質によるテクスチャマッピング時のフィルタ。
12.4.2	square_texture_repeat.html	シェーダー材質によるテクスチャマッピング時のリピートラッピング。
12.4.2	triangle_texture.html	シェーダー材質による三角形へのマッピング。
12.4.4	square_texture_mix.html	mix関数によるテクセルと頂点色の混合。
12.5.2	square_texture_RawShader.html	GLSLシェーダー材質オブジェクトの実装例。
12.6	BoxGeometry.html	直方体形状オブジェクトに対する頂点色設定
13.1.2	square_castumLambert.html	自前ランバート反射材質を実装した平面オブジェクト（両面）。
13.1.2	square_castumLambert_doubleside.html	自前フォン反射材質を実装した平面オブジェクト。
13.1.4	square_castumPhong.html	自前修正フォン反射材質を実装した平面オブジェクト。
13.1.4	square_castumPhong2.html	平行光源と環境光源に対する自前ランバート反射材質による立方体オブジェクト。
13.1.5	square_castumLambert_RawShader.html	GLSLシェーダー材質オブジェクトによる実装方法
13.2.1	cube_castumLambert_ambient.html	平行光源と環境光源に対する自前ランバート反射材質による立方体オブジェクトをattribute変数で操作した例。
13.2.2	square_castumPhong_point.html	平行光源と環境光源に対する自前フォン反射材質による立方体オブジェクト。
13.1.5	cube_castumLambert_attribute.html	点光源に対する自作ランバート反射材質による平面オブジェクト。
13.2.1	cube_castumLambert.html	環境光源に対する自作フォン反射材質による立方体オブジェクト。
13.2.2	square_castumLambert_point.html	点光源に対する自作フォン反射材質による平面オブジェクト。
13.2.3	square_castumLambert_Gouraud.html	グローシェーディングによる平行光源の実装。
13.2.3	square_castumLambert_Gouraud_point.html	グローシェーディングによる点光源の実装
―	cube_castumPhong_ambient.html	シェーダプログラムによる球体オブジェクトの分割。
13.3.1	sphere_castumPhong_ambient.html	シェーダプログラムによる頂点色のグラデーション。
13.3.2	sphere_castumPhong_ambient_marble.html	シェーダプログラムによる頂点色のグラデーション。
13.3.2	sphere_castumPhong_ambient_marble2.html	シェーダプログラム内で、ワールド座標系による位置座標を用いて頂点色を決定する例。
13.3.3	sphere_castumPhong_ambient_marble_apple.html	シェーダプログラムによる頂点座標と頂点色の変更。
13.4.1	skydome.html	球体オブジェクトによるスカイドーム。
13.4.2	skybox.html	背景テクスチャマッピング。
13.4.2	skybox_z.html	z軸方向を上向きとした背景テクスチャマッピング
13.4.3	skybox_envMap.html	背景テクスチャマッピングに対する環境マッピング。
13.4.3	skybox_envMap_cubeCamera.html	背景テクスチャマッピングに対するキューブカメラを利用した環境マッピング。
13.4.3	skybox_envMap_cubeCamera2.html	背景テクスチャマッピングに対するキューブカメラを利用した環境マッピング。
13.4.4	skybox_FresnelShader.html	背景テクスチャマッピングに対するフレネル回折シェーダー。
13.4.5	mirror.html	鏡材質の実装例。
14.1.2	JSON_LeePerrySmith.html	JSON形式のスミス氏。
14.1.2	JSON_LeePerrySmith_lambert.html	JSON形式のスミス氏（テクスチャマッピング＋ランバート反射材質）。
14.1.2	JSON_Lucy.html	JSON形式のルーシーさん（フォン反射材質）。
14.1.2	JSON_LeePerrySmith_lambert_canvas.html	JSON形式のスミス氏（Canvas2D）。
14.1.4	JSON_cubecolors.html	JSON形式による立方体オブジェクト。
14.2.2	JSONs.html	ローディングマネージャーオブジェクトの利用。
14.3.2	OBJLoader_male.html	OBJ形式の男性。
14.4.2	STLLoader_slottedDisk.html	STL形式データによるディスク。
14.4.2	STLLoader_colored.html	STL形式データ＋頂点色。
14.5.2	PLYLoader_dolphins.html	PLY 形式のイルカたち。
14.5.2	PLYLoader_colored.html	PLY 形式データ＋頂点色。
14.6.2	VTKLoader_bunny.html	VTK形式のうさぎ。
14.7.2	AMFLoader_rook.html	AMF形式データによるルーク。
14.8.2	BabylonLoader.html	Babylon形式データによるドクロ。
14.9.1	CTMLoader_ben.html	CTM形式のベン氏。
14.9.2	CTMLoader_camaro.html	CTM形式のカマロ。
14.10.1	BinaryLoader_Lucy.html	バイナリーフォーマットのルーシーさん。
14.10.2	BinaryLoader_f50_materials.html	バイナリーフォーマットのフェラーリF50。
14.10.3	BinaryLoader_f50.html	バイナリーフォーマットのフェラーリF50（環境マッピング）。
―	UTF8Loader_ben.html	UTF8形式のベン氏。
14.11.2	MTLLoader_male.html	MTL形式の男性。
14.12.2	PCDLoader.html	PCD形式データの人型
14.13.2	PDBLoader_ethanol.html	PDB形式データのエタノール。
14.14.1	ThreeMFLoader.html	3MF形式データのギア部品。
14.14.2	AWDLoader_sample.html	AWD形式データの基本形状。
14.14.3	AssimpJSONLoader.html	AssimpJSON形式データのジープ。
14.14.4	VRMLLoader.html	VRM形式デーのモデルルーム。
15.1.1	morphTargets_AnimationMixer.html	アニメーションミキサーによるモーフィングアニメーション。
15.2.2	JSON_monster.html	モーフィングアニメーションのモンスター。
15.2.2	JSON_monster_lambert.html	モーフィングアニメーションのモンスター（ランバート反射材質）。
15.2.3	JSON_flamingo.html	モーフィングアニメーションのフラミンゴ
15.3.2	JSON_buffalo.html	バッファローのスキンメッシュアニメーション。
15.2.3	JSON_flamingo.html	モーフィングアニメーションのフラミンゴ。
15.3.3	JSON_buffalo_lambert.html	バッファローのスキンメッシュアニメーション（テクスチャマッピング＋ランバート反射材質）。
15.3.3	JSON_knight.html	スキンメッシュアニメーションの騎士。
15.4.2	ColladaLoader_pump.html	Collada 形式によるキーフレームアニメーション。

	【受講生募集】『natural science 科学・技術講座』新講座のご案内 2024.01.09 【大草芳江｜TOPICS】
	サイエンス・デイオブザイヤー2023贈賞式（文部科学大臣賞表彰等）を開催しました 2023.11.07 【大草芳江｜TOPICS】
	■「natural science 科学・技術講座」夏休み短期講座のご案内 2023.07.14 【遠藤理平｜TOPICS】
	「国際イノベーションコンテスト2022世界大会」でnatural science『科学・技術講座』チームが世界3等入賞 2023.07.12 【大草芳江｜TOPICS｜パブリシティ】
	サイエンス・デイ限定『学都「仙台・宮城」サイエンスマップ～光編～』第7版プレゼント申込開始（先着500名）！ 2023.07.08 【遠藤理平｜TOPICS】
	学都「仙台・宮城」サイエンス・デイ2023　7月16日（日）開催！ 2023.07.08 【大草芳江｜TOPICS】
	人材募集のご案内 2022.08.19 【大草芳江｜TOPICS】
	学都「仙台・宮城」サイエンス・デイ2022　7月17日（日）開催！ 2022.07.01 【大草芳江｜TOPICS】
	「第13回国際イノベーションコンテスト2022」国内予選大会　natural science チームが第３位入賞、４年連続通算８回目の世界大会出場へ 2022.05.23 【大草芳江｜TOPICS】
	「キャンパスベンチャーグランプリ2021」東北大会で最優秀賞、全国大会で日刊工業新聞社賞を受賞 2022.03.09 【大草芳江｜TOPICS】
	【プレスリリース】「第12回国際イノベーションコンテスト2021」世界大会　natural science チームが世界３等入賞 2022.01.17 【大草芳江｜TOPICS】
	【第８話】有限の高さの障壁へ照射アニメーション【Pythonコピペで量子力学完全攻略マニュアル】 2021.09.29 【遠藤理平｜仮想物理実験室】
	【第７話】無限に高い障壁に向けた電子パルスの照射アニメーション【Pythonコピペで量子力学完全攻略マニュアル】 2021.09.24 【遠藤理平｜仮想物理実験室】
	【第６話】無限に高い障壁へ照射アニメーション【Pythonコピペで量子力学完全攻略マニュアル】 2021.09.23 【遠藤理平｜仮想物理実験室】
	【第５話】電子パルスの運動アニメーション【Pythonコピペで量子力学完全攻略マニュアル】 2021.09.21 【遠藤理平｜仮想物理実験室】
	【第４話】電子パルスの作り方【Pythonコピペで量子力学完全攻略マニュアル】 2021.09.20 【遠藤理平｜仮想物理実験室】
	【第３話】自由粒子の運動アニメーション【Pythonコピペで量子力学完全攻略マニュアル】 2021.09.19 【遠藤理平｜仮想物理実験室】
	【第２話】自由粒子のスナップショット【Pythonコピペで量子力学完全攻略マニュアル】 2021.09.18 【遠藤理平｜仮想物理実験室】
	【第１話】プログラムの動作確認【Pythonコピペで量子力学完全攻略マニュアル】 2021.09.17 【遠藤理平｜仮想物理実験室】
	「natural science 科学・技術講座」講師３人で設立した株式会社weCAN。アイディアの商品化第一弾「美姿勢メガネ」を朝日新聞さんに取材いただきました。 2021.08.23 【遠藤理平｜パブリシティ】

「three.jsによるHTML5グラフィックス下【改定版】」出版決定（発売日：2016年10月25日）

three.jsによるHTML5グラフィックス下　【改定版】
ブラウザで実現するOpenGL（WebGL）の世界

はじめに

目次

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

関連記事

OpenGL入門

Ranking アクセスランキング

「three.jsによるHTML5グラフィックス下【改定版】」 出版決定（発売日：2016年10月25日）

three.jsによるHTML5グラフィックス下 【改定版】 ブラウザで実現するOpenGL（WebGL）の世界

はじめに

目次

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

関連記事

OpenGL入門

Ranking アクセスランキング

「three.jsによるHTML5グラフィックス下【改定版】」出版決定（発売日：2016年10月25日）

three.jsによるHTML5グラフィックス下　【改定版】
ブラウザで実現するOpenGL（WebGL）の世界