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

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

学びと再出発の旅路へ。

注目のプロジェクト

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

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

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

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

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

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

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

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

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

注目
[Chrome Add-on] ChatGPT Question Redactor

[Chrome Add-on] ChatGPT Question Redactor

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

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

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

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

おすすめ記事

最新記事

[Next.js #34] Procedural Biome Planet — Three.js × GLSLでノイズ惑星に海・森・雪・大気を与える

[Next.js #34] Procedural Biome Planet — Three.js × GLSLでノイズ惑星に海・森・雪・大気を与える

2026-03-12 | lain

Noise 入門 #33 の内容をもとに、Next.js プロジェクト内で Procedural Biome と大気散乱を実装。球体ノイズ地形に海・砂浜・森・雪・岩肌を割り当て、Fresnel で青い大気を重ね、GUI で地形や流れ方向まで調整できる惑星デモとしてまとめます。

カテゴリ： Next.js

タグ： #Three.js#GLSL#Noise#Procedural#Shader#Planet#Biome

[Noise 入門 #33] Procedural Biome と大気散乱 — ノイズ惑星に海と森、そして「青い空」を纏わせる

[Noise 入門 #33] Procedural Biome と大気散乱 — ノイズ惑星に海と森、そして「青い空」を纏わせる

2026-03-12 | lain

前回錬成したノイズの地形（球体）に「生命の息吹」を与えます。高さ（Height）と傾斜（Slope）に基づいて海や森、雪山を塗り分けるProcedural Biomeの実装と、フレネル反射を用いた大気（Atmosphere）のシミュレーション手法をGLSLで直感的に解説します。

カテゴリ： Procedural Shader Three.js

タグ： #Noise#GLSL#WebGL#Math#3D

[Next.js #33] Interactive Noise Sphere — Three.js × GLSLで球体ノイズにクリック波紋を加える

[Next.js #33] Interactive Noise Sphere — Three.js × GLSLで球体ノイズにクリック波紋を加える

2026-03-11 | lain

平面で触れるノイズ場を作った前回実装を球体へ拡張。SphereGeometry、Raycaster、GLSLを使い、球体表面にクリック波紋が広がるインタラクティブなノイズ惑星デモを作成。背景用スカイスフィアも加え、触れる3D世界として整理します。

カテゴリ： Next.js

タグ： #Next.js#Three.js#GLSL#Shader#Raycaster#SphereGeometry#Noise#Interactive#WebGL

[Next.js #32] Three.js MMDアプリにモデルZIP / 壁紙 / IndexedDB管理を実装 — ローカルアセット基盤の整備

[Next.js #32] Three.js MMDアプリにモデルZIP / 壁紙 / IndexedDB管理を実装 — ローカルアセット基盤の整備

2026-03-10 | lain

Three.js + MMD + WebXR系アプリに、モデルZIPのドラッグ＆ドロップ取込、Blob変換、IndexedDB保存、モデル一覧、壁紙サムネ一覧、削除UIを実装。ローカルアセット管理基盤を整備した記録。

カテゴリ： Next.js

タグ： #Next.js#Three.js#MMD#PMX#IndexedDB#JSZip#Blob#WebXR#Quest2#Asset Management

[Next.js #31] Touching Noise Field — Three.js × GLSLで“触れるノイズ場”を作る

[Next.js #31] Touching Noise Field — Three.js × GLSLで“触れるノイズ場”を作る

2026-03-10 | lain

Three.jsとGLSLを使い、Raycasterで取得したマウス位置をもとに局所的なDomain Warpingを発生させる“触れるノイズ場”を実装。PlaneGeometry上の頂点変形と色設計を組み合わせ、鑑賞するノイズから体験するノイズへ発展させる。

カテゴリ： Next.js

タグ： #Next.js#Three.js#GLSL#Shader#Raycaster#Domain Warping#Noise#Interactive Art#WebGL

アプリを作るとは何か？ — バンド演奏に学ぶ、UIと責務の哲学

アプリを作るとは何か？ — バンド演奏に学ぶ、UIと責務の哲学

2026-03-09 | lain

アプリ制作は、機能を足すことではなく、役割を設計し、出る・引く・渡すを整えながら、ひとつの体験に仕上げること。T-SQUARE のバンド演奏を手がかりに、UI設計・責務分離・全体最適の本質を考える。

カテゴリ： Philosophy UI/UX

タグ： #アプリ開発#UI設計#UX#責務分離#設計思想#哲学#T-SQUARE#宝島#バンド演奏#全体最適