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

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

学びと再出発の旅路へ。

注目のプロジェクト

注目

[WEB Add] 3D WebGL Benchmark ─ Three.jsで数百万ボクセルを描画するGPUベンチマーク

Three.jsとInstancedMeshを駆使し、ブラウザ上で数百万〜数千万個のボクセルを描画してGPUを限界まで追い込むベンチマークアプリを開発・公開しました。

注目

[Chrome Add-on] Gemini VOICEVOX Reader

Google Gemini の回答を、VOICEVOX で自動的に読み上げる Chrome 拡張をリリースしました。

注目

[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 #48] Three.js × InstancedMeshによる400万ボクセル描画

2026-03-21 | lain

Noise入門シリーズで解説したInstancedMeshによるボクセル生成をNext.js環境に実装。当初の目標だった10万個を大きく超え、所有するRTX 4070 Tiの限界である「400万個（2000×2000）」のブロック描画とシャドウ処理の限界負荷テストを実行した記録です。

カテゴリ： Next.js Procedural

タグ： #Three.js#Noise#Voxel#Optimization#GPU

[Noise 入門 #42] Three.js × InstancedMesh — 10万のブロックで「最初の大地」を構築する

2026-03-21 | lain

Noise入門シリーズ第42回。Three.jsのInstancedMeshを活用し、1回のDraw Callで10万個のボクセルを描画する最適化手法を解説。FBMノイズと行列操作を組み合わせ、ブラウザ上にプロシージャルな「最初の大地」を錬成します。

カテゴリ： Procedural

タグ： #Three.js#Noise#Voxel#Optimization

[Next.js #47] Procedural Solar System VR — WebXR で宇宙のスケールを体感する

2026-03-20 | lain

ノイズで生成した太陽系を WebXR に対応させ、Meta Quest 2 等で体験可能にしました。VR 特有の描画ループ、移動ロジック、そして『宇宙全体のスケーリング』に関する実装を解説します。

カテゴリ： Next.js

タグ： #Three.js#WebXR#GLSL#Procedural

[Noise 入門 #41] 第5集開幕 — 終わらない世界を錬成する（Minecraft的なボクセル地形とチャンクの基礎）

2026-03-20 | lain

Noise入門シリーズ第41回、いよいよ第5集「Procedural World編」が開幕。FBMノイズを用いたMinecraftのような無限に広がるボクセル地形の生成原理と、世界を分割管理する「チャンク（Chunk）」の概念を解説します。

カテゴリ： Procedural

タグ： #Noise#Voxel#FBM#Chunk#GameDev

[Next.js #46] Procedural Solar System ― Three.js × GLSL ─ ノイズだけで描く「太陽系全惑星」と「星雲」

2026-03-19 | lain

Noise入門第4集の集大成。GLSLによるプロシージャルノイズを駆使し、水星から海王星までの全8惑星、小惑星帯、そして宇宙を包み込む星雲をThree.js上に完全構築しました。

カテゴリ： Next.js Three.js

タグ： #GLSL#Shader#WebGL#Procedural#CreativeCoding

[Noise 入門 #40] 第4集完結 — 太陽系を錬成する（Procedural Solar System）

2026-03-19 | lain

Three.jsとGLSLを組み合わせた「Noise入門」第4集の完結編。これまでの技術を総動員し、ブラウザ上にプロシージャルなミニ太陽系を構築する手法を解説します。

カテゴリ： Procedural

タグ： #Noise#Three.js#GLSL#Shader#WebGL#宇宙

[Next.js #45] Procedural Rings — 1Dノイズと極座標で描く惑星の環と影の同期

2026-03-18 | lain

Next.js / Three.js 実装シリーズ第45回。1Dノイズと極座標系を用いて、土星のような「惑星の環」をプロシージャルに生成。惑星のターミネーター（昼夜の境界）とリングの影を数学的に完璧に同期させるシェーダー技術を実装します。

カテゴリ： Next.js

タグ： #Next.js#Three.js#GLSL#Shader#Procedural

[Noise 入門 #39] Procedural Rings — 惑星を彩る塵と氷の軌道

2026-03-18 | lain

Noise 入門シリーズ第39回。極座標系と1Dノイズを用いて、土星のような「惑星の環（Rings）」をプロシージャルに生成します。無数の塵と氷が描く軌道をGLSLで錬成しましょう。

カテゴリ： Procedural

タグ： #Noise#GLSL#Three.js#Shader#Creative Coding

[Next.js #44] Blender × R3F：物理演算による「砕ける演出」の構築

2026-03-17 | lain

Blenderで分割したモデルをNext.js + R3F上で物理演算させ、幻想的に砕け散る演出を実装しました。

カテゴリ： Next.js

タグ： #3D Development#R3F#Three.js#Blender#Rapier#GLSL#Noise

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

注目のプロジェクト

おすすめ記事

最新記事