Makoto | Creative Frontend

Three.js / WebGL / Motion
3D空間とインタラクションの実験

Z軸に魅せられています。

[Makoto | Creative Frontend @makoto_zaxis]

桜 → 藤 → 紅葉

[Makoto | Creative Frontend @makoto_zaxis]

水面を上からみたイメージで、墨を咲かせてみました。

何もない水面の方が、水に見せるのが難しい…。

[Makoto | Creative Frontend @makoto_zaxis]

骸骨の2Dのモーション。
足首から下も分けて動かしたほうがよさそう。

次は3Dの予定。

[Makoto | Creative Frontend @makoto_zaxis]

スクロールで流体を巻き戻せたらいいな、と思って試したけど無理でした。

流体は毎ステップまわりの画素が混ざって、細かい情報から消えていく。なので逆向きにしても、きれいには戻らない。

右は座標を式で動かしてるだけなので、同じ動きでもピタッと戻る。でもこれは流体ではない。

[Makoto | Creative Frontend @makoto_zaxis]

Cinematic CookieさんのBlenderでの油絵ブラシ表現に着想を得て、R3F / Three.jsでリアルタイムに描けるようにしてみました。

Inspiration: Cinematic Cookie
https://t.co/v0bI89a7dZ
Paint texture: tohamina / Magnific
https://t.co/M4z38P2Ia4

[Makoto | Creative Frontend @makoto_zaxis]

レンズスライダーの別バージョン

#Threejs #ReactThreeFiber #GLSL

[Makoto | Creative Frontend @makoto_zaxis]

楽茶碗に抹茶。

器はだいぶ寄ってきた。

湯気の方がなかなか…
板1枚だと平面感が抜けない🤔

[Makoto | Creative Frontend @makoto_zaxis]

SDFで雲を作る練習。

「あの雲、げんこつみたいだね」
なんて会話をしている人がいるイメージで。

[Makoto | Creative Frontend @makoto_zaxis]

レンズスライダーの画面遷移。

イメージは、現像液に印画紙を浸すと、像が浮かび上がってくる感じ。

[Makoto | Creative Frontend @makoto_zaxis]

カメラレンズのスライダー

ガラスに厚みを持たせたら、動かしたときに中が少しずれるようになりました。

まだ直したいところがあるけれど、ひとまず次は画面遷移の実装へ。

#Threejs #ReactThreeFiber #GLSL

[Makoto | Creative Frontend @makoto_zaxis]

カメラレンズのスライダーを制作中。

見えない部分の構造まで作り込むと、
一気に「レンズらしさ」が出てきました。

あとは数値を少しずつ調整。
気づけば時間が溶けています💦

#Threejs #ReactThreeFiber #GLSL

[Makoto | Creative Frontend @makoto_zaxis]

風呂敷のメッシュを作ることになったので、物理で動かしてみた。

自己交差でZ-Fightingが消せない…🤔

[Makoto | Creative Frontend @makoto_zaxis]

https://t.co/1W6LTTXGPR に触発されて制作した藤の花。

開花していくアニメーションを追加しました。
とても勉強になります🧐

#ReactThreeFiber #R3F #Threejs

[Makoto | Creative Frontend @makoto_zaxis]

https://t.co/Q48lc10fVX
に触発されて藤の花を。

だんだん開花していくアニメーションなどこれから入れる予定。

[Makoto | Creative Frontend @makoto_zaxis]

three.js でダイヤと SSS のメッシュを並べてパラメータをいじってたら、偶然 SSS がダイヤの背後に回って、ダイヤの中に透けて面白い見え方に。

何かの表現に活かせないかな🤔
ひとまず、日の丸のイメージで。

[Makoto | Creative Frontend @makoto_zaxis]

脱線に脱線を重ねたとき、いったい何を作っているんだろうと我に返るときがあります…

[Makoto | Creative Frontend @makoto_zaxis]

最近、画像生成まわりも触り始めました。

Forge + LayerDiffuseでRGBA透過がうまくいかず、
ComfyUIでもハマりましたが💦
Claude CodeとMCPでつないだら一気に進みました。

BiRefNetのモデルファイル不足が原因とのこと🤔

[Makoto | Creative Frontend @makoto_zaxis]

マウスで描いた流体が、雲になって雷が落ちる感じにしてみました。
2Dの流れから、もっと自然に3Dの雲へつなげるにはどうしたらいいんだろう🤔

[Makoto | Creative Frontend @makoto_zaxis]

クリックした場所に雷が落ちるやつを作ってみました。
こういう雰囲気にすると、墨絵調の龍を登場させたくなりますよね🤔

#r3f #threejs #WebGL #generativeart

[Makoto | Creative Frontend @makoto_zaxis]

r3fで同じパターンのshaderを何層か書く予定があって、毎回Levaで設定した値を反映させるのが面倒だったで、Claude Codeに反映skillを作ってもらった。

useEffect / useFrameの選び方とか、drei ScreenQuadのuvの扱いとか、folder規約とか。あっという間😲