HOME > natural science Laboratory > コンピュータ・シミュレーション講座 > OpenGL入門

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

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

978-4-87783-375-6.png

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)といった3次元グラフィックスの新たな利用方法にも対応していることから、three.jsは今後ますます利用する機会も増えてくると考えています。

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

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

2016年10月
遠藤理平


目次

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


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

関連記事

OpenGL入門







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




Warning: mysqli_connect(): (28000/1045): Access denied for user 'xsvx1015071_ri'@'sv102.xserver.jp' (using password: YES) in /home/xsvx1015071/include/natural-science/include_counter-d.php on line 8
MySQL DBとの接続に失敗しました