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 3D #53] プロシージャルな植生配置とGUIによる動的コントロール — 確率マップで森を錬成する

2026-03-26 | lain

Noise 入門 #47 の理論を Next.js × Three.js 環境に実装。Web Worker でのノイズ確率マップ計算と InstancedMesh による数万本の植生の爆速描画、さらに GUI を使ったリアルタイムな環境コントロールについてまとめます。

カテゴリ： Development

タグ： #Three.js#Next.js#Procedural#Voxel#InstancedMesh#GUI

[Noise 入門 #47] Object Distribution — ノイズを「確率マップ」にして植生を群生させる

2026-03-26 | lain

Noise 入門シリーズ第47回。ボクセル地形にランダムではなく自然な「群生」を作るため、ノイズを確率マップ（Probability Map）として扱い、草木を配置する数学的アプローチを解説します。

カテゴリ： Procedural

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

[Next.js #52] Procedural Caves の実装 — ヒメドローンで未知の地下空間を探索する

2026-03-25 | lain

ノイズ入門 #46 で解説した「Perlin Worms」による洞窟生成アルゴリズムを Three.js と Web Workers で実装。飛行機からドローンに乗り換え、TPSオービットカメラとスポットライトを駆使してプロシージャルな地下迷宮を探索します。

カテゴリ： Next.js

タグ： #Procedural#Three.js#WebGL#Voxel#Web Worker

[Noise 入門 #46] Procedural Caves — 3DノイズとPerlin Wormsで「地下世界」を削り出す

2026-03-25 | lain

Noise 入門シリーズ第46回。3Dノイズによる「密度」の数式と、地下に複雑に絡み合うトンネルを形成する「Perlin Worms（パーリンの虫）」のアルゴリズムを用いて、プロシージャルな洞窟を錬成する手法を直感的に解説します。

カテゴリ： Procedural Algorithm

タグ： #Noise#Voxel#3D#Math

[Next.js #51] Web Workersで作る無限の浮遊大陸とフライトシミュレーター

2026-03-24 | lain

Web Workersと3D密度ノイズを駆使して、ブラウザ上で無限に広がる浮遊大陸と立体的な雲を生成。RTX 4070 Tiのパワーを最大限に引き出すWorker Poolの実装から、高度による深淵の演出まで。

カテゴリ： Next.js

タグ： #Three.js#Web Workers#Noise#Voxel#Procedural Generation

[Noise 入門 #45] Web Workers と 3D Noise — 非同期生成と「密度」で空間を定義する

2026-03-24 | lain

チャンク生成時のカクつきを解消するWeb Workersの導入と、2Dのハイトマップから3Dの「密度（Density）」を用いた地形生成へのパラダイムシフトを解説します。

カテゴリ： Procedural

タグ： #Noise#Three.js#Web Workers#3D#Optimization

[Next.js #50] 無限のボクセル世界を飛ぶ — フライトシミュレーターとボクセル雲の実装

2026-03-23 | lain

Noise入門シリーズで構築した「Chunk Manager」を応用し、プロシージャルに生成される無限のボクセル世界を飛び回るフライトシミュレーターを実装します。クォータニオンによる機体制御と、ボクセル雲の動的生成を解説。

カテゴリ： Next.js

タグ： #Three.js#Procedural#GameDev

[Noise 入門 #44] Chunk Manager の実装 — 無限の世界を動的に生成・管理する

2026-03-23 | lain

Noise入門シリーズ第44回。前回のバイオーム実装を拡張し、Three.jsとOOP（オブジェクト指向）を用いて無限に広がる世界を動的に生成・破棄する「チャンクマネージャー」の設計と実装手法を解説します。

カテゴリ： Procedural

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

[Next.js 49] InstancedMeshの表現力拡張 — シード生成・レトロパレット・動的ライティング

2026-03-22 | lain

前回のInstancedMeshを用いた100万ブロックの描画テストに続き、今回は「色」と「時間」の概念を導入。シード値による地形生成（Mulberry32）、Y座標ベースのバイオーム表現（C64風レトロパレット）、そしてライトの円軌道アニメーションによる動的ライティングの実装と最適化手法を解説します。

カテゴリ： Next.js Procedural

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

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

注目のプロジェクト

おすすめ記事

最新記事