glslとweb関連と

~10/15まで

GLSL

レイマーチングについて学習。何度か挫折しているので今回はそうならないようにしたい。

glsl1

glsl2

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でのキャラクターモデリング

先週から引き続き、blenderチュートリアル本の作業。

遂に完成しました!

完成品

モデリングしているときは可愛くなかったんですけど、ペイント作業以降は可愛くなっていきました。

R3FでのVRM表示

キャラクターをweb上で動かすことが目標なのでVRM形式にしてR3Fを使用して表示を行った。
ここでちょっと問題があり、表情とかボーンの動かし方がわからない。。

モデルの方が悪いのか、プログラムの方が悪いのか? VRoid Studioでは動いたのでプログラムだとは思うが、詰まったのでまた別のモデルを作ったときに検討を行う。

VRMの出力をBlender -> Unity -> VRM で行ったが、blenderのadd-onで直接VRM出力できそうなので次はそれを使いたい

学習事8/26

8/20 ~ 8/26

ほとんどBlenderで遊んでいた。

Globis

ダイバーシティニュースというコーナーをメインに視聴した。 残り7時間

Blender

学習ではないと思うが記録として。
ゴールは3Dモデルが動くWebサイト作成。Blenderで人型のモデルを作ったことがないのでチュートリアルを行っている。

以下の本で学習中。 https://amzn.asia/d/6cXAha4

モデル自体は完成して、今はウェイトペインティングの作業。 可愛くできない。。

ゴールがwebサイト構築のため、一からモデルを作らなくてもいい気もしている

来週までに頑張って完成させたい。

学習事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

R3F

概要

最近、React Three Fiberを学習しハマっている。日本語テキストをSDFに変換して3Dテキストとして表示してみた。

技術

  1. 3Dテキスト
    Googleフォント(ttf)をダウンロードしてtypeface.jsでjsonファイルに変換する。
    その後、r3f/dreiにて3Dテキストとしてロードする。

  2. 水面
    r3f/dreiのMeshReflectorMaterialを使用した。

  3. createPortalによるプリレンダー
    R3FでsetRenderTargetを利用するやり方がわからなかったので調べた。
    ここら辺がやりにくい(素のthree.jsの方が楽な)のでもう少し精錬された方法を考えていきたい。

最後に

数時間の作業でここまでの見栄えを創れるのはthree.jsでは不可能だとは思う。dreiの扱い方をどんどん調べて色々挑戦はしていきたい