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,400 (2019/11/17 22:44:02時点 Amazon調べ-詳細)

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

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

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

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

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

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

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


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

コメント

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

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

CAPTCHA


最近の記事

  1. オンライン教材

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  2. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラムの覚え方
  3. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
  4. 数学

    【三角関数】とは わかりやすくまとめてみた【動画あり】
  5. バックエンド

    【Python】手軽に試す方法2つとwebフレームワークについて【初心者向け】
PAGE TOP