CG関連

【Three.js】用語や関数のまとめ【3Dプログラム】※随時更新

インターネット(Web)で3D表現をする方法として、

おそらく一番人気と思われる『Three.js(スリージェイエス』。

大人気ライブラリだけあって、

機能てんこ盛り、専門用語もりもりだったりするので、

『初めてのThree.js 第2版 WebGLのためのJavaScript 3Dライブラリ』の内容をベースに、

少しずつ用語や関数をまとめていくことにしました。

Sponsored link

Three.js用語や関数 頂点関連

  • アトリビュート(attribute)・・頂点ごとの情報
  • インデックス(index)・・どの頂点を使ってポリゴン(三角形)を作成するか

Three.js用語や関数 準備

FPSを測るモニター。
パフォーマンスモニター

変数の操作など
dat.GUI

Three.js用語や関数 シーン

  • THREE.Scene.add() ・・オブジェクトをシーンに追加
  • THREE.Scene.remove() ・・オブジェクトをシーンから削除
  • THREE.Scene.children() ・・シーンないすべての子要素のリスト取得
  • THREE.Scene.getObjectByName() ・・名前を指定しシーンから特定オブジェクトを取得

Three.js用語や関数 カメラ

  • 平行投影 ・・Orthographic ・・パースのないカメラ(シムシティ4みたいな)
  • 透視投影・・Perspective

  • THREE.TrackBallControls ・・最も使う。マウスを使って移動・パン・ズームできる

  • THREE.FirstPersonControls ・・一人称視点。
  • THREE.FlyControls ・・フライトシュミレーターのような。
  • THREE.OrbitControls ・・軌道上を動く。

Three.js用語や関数 ライト

  • THREE.AmbientLight・・環境光。全体を照らす
  • THREE.PointLight・・一点から全方向に向かって光を発する
  • THREE.SpotLight ・・懐中電灯みたいな
  • THREE.DirectionalLight ・・遠くから届くライト 太陽みたいな
  • THREE.HemisphereLight ・・ 野外にいるような光
  • THREE.LensFlare ・・レンズフレア
Sponsored link

Three.js用語や関数 マテリアル

  • THREE.MeshBasicMaterial ・・単純なマテリアル
  • THREE.MeshDepthMaterial ・・ オブジェクトからカメラの距離だけで表現が決まる
  • THREE.MeshNormalMaterial ・・法線がさす方向が面の色の決定に使用される
  • THREE.MultiMaterial ・・他のマテリアル用のコンテナみたいな

ラインで使えるマテリアル

  • THREE.LineBasicMaterial ・・ライン向けマテリアル
  • THREE.LineDashedMaterial ・・ベーシック+点線がつくれる

高度なマテリアル

  • THREE.MeshPhongMaterial ・・光沢のあるマテリアル
  • THREE.MeshLambertMaterial ・・光源に反応する
  • THREE.MeshStandardMaterial ・・簡易的なPBR(物理ベースレンダリング)マテリアル

シェーダー用マテリアル

『シェーダー(GLSL)』を使う場合はこれらを使う。

  • THREE.ShaderMaterial ・・独自シェーダー用(Three.js補正あり)
  • THREE.RawShaderMaterial・・生シェーダー用 (補正なし)

あらかじめ宣言されているシェーダー向け変数

  • modelMatrix ・・mat4 オブジェクト座標からワールド座標へ変換する行列
  • viewMatrix ・・mat4 ワールド座標から視点座標へ変換
  • modelViewMatrix ・・mat4 modelMarix x viewMatrixの計算
  • projectionMatrix ・・mat4 クリップ座標系に変換する行列
  • cameraPosition ・・vec3 カメラの座標

Three.js用語や関数 ジオメトリ

基本はマニュアル見る

  • THREE.ConvexGeometry ・・一群の座標を含む凸包を作成できる
  • THREE.LatheGeometry ・・なめらかな曲線を元に3次元形状を作成できる
  • THREE.TubeGeometry ・・3次元のスプライン曲線にそってチューブを作成
  • THREE.ExtrudeGeomety ・・2次元形状から3次元オブジェクト作成
  • THREE.ParametricGeometry ・・方程式に基づいて作成

  • THREE.BufferGeometry ・・WebGLのAPIを意識して作成できる。シェーダーと組み合わせるならこれを使う。

  • THREE.InstancedBufferGeometry ・・シェーダーでパーティクル使うならこのジオメトリを使う

ジオメトリの結合

Three.jsの拡張機能 ThreeBSP

  • intersect ・・2つのジオメトリ交差部分を元に作成
  • union ・・2つのジオメトリをそのまま合成
  • subtract ・・ 2つのジオメトリから重なった部分を除いて作成
Sponsored link

Three.js用語や関数 パーティクル、スプライト、ポイントクラウド

  • THREE.Points ・・引数でジオメトリ。頂点を元にパーティクル描画
  • THREE.PointsMaterial

高度のメッシュとジオメトリ

  • THREE.Geometry.merge ・・ジオメトリのグループ化

外部ソースからのジオメトリ読み込み

  • JSON

Blenderからインポートするには
Blender側に『Three.jsエクスポーター』を追加

Three.js用語や関数 アニメーションとカメラの移動

  • requestAnimationFrame ・・HTML5標準 アニメーション用
  • Tween.js ・・ある値から別の値へのプロパティ変化を簡単に計算できる

Tween.js

Three.js用語や関数 テクスチャ

  • THREE.Texture ・・

  • バンプマップ

  • ライトマップ
  • 環境マップ
  • スペキュラマップ
  • 独自UVマップ

Three.js用語や関数 カスタムシェーダーとポストプロセス

  • THREE.EffectComose ・・ポストプロセッシング用

  • THREE.BloomPass ・・光が暗い部分に漏れ出るような

  • THREE.DotScreenPass ・・黒いドットの重なりで表現
  • THREE.FilmPass ・・テレビの画面をシミュレート
  • THREE.GlitchPass ・・ランダムに電子的なグリッチを表示
  • THREE.MaskPass ・・マスク適用
  • THREE.RenderPass ・・シーンとカメラに基づいて
  • THREE.SavePass ・・現在描画をコピーして後から使える
  • THREE.TexturePass ・・コンポーザーの状態保存。他Effectの入力として使える

  • THREE.ShaderPass ・・独自シェーダー

基本シェーダー

  • THREE.MirrorShader ・・ミラーエフェクト
  • THREE.HueSaturationShader ・・色相と彩度を変更
  • THREE.VignetteShader ・・画像中心を囲むような暗い境界
  • THREE.ColorCorrectionShader ・・色の分布を変更
  • THREE.RGBShiftShader ・・色をRGBに分解
  • THREE.BrightnessContrastShader ・・明度とコントラスト
  • THREE.ColorifyShader ・・色のついたオーバーレイ
  • THREE.SepiaShader ・・セピア
  • THREE.KaleidoShader ・・万華鏡
  • THREE.LuminosityShader ・・明度が見えるように
  • THREE.TechnicolorShader ・・古い映画のような

ブラー関連シェーダー

  • THREE.HorizontalBlurShader ・・ブラー
  • THREE.VerticalBlurShader ・・ ブラー
  • THREE.HorizontalTiltShiftShader ・・一部だけ鮮明に ミニチュアのような
  • THREE.VerticalTiltShiftShader ・・一部だけ鮮明に ミニチュアのような
  • THREE.TriangleBlueShader ・・三角フィルタ

高度なエフェクト用シェーダー

  • THREE.BleachBypassShader ・・銀残しのようなオーバーレイ
  • THREE.EdgeShader ・・ 画像のエッジ検出してその部分をハイライト
  • THREE.FXAAShader ・・ アンチエイリアスエフェクト
  • THREE.FocusShader ・・ 中央をシャープに描画
Sponsored link

Three.js用語や関数 物理演算と立体音響

  • ammo.js ・・物理エンジン (Physijsに同梱のものを使う
  • Physijs ・・バックグランドスレッドで物理計算する ammo.jsを簡単にするラッパー

Physijs

  • Physijs.PlaneMesh ・・厚さのない平面
  • Physijs.BoxMesh ・・立方体
  • Physijs.SphereMesh ・・球
  • Physijs.CylinderMesh ・・円柱
  • Physijs.ConeMesh ・・円錐
  • Physijs.CapsuleMesh ・・シリンダーよりちょっと丸い
  • Physijs.ConvexMesh ・・ 複雑なオブジェクト用
  • Physijs.ConcaveMesh ・・ さらに複雑 (負荷も高い
  • Physijs.HeightfieldMesh ・・ THREE.PlaneGeometryからハイトフィールド作成

  • THREE.PositionalAudio

  • THREE.AudioListener
created by Rinker
¥4,320 (2019/09/22 23:02:03時点 Amazon調べ-詳細)

『Three.js』関係ではこんな記事も読まれています。

1. 3Dプログラムの基本を【Three.js】でまとめてみた【初心者向け】

2. 【Three.js】で『GLSL(シェーダー)』を使う環境構築の仕方 【初心者向け】

3. 【WebGL】入門 わかりやすく【図解】してみた

4. 【Three.js】用語や関数のまとめ【3Dプログラム】※随時更新

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. 学び・教育

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
  2. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  3. バックエンド

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  4. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  5. 数学

    【三角関数】とは わかりやすくまとめてみた【動画あり】
PAGE TOP