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

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

CG関連

2019.08.16

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

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

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

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

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

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

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

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

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

アオキ

『3Dプログラム』の敷居がだいぶ下がるかも知れないですね・・！

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

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

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

コードはこちら。

function setup(){
  //3Dなので 引数にWEBGLを追加
    createCanvas( 200, 200, WEBGL);
}

function draw(){
  background(220);

  //3DなのでX,Y,Zで設定
  translate(0, 0, 0);
  normalMaterial();
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  torus(50, 20);
  pop();

}

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

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

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

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

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

https://coinbaby8.com/3dprogramming-basic.html

3Dプログラミングは難しい・・・なんたって数学多いし用語たっぷりだし・・・そんな風に考えていたこともあったけれど。プログラミングでかっこいい映像をつくりたいと始めた『TouchDesigner(タッチデザイナー)』のおかげで、いつのまにやら、『3Dプログラミング』の苦手意識がなくなってきた感があって。参考記事今回は、ホームページなどの『ウェブ』で3D表現するなら1番人気と思われる『Three.js(スリージェイエス)』と、少しだけ『TouchDesigner』の画像も交えて、『3Dプログラミングの基本』をまとめてみることにしました。3Dプロ...

もんプロ～問題発見と解決のためのプログラミング〜

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

https://coinbaby8.com/webgl-beginner.html

プログラミングでかっこいい映像を作りたいととりくみ始めた『GLSL(シェーダー)』。インターネットで『シェーダー』を使うには、『WebGL(ウェブジーエル)』なる仕組みを使えばいいのですが、『生のWebGL(ウェブジーエル)』難しいっす・・という意見も多いようで。実際の現場でも、『生のWebGL』は記述量が多いので、ライブラリを使うことが多いようです。WebGLは正式には「WebGL API」のことですが、素のAPIのままだと記述量が膨大になりどうしてもスピード感が出にくいのでライブラリを使うことがほとんどです。　WebGLコンテンツの開...

アオキ

『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っぽく表示されますね！

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

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

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

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

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

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

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

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

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

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

コードはこちら。

function setup(){
  //3Dなら 引数にWEBGLを追加
    createCanvas( 200, 200, WEBGL);
}

function draw(){
  background(220);

  //左側のトーラス マテリアル指定なし
  push();
  translate(-50, 0, -50);
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  torus(30, 10);
  pop();

  //右側のトーラス マテリアル指定あり
  push();
  translate(50, 0, 0);
  // マテリアルをつける
  normalMaterial();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  torus(30, 10);
  pop();

}

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

という違いがあります。

アオキ

normalなので標準？と思いがちなんですが、実は『法線』を表します。

法線・・面に垂直な線。光のあたる角度を計算する時に使ったりする。

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

【GLSL(シェーダー)】立体的に見せる方法〜光の反射は『内積』で〜『レイマーチン...

https://coinbaby8.com/raymarching2.html

プログラミングでかっこいい映像をつくる方法の一つに、『レイマーチング(Ray Marching』なる技術があることを知りました。前回の記事前回の記事で円を表示することができたので、次は光をあてて、明るい箇所と暗い箇所をつくり、より立体的に見えるようにしています。『レイマーチング』入門〜立体的に見せる方法参考にさせていただいている動画はこちら。今回の完成画像はこちら。『レイ(光源)』が当たっている球の中心が白く表示されて、外側に行くほど暗くなっているのがわかるかと思います。この画像をつくるためには、『光源ベク...

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

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

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

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

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

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

コードはこちら。

function setup() {
  createCanvas(200, 200, WEBGL);
}

function draw() {
  background(0);

  //マウス位置をライトにする
  let locX = mouseX - height / 2;
  let locY = mouseY - width / 2;

  //ライトを設定
  ambientLight(60, 60, 60); //全体をぼんやり
  pointLight(255, 255, 255, locX, locY, 100); //マウス位置にライトをとる

  //左 アンビエントマテリアル
  push();
  translate(-50, 0, 0);
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  ambientMaterial(250);
  torus(30, 12, 64, 64);
  pop();

  //右 スペキュラマテリアル
  push();
  translate(50, 0, 0);
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  specularMaterial(250);
  torus(30, 12, 64, 64);
  pop();
}

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

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

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

P5.js マニュアル

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