CG関連

【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】

一般的に『3Dプログラム』というとややこしい、敷居が高いイメージがあると思いますが、

遊ぶようにプログラムができる『P5.js(ProcessingのJavaScript版)』に関して言えば、

本当に簡単に、たった10行くらいのコードで『3Dプログラム』を描画することができます。

もちろん複雑なプログラムを組もうとすれば、

専門の言語なりライブラリの出番になるかとは思いますが、

『3Dプログラム』全く初心者という事であれば、

『P5.js(ProcessingのJavaScript版)』をいろいろと試してみて、

『3Dプログラム』の感覚を掴むというのもいい手かもしれません。

アオキ
『3Dプログラム』の敷居がだいぶ下がるかも知れないですね・・!
Sponsored link

3Dプログラム初心者にオススメな理由その1 とにかく簡単

『P5.js(ProcessingのJavaScript版)』でトーラス(ドーナツみたいな形)を表現するとこうなります。

See the Pen
p5.js 3d-first
by aoki_monpro (@suica)
on CodePen.

コードはこちら。

たった10行くらいのコードで3Dの物体が描画できています。

『3Dプログラム』特化の『Three.js』と、
より高度な『WebGL/GLSL』と比較してみると・・

  • Three.js・・四角形を描画するのに約50行。
  • WebGL/GLSL・・三角形を描画するだけで約220行。

参考記事

アオキ
『P5.js』めっさ簡単ですな・・

3Dプログラム初心者にオススメな理由その2 ありがちな設定がとにかく簡単

『3Dプログラム』といえばおなじみセットがこちら。

  • シーン
  • モデル(メッシュ=ジオメトリ+マテリアル)
  • ライト
  • カメラ
  • レンダー

『Three.js』も『WebGL/GLSL』も『TouchDesigner』も
これらのセットが必要なのですが、

『P5.js』はというと、
先ほどの最小構成の場合、

  • シーン
  • モデル

だけで『3Dプログラム』が描画されています。

ついさっきまで『WebGL/GLSL』を触っていた身としては、

アオキ
なんてシンプルなんでしょう・・

と思わずあんぐりしてしまうくらいのシンプルさ。

もちろん高度なことをやろうとすれば物足りなくなってくると思いますが、

最初の取っ掛かりとしては本当にオススメだなと思います。

3Dプログラムにとりかかるコツ その1 座標系

『2D』と『3D』の最も大きな違いはもちろん『座標系(ざひょうけい)』

また、『P5.js』の場合は『原点』も変更になります。

  • 『2D』・・横軸がX、縦軸がY。原点は左上。
  • 『3D』・・横軸がX、縦軸がY、奥行きがZ。原点は中央。

同じ大きさの2つのトーラスを並べてみるとわかりますが、

左側のトーラスは『Z軸』をマイナスにしているため、

奥の方に描画されて小さく見えます。

See the Pen
p5.js 3d-z-axis
by aoki_monpro (@suica)
on CodePen.

アオキ
手前と奥という位置関係を意識しながらプログラムやると3Dっぽく表示されますね!
Sponsored link

3Dプログラムにとりかかるコツ その2 ライトとマテリアル

『P5.js』は本当に簡単に『3Dプログラム』ができてしまうのですが、

より『3Dっぽさ』を出すとすれば、

  • ライト
  • モデル(メッシュ=ジオメトリ(骨格)+マテリアル(表面))

などの、『3Dプログラム』のお作法を取り入れることになるかなとは思います。

とはいえこちらも簡単で、

先ほどのコードをもう一度見てみると、

左側のトーラスと右側のトーラスの違いに、

『normalMaterial(ノーマルマテリアル)』というメソッドがあるのがわかるかと思います。

See the Pen
p5.js 3d-z-axis
by aoki_monpro (@suica)
on CodePen.

コードはこちら。

  • 左側・・マテリアルを指定していない。3Dの骨格(ジオメトリ)が表示。
  • 右側・・マテリアル(表面の質感)を指定。色が付いている。

という違いがあります。

アオキ
normalなので標準?と思いがちなんですが、実は『法線』を表します。
  • 法線・・面に垂直な線。光のあたる角度を計算する時に使ったりする。

参考記事

『normalMaterial』以外にもマテリアルがありますが、

  • ambientMaterial(アンビエントマテリアル)・・環境
  • specularMaterial(スペキュラーマテリアル)・・鏡面反射

これらを使うためには、ライトも設定が必要になります。

  • ambientLight(アンビエントライト)・・環境光・・全体をぼんやり照らす
  • pointLight (ポイントライト)・・点光源・・一部分を強めに照らす
  • directionalLight (ディレクショナルライト)・・太陽光みたいに一方から照らす

左が『アンビエントマテリアル』で、
右が『スペキュラーマテリアル』になります。

See the Pen
p5.js 3d-materials
by aoki_monpro (@suica)
on CodePen.

コードはこちら。

ライトがそれぞれ一行。
マテリアルの設定もそれぞれ1行と、

『WebGL/GLSL』と比べればかーなり簡単に記述できるようになっています。

細かいメソッドの引数はマニュアルを参照いただきたいのですが、
公式サイトにはサンプルもたくさんあるので、
数字などを変えたりしつつ触ってみる方が理解が早いかなとも思います。

P5.js マニュアル

P5.js マニュアル内サンプル。3Dの箇所がそのまま3D。

3Dプログラムにとりかかるコツ その3 とにかく楽しんで

3Dプログラムは本当に奥が深いので、

やりたい映像とできることのギャップで凹んでしまうこともでてくると思います。

そんな時は初心に帰って、

色を変えたり、ランダムに表示させたりするだけでも

面白くなったりしますし、

『3D』にこだわらずに『2D』で遊ぶのもありだと思うので、

ぜひ気楽に、楽しみながらやってみてもらえたらいいなと思います。

関連記事


Sponsored link

3Dプログラム初心者向けにまとめてみて

これから『5G』の時代になるにつれ、

  • 『VR/AR/MR』
  • 『メディアアート』
  • 『インタラクティブアート』

など、平面ではなく立体的な映像がますます増えてくると思われます。

『3Dプログラム』は確かに『2D』よりも難易度が上がってしまう傾向はありますが、

その分希少価値も高くなってくるかと思いますので、

ぜひちょっとずつでも『P5.js』をとっかかりに、
立体的・空間的な『3Dプログラム』にも取り組んでみてもらえたらなと思います。

アオキ
それにしても、トーラスずっと見てるとドーナツ食べたくなりますな・・

 

『クリエイティブコーディング』関係ではこんな記事も読まれています。

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

2. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

3. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい(3)【P5.js】

4. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

5. プログラムで【加速度】【速度】の使い方をわかりやすく (5)【P5.js】

6. プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

7. プログラムの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

8. プログラムで色や大きさをランダムにして遊んでみる(8)【P5.js】

9. 【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】

10. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

11. 【三角関数】をプログラムで使う方法をまとめてみた(11)【P5.js】

12. プログラムで数学も身につく 一石四鳥なクリエイティブコーディング

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

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


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

コメント

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

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

CAPTCHA


最近の記事

  1. 学び・教育

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
  2. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  3. CG関連

    【WebGL】入門 わかりやすく【図解】してみた
  4. CG関連

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

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