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 #38] Interactive Storm on Sphere Planet — マウスで台風を錬成する Three.js / GLSL 実装

2026-03-14 | lain

Next.js / Three.js / GLSL で球体惑星の雲へ局所的な干渉を加え、マウス操作で巨大な台風を発生させるインタラクションを実装します。Raycasterで取得した球面座標をもとに、FBM雲・Curl Noise・接線方向の渦ベクトルを合成し、台風の目まで持つ気象表現へ発展させます。

カテゴリ： Next.js

タグ： #Next.js#Three.js#GLSL#Shader#Procedural#Noise#FBM#Curl Noise#Raycaster#Domain Warping

[Noise 入門 #35] Interactive Storm — マウスで気象を操り「巨大な台風」を錬成する

2026-03-14 | lain

Noise 入門シリーズ第35回。鑑賞するだけのノイズから「触れるノイズ」へ。Three.jsのRaycasterとCurl Noiseを組み合わせ、マウス操作で雲海に巨大な台風の渦を発生させるインタラクティブな気象システムの実装手法を解説します。

カテゴリ： Procedural

タグ： #GLSL#Three.js#Noise#Raycaster#Interactive

【Next.js #37】Three.js + MMD 時計アプリに動画壁紙を実装 — mp4をIndexedDBへ保存してループ再生する

2026-03-13 | lain

Three.js + MMD 時計アプリに、静止画壁紙に加えて mp4 の動画壁紙機能を追加。ドラッグ＆ドロップで IndexedDB に保存し、Wallpaper UI から選択、無音ループ再生、起動時復元、動画サムネ表示まで実装した記録。

カテゴリ： Next.js

タグ： #Three.js#JavaScript#IndexedDB#Video Texture#UI#MMD#Wallpaper

【Next.js #36】Procedural Clouds on Sphere — 雲海をまとったノイズ惑星を Three.js + GLSL で拡張する

2026-03-13 | lain

前回作成した Procedural Biome Planet をベースに、外側へ Cloud Sphere を追加し、4D FBMノイズで流れる雲海を実装。雲の濃淡表現、地表への影フェイク、Atmosphere と組み合わせた“生きた惑星”表現を Three.js + GLSL で構築した記録。

カテゴリ： Next.js

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

[Noise 入門 #34] Procedural Clouds on Sphere — 惑星を包み込む「生きた雲海」を錬成する

2026-03-13 | lain

Three.jsとGLSLを用いて、プロシージャルな惑星にFBMノイズを活用した「動く雲海」を実装。地形の上に雲の層を重ね、地表に影を落とすことで生きた気象システムを構築します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Three.js#FBM#Shader

[Next.js #35] MMD時計アプリの設定UIを実装 — 壁紙・時計色・床シェーダー・MotionAssets保存対応

2026-03-12 | lain

Three.js製MMD時計アプリに設定UIを実装。アナログ時計・デジタル時計・壁紙・床シェーダー・MotionAssetsの各種設定をGUIから変更し、localStorage と IndexedDB で保存・復元できる構成を整備しました。

カテゴリ： Next.js

タグ： #Three.js#MMD#IndexedDB#localStorage#WebGL#GLSL#Shader#UI

[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 と大気散乱 — ノイズ惑星に海と森、そして「青い空」を纏わせる

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で球体ノイズにクリック波紋を加える

2026-03-11 | lain

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

カテゴリ： Next.js

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

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

注目のプロジェクト

おすすめ記事

最新記事