学習事8/5
7/30 ~ 8/5
three.js journey
先週から続きReact Three Fiberを扱う章を視聴。内容としては環境光、GLTFモデル、３Dテキスト、マウスインタラクション、ポストプロセス、物理エンジンを扱った。
物理エンジンを扱うときにInstanceBufferGeometryを効率よく移動させるやり方が今までしっくり来てなかったのでそこら辺を学べたのは良かった。
14時間ぐらい。
Globis
仕事効率化の方法など
4時間ぐらい視聴 9月までにあと28時間視聴しなければ。。
学習事7/23
7/23
マジミラのプログラミングコンテストの応募が完了し、以前の学習サイクルを取り戻しつつある。むしろ以前より進んでいるような気がする。 せっかくなので、何を学習したかをまとめる。
Rustによるwasmアプリ
会社でudemyを視聴できるのでRustを用いたwasm作成の動画を視聴した。 wgpuを触ったことがあるので、何となく理解はしていたが、wasm-packがサポートしてくれているメモリ管理などの内容を詳しく説明していたので理解が深まった。
だいたい13時間ぐらい(先週分含めて)
Three.js journeyでのR3F
以前購入したWebGLライブラリのデジタル学習コンテンツの続き。正直React Three Fiber(R3F)は興味なかったが、きちんとReactを触ることがなかったので視聴することにした。 dreiという関連ライブラリが凄い。
まだ前半だが6時間ぐらい
Globis視聴
会社のルールで72時間分教材を見ないと自腹になるので視聴している。あまり刺さるコンテンツが少ないので結構しんどい。
7時間ぐらい
こうやって振り返ると1日３時間ぐらいは学習に時間を費やしている。
three.js練習 ボロノイ
ボロノイ
やりたかったこと
ゲームで敵とエンカウントした際の演出で画面が割れるようなエフェクトがあると思います。それをイメージして作りました。
結果
作品URL:
https://hittaito.github.io/three-practice/day14/index.html
ソース:
https://github.com/hittaito/three-practice/tree/main/src/day14
使用ライブラリ
参考に記載している作品を頼りにcannon-esとd3-delaunayを使用
GitHub - pmndrs/cannon-es: 💣 A lightweight 3D physics engine written in JavaScript.
GitHub - d3/d3-delaunay: Compute the Voronoi diagram of a set of two-dimensional points.
反省点、感想
綺麗に破片を散らばらせることができなかった。opaticyとかでフェードアウトも考えたがそれも納得いくようなものにはなっていない。
物理エンジンのcannon-esは正直今回のケースでは要らなかった。cannon-esの使用上インスタンシングなどを行っていないため、パフォーマンスが気になったが100個程度なら問題なく動いた。
参考
作品紹介
「トンネル」
リンクは↓
https://hittaito.github.io/three-practice/day13/index.html
ソースは↓
three-practice/src/day13 at main · hittaito/three-practice · GitHub
説明
以下の2つのチュートリアル、作品を参考にしている
１つ目の作品でチューブ状の内面を使用したトンネルの表現
２つ目の作品でトンネルに沿ってカメラを移動させる方法
を参考にした。
cables.glで作った作品をthree.jsで再現した程度。
できなかったこと
ネオン表現で緑と紫の２色に対してネオン表現を付けたかったが、現在の方法では１色しか付けられなかった。 ベクトルをいい感じに抽出できればいけそうだとは思っているので今度調べる
three.js練習 boids
three.jsでboidsを試す
サンプル
URL: https://hittaito.github.io/three-practice/day11/index.html
ソースコードはこちら
注意
メモ書き&簡易実装なのできちんと知りたい方は参考の方を見てください。参考のp5.jsの劣化版移植みたいなもんなので
実装
参考1によるとboidsは結合、分離、整列の３つのルールを基に自身の移動先を決めている。 自身以外のposition, velocity情報が必要なため、テクスチャにposition, velocity情報を書き込みフラグメントシェーダで計算することにする。
基本的な処理
テクスチャのサイズに合わせてループを回す。最初に一定範囲内の判定を行い一定範囲内の時は結合、分離、整列の処理を行う。
今回は履歴を持たせるためy = 0の場合のみ。
for (int x = 0; x < size.x; x++) {
int y = 0;
vec3 otherPos = texelFetch(uPosition, ivec2(x,y), 0).xyz;
vec3 dir = otherPos - pos;
float dist = length(dir);
if (dist < 0.0001 || dist > radius) continue;
/** 結合 */
/** 分離 */
/** 整列 */
}
/** 結合 後処理 */
/** 整列 後処理 */
vel += cohesDir + separation + align;
pos += vel;
結合
自身から一定範囲内に存在する要素の中心に移動させる。単純に要素の中心を求め方向を求める。
vec3 cohesion; // 要素のpositionを合計
float nCohesion; // 一定範囲の要素数
/** ループ処理内 */
cohesion += otherPos;
nCohesion++;
/** ループ後処理*/
vec3 cohesDir = vec3(0);
if (nCohesion > 0.) {
cohesion/= nCohesion;
cohesDir = cohesion - pos;
}
分離
近接した場合反対方向に移動させる。近接距離によって変化を入れてもいいかも
vec3 separation
/ ** ループ処理内 */
if (dist < uSeparate) {
separation -= dir;
}
整列
速度を周囲と合わせる動き。
vec3 align;
float nAlign;
/** ループ処理内 */
vec3 otherVel = texelFetch(uVelocity, ivec2(x,y), 0).xyz; // velocityテクスチャ
align += otherVel;
nAlign++;
/** ループ処理後 */
if (nAlign > 0.) {
align /= nAlign;
}
後はこれらを速度として合計し、positionを更新する。
参考
Boids｜クリエイティブコーディングの教科書
three.js examples
感想等
簡易的な実装だが一応boidsとして動いているので動いたときは感動する(´;ω;｀)
移動履歴をとっているのでこの作品(
POOL)みたいにいい感じの作品を目指したい
