AIと創作の記録をここに。

「AIと人が、共に学び、創る場所」

学びと再出発の旅路へ。

注目のプロジェクト

注目

[Lain Clock(仮)] Three.js と MMD を使って制作した Web 時計アプリ

Three.js と MMD を使って制作した Web 時計アプリ。壁紙、時計色、床シェーダー、MotionAssets を設定UIから変更し、localStorage / IndexedDB で保存・復元できます。

注目

[ブロック崩しゲーム] ブロック☆パレット魔法で描く不思議な世界

「ブロック☆パレット魔法で描く不思議な世界」は、ブロック崩しゲームの新しいアプローチを取り入れた作品です。魔法とアニメーションの要素を融合させ、プレイヤーに魅力的な体験を提供します。

注目

[PIECE BY PIECE] 記憶のカケラ：失われたピースを集める神経衰弱ゲーム

「記憶のカケラ」は、失われた記憶を取り戻すためにピースを集める神経衰弱ゲーム。ひとつひとつのピースがあなたの記憶を呼び覚まし、挑戦する度に新しい発見が待っています。

注目

[Chrome Add-on] ChatGPT Question Redactor

ChatGPT の会話で、文末が「？」の行を自動的に折りたたむ Chrome 拡張をリリースしました。

注目

FramePack-eichiによるAIアニメーション

FramePack-eichiでAIアニメーションを作成する方法の紹介、及び、画像生成AIの活用方法。

最新記事

[Next.js #26] Three.js×MMD：複数モデル表示とactor管理、順番トーク制御を実装

2026-03-06 | lain

Next.js×Three.js×MMDで作った3D時計に、複数MMDモデルの同時表示と actor ベース管理を導入。MMDAnimationHelper の個別化、UIからのモデル追加・削除、talkトグル、複数キャラを1人ずつ順番に喋らせる制御までを整理する。

カテゴリ： Next.js

タグ： #Next.js#Three.js#MMD#UI#JavaScript

[Noise 入門 #27] Normal Recomputation — 歪んだ世界に正しい光と影を取り戻す

2026-03-06 | lain

Vertex Shaderでノイズ変形（Displacement）させた立体に、偏微分と外積を用いて「正しい法線」を再計算（捏造）し、破綻した光と影を取り戻す手法を解説します。

カテゴリ： Procedural Shader

タグ： #Noise#GLSL#Three.js#Math#3D

[Next.js #25] Three.js×MMD：モデル情報スナップショット→UI反映→デバッグ機能まで一気に固める

2026-03-05 | lain

3D時計UIは“レイアウト”より先に“文字”で完成度が決まる。巨大な時刻表示・HUD・右パネルを崩さず、数字/曜日/天気を作品っぽく整えるフォント設計とCSS変数の管理をまとめる。

カテゴリ： Next.js

タグ： #Three.js#MMD#Typography#UI#CSS

[Noise 入門 #26] Vertex Shaderによる頂点変形（Displacement） — ノイズで立体を鼓動させる

2026-03-05 | lain

Noise 入門シリーズ第26回。ピクセルを塗るFragment Shaderから、立体を直接歪めるVertex Shaderの世界へ。法線（Normal）に沿った頂点移動の基本と、分割数の罠、そしてThree.js + GLSLを用いたリアルタイムな3Dモデルの変形（Displacement）を解説します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Three.js#Vertex Shader#Displacement