glslとweb関連と
~10/15まで
GLSL
レイマーチングについて学習。何度か挫折しているので今回はそうならないようにしたい。
wasm+python
wasmを使用してブラウザ上でPythonを動かすことを調べていた。
pyodideを用いて動かすことまでは出来た。次は自分でランタイムを作成する部分を調べる。
後はviteでservice worker, indexedDBを使うこととか周辺技術を
サンプル(結構な頻度でバグる)
https://pyodide-tau.vercel.app/
requestAnimationFrameとzustand
~10/01まで
前回からだいぶ期間が空いてしまった。主にオクトパストラベラーにはまっていたことが原因。
@three/vrmでモデルを動かす
前回ハマっていた部分だが、サンプルコードをパクったら普通に動いた。
mediaPipeでvrmを動かす。
kalidokitを用いて、webカメラからの映像を基にVRMモデルを動かすことを確かめた。
動かすことまで成功したが、結構カクついた動きになったので妙案が思いついたら再挑戦する。
UdemyでFigmaの講座視聴
仕事でFigmaを編集する必要があったが動かし方がわからず、勉強することにした。
この講座がよくできており、マークアップの参考にもなる。
UdemyでReactの講座視聴
ReactでrequestAnimationFrameを動かすときにしっくりとしたコードが書けないのでこちらも勉強することに。
contextについて理解が浅かったため、結構学ぶことは多かった。
Reactの宣言的UIとrequestAnimationFrameでのglobal変数取得を上手く処理するためにzustandというライブラリを見つけた。(threejs-journeyで紹介されていたはず。)
getter関数を設定できるので、stateから取得するたびに再レンダリングされることを防ぐことができる。
他のライブラリでもできるかもしれないが、私にはそのやり方がわからなかった。
// create store export const useHogeStore = create<Hoge>((set, get) => ({ value: null, getHoge: () => get().value, setHoge: (value) => set({ value }), })); // use store const getHoge = useHogeStore((k) => k.getHoge); getHoge();
blenderでVRMをつくるまで
8/27 ~ 9/2
少しタイトルのつけ方を変えた。内容はこれまで通り週の振り返り。
Blenderでのキャラクターモデリング
遂に完成しました!
モデリングしているときは可愛くなかったんですけど、ペイント作業以降は可愛くなっていきました。
R3FでのVRM表示
キャラクターをweb上で動かすことが目標なのでVRM形式にしてR3Fを使用して表示を行った。
ここでちょっと問題があり、表情とかボーンの動かし方がわからない。。
モデルの方が悪いのか、プログラムの方が悪いのか? VRoid Studioでは動いたのでプログラムだとは思うが、詰まったのでまた別のモデルを作ったときに検討を行う。
VRMの出力をBlender -> Unity -> VRM で行ったが、blenderのadd-onで直接VRM出力できそうなので次はそれを使いたい
学習事8/19
8/13 ~ 8/19
ポートフォリオを創ろうかと思いつつ、使えそうな技術を調べている。
CSS デコレーション
CSSだけでテキストをデコレーションする方法を調べた。基本的にはbackgroundのグラデーションを上手く利用する。
See the Pen text style test by hittaito (@hittaito) on CodePen.
GSAP
アワード系サイトによく使用されるjavascriptライブラリGSAPを試した。
以下は先ほどのデコレーションしたテキストに動きを加えたもの。一つ目のScrambleアニメーションはpluginを用いずに自作しているのでお気に入り。
See the Pen text animation test by hittaito (@hittaito) on CodePen.
2つ目はスクロールプラグインを試した。
複数のアニメーションを組み合わせようとすると思った動きにならず、難しい。。
See the Pen scroll test by hittaito (@hittaito) on CodePen.
Globis視聴
引き続き。残り18時間ぐらい。
blender
学習なのか遊びなのか微妙だが自作モデルをWebに投入したいので久しぶりにblenderを触っている。 暫くはblenderに専念するかも。
学習事 8/12
8/6 ~ 8/12
日曜(8/6)はガンダムフェス、8/12~13はマジカルミライ大阪とイベント事が多かった。
Three.js journey
遂に最終レッスンまで視聴完了した。Reactはそこまで詳しく知らないので、これからどんどん作品を創っていき慣れていきたい。
最後のゲーム作りは普通に楽しいものが完成した。
6時間ぐらい。
Udemy SVGアニメーション
SVGとgsapを組み合わせた簡単なwebサイト制作の動画。
SVGの作り方とか学べるかなと期待して視聴したが、あくまでjavascript側の話がメインだった。illustrater以外でいい感じにSVG作れる方法とかないんかな??
3時間ぐらい。
R3F練習
他のdiaryで記載済み。
4時間ぐらい
動画視聴系のやりたいことは消化したので、来週からはgsapとかそこら辺を進めようかなと考えている。
three.js練習 R3F text3D
R3Fでtext3D
概要
最近、React Three Fiberを学習しハマっている。日本語テキストをSDFに変換して3Dテキストとして表示してみた。
技術
3Dテキスト
Googleフォント(ttf)をダウンロードしてtypeface.jsでjsonファイルに変換する。
その後、r3f/dreiにて3Dテキストとしてロードする。水面
r3f/dreiのMeshReflectorMaterialを使用した。createPortalによるプリレンダー
R3FでsetRenderTargetを利用するやり方がわからなかったので調べた。
ここら辺がやりにくい(素のthree.jsの方が楽な)のでもう少し精錬された方法を考えていきたい。
最後に
数時間の作業でここまでの見栄えを創れるのはthree.jsでは不可能だとは思う。dreiの扱い方をどんどん調べて色々挑戦はしていきたい