CG関連

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

3Dプログラミングは難しい・・・

なんたって数学多いし用語たっぷりだし・・・

そんな風に考えていたこともあったけれど。

プログラミングでかっこいい映像をつくりたいと始めた『TouchDesigner(タッチデザイナー)』のおかげで、
いつのまにやら、『3Dプログラミング』の苦手意識がなくなってきた感があって。

参考記事

今回は、
ホームページなどの『ウェブ』で3D表現するなら1番人気と思われる『Three.js(スリージェイエス)』と、

少しだけ『TouchDesigner』の画像も交えて、『3Dプログラミングの基本』をまとめてみることにしました。

Sponsored link

3Dプログラミングの基本イメージと用語

『3Dプログラミング』の基本イメージは撮影現場。

  • 舞台があって、
  • 大道具小道具があって、
  • 役者がいて、
  • カメラがあって、
  • 照明があって。

『Three.js』の場合はそれぞれこんな用語にあたります。

  • シーン(Scene)・・舞台
  • モデル(Model)・・大道具小道具役者
  • カメラ(Camera)・・カメラ
  • ライト(Light)・・照明

撮影現場と同じく、

カメラの向く方向で映像は変わるし、
ライトのあてる方向を変えれば明るさも変わると。

アオキ
3Dプログラマーはさながら舞台監督的な役割でしょうか。

3Dプログラミングの基本 XYZ座標

撮影現場をコンピューター上で再現しようと思ったら、

  • どの位置に役者を置いて、どの方向に動かすか。
  • どの位置にカメラを置いて、どれくらいズームインして撮影するか。
  • どの位置からライトをあてるか。

というような指示を、コンピュータがわかるように伝える必要があります。

そのために必要なのが『座標系(ざひょうけい)』

  • 横方向・・X軸
  • 縦方向・・Y軸
  • 奥行き・・Z軸

『XYZ』3つの座標で、役者の位置やカメラの位置や移動距離を決めます。

  • 舞台にも、
  • 役者にも、
  • カメラにも、
  • ライトにも、
アオキ
XYZの位置情報があるので、場所が決まるということになります。
Sponsored link

3Dプログラミングの基本 モデルの構成

舞台上の役者、
『Three.js』でいうところの『モデル』は、
いつかの要素が含まれています。

  • 頂点(Vertex)・・点の数。三角形なら3つ。四角形なら4つ。
  • ポリゴン(Polygon)・・3つの頂点からなる三角形
  • メッシュ(Mesh)・・ポリゴンの集まり

小さな三角形『ポリゴン』を大量に組み合わることで、
いろんな物体をつくりだすことができます。

アオキ
また、『メッシュ』はさらに2つにわかれます。

  • 『ジオメトリ(Geometory)』(形状)
  • 『マテリアル(Material)』(素材)

『ジオメトリ』は形を表して、
丸だったり四角だったり、それこそ人の形だったりいろいろあります。

アオキ
『ジオメトリ』を包み込むのが『マテリアル』になります。

なんの特徴もない白いボールがあったとして、

  • 野球ボールっぽいマテリアルをあてれば野球ボールに、
  • バスケットボール風のマテリアルならバスケットボールに、
  • テニスボール風ならテニスボール
  • ボーリングならボーリング

と見た目を変えるのが『マテリアル』です。

素材そのものの形と、
表面の質感を分けて考えるのが、
『3Dプログラミング』の特徴かなと思います。

3Dプログラミングの基本 画面に表示されるまで

3Dプログラミングを画面に描画するには、これらの要素が必要になります。

  • シーン(Scene)
  • カメラ(Camera)
  • ライト(Light)
  • モデル(メッシュ(Mesh)=ジオメトリ(Geometory)+マテリアル(Material))
  • レンダー(Renderer)

レンダーは、3D空間を画面上(2D)で描画する処理になります。

ノードベースの『TouchDesinger』の場合、こんな組み合わせになります。

アオキ
『TouchDesigner』めっちゃ見やすい・・

『Three.js』の場合は全部コード(JavaScript)で書く必要があります。

コードはこちら。

こんな描画になります。

See the Pen
threejs-test
by aoki_monpro (@suica)
on CodePen.

スクリーン、レンダー、カメラ、メッシュを作成した後に、

毎フレームごとにレンダリングを繰り返す、という流れになっています。

アオキ
コードはこちらから拝借させていただきました。詳細は元ページを参照ください。

Three.js入門サイト

Sponsored link

3Dプログラミングの基本 数学物理はちょっとずつ覚えるべし

プログラミングでキャラクターや映像を滑らかに動かしたいなと思ったら、

全く知識がないよりは、
多少なりとも数学や物理の知識があった方がいいなと実感します。

まずは、

  • 三角関数
  • ベクトル
  • ラジアン

の3つから、徐々に広げていくといいのかなと思います。

アオキ
大丈夫です。僕も高校時代ろくに勉強してなかったので。←やっときゃよかった(汗

参考記事(できるだけわかりやすく書いております



3Dプログラミングの基本 まとめ

『TouchDesinger』で3D表現を少しずつ体験し、

3Dならではの専門用語に徐々に慣れてきたことで、

ようやく『Three.js』にも抵抗なく取り組めそうな気がしています。

『Three.js』はシェーダー言語『GLSL』とも連携ができるようで、

使いこなせるようになると、ウェブでの表現もグーンと増えそうな予感ですので、

引き続きちょっとずつ触っていきたいと思います。

アオキ
3Dでも動かせるようになるとかっこいいですよね〜
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. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラムの覚え方
  2. CG関連

    【WebGL】入門 わかりやすく【図解】してみた
  3. バックエンド

    【Python】手軽に試す方法2つとwebフレームワークについて【初心者向け】
  4. CG関連

    【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっ…
  5. 音楽

    コードの転回形の練習方法をまとめてみた【大人のピアノ】
PAGE TOP