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

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

学びと再出発の旅路へ。

注目のプロジェクト

注目

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

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

注目

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

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

注目

[Chrome Add-on] ChatGPT Question Redactor

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

注目

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

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

最新記事

[Next.js #18] R3Fで「無限の水平線」を作る — Ocean & Volumetric Clouds

2026-02-16 | lain

Next.js + R3F 実装連載第18回。Three.js公式のWaterシェーダーによる海面表現と、レイマーチングを用いたボリューメトリックな雲を組み合わせ、リアルな自然環境を構築します。

カテゴリ： Next.js Three.js

タグ： #React Three Fiber#Shader#WebGL#Raymarching

[Noise 入門 #09] Volumetric Clouds — ノイズで空に雲を浮かべる（レイマーチング基礎）

2026-02-16 | lain

平面（Surface）の世界から体積（Volume）の世界へ。これまでの知識（FBM、Warping、Curl）を総動員し、レイマーチングを用いて「中に入って飛べる雲」を数学的に彫り出す方法を解説します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Raymarching#Three.js#Volumetric

[Noise 入門 #08] Curl Noise — ノイズは“流れ”になる。流体シミュレーションを使わずに流体を作る

2026-02-15 | lain

ノイズは単なる「ザラザラした模様」ではない。適切な数学（Curl演算子）を通すことで、それは「流体」へと進化する。重たい物理演算を使わずに、煙や水流のような「圧縮されない滑らかな動き」を作る Curl Noise のアルゴリズムと実装を解説。

カテゴリ： Procedural Shader Math

タグ： #Noise#GLSL#Three.js#Curl Noise#Vector Field#Fluid

[Next.js #17] R3Fでドラッグ操作可能なルービックキューブを実装する

2026-02-15 | lain

配列データの管理から物理ベースの設計へ。R3Fでドラッグ操作、角丸の高級マテリアル、そして動的なグループ化を用いたルービックキューブの実装プロセスを解説します。

カテゴリ： Next.js

タグ： #React Three Fiber#Three.js#WebGL#Rubik's Cube#3D

[Next.js #16] R3FでGLTFモデルを横スライド切替する3Dビューアを実装する

2026-02-14 | lain

React Three Fiberで複数のGLTFモデルを横スライド切替できる3Dビューアを実装。モデルの自動センタリング、スケール正規化、Box3による接地処理、lerpによるスムーズ移動、ドラッグ操作の仕組みまで整理する。

カテゴリ： Next.js

タグ： #React Three Fiber#R3F#GLTF#Three.js#3D Viewer

[Noise 入門 #07] Three.js + GLSLでDomain Warpingを実装する — 数式を世界に変換する

2026-02-14 | lain

Domain Warping を Three.js + GLSL で実装する実践回。ノイズを“値の揺らぎ”から“空間変形アルゴリズム”へと引き上げ、FBMとの組み合わせ、strength制御、時間拡張までを体系的に解説します。

カテゴリ： Procedural

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

[Next.js #15] Next.js + R3F で 5万本の草原を生成する – InstancedMesh + GPUシェーダー

2026-02-13 | lain

React Three Fiber で大量の草をGPUで描画する方法。InstancedMesh・シェーダー揺れ・FBM地形・疑似法線ライティングまで実装。

カテゴリ： Next.js

タグ： #R3F#Three.js#WebGL#Shader#InstancedMesh#GPU

[Noise 入門 #06] Domain Warping — 座標をねじると世界が壊れる

2026-02-13 | lain

Domain Warping は“ノイズの入力座標そのものを歪ませる”技術。FBMと組み合わせることで、渦・煙・雲・ブラックホールのような自然構造を生み出せる。本記事では図解と数式で直感的に理解する。

カテゴリ： Procedural

タグ： #Noise#Domain Warping#FBM#Perlin#Shader#Three.js#WebGL

[Noise 入門 #05] Fractal Brownian Motion（FBM）— ノイズを“自然界の複雑さ”へ進化させる

2026-02-12 | lain

Perlin Noise を“自然な地形・雲・水”に変える魔法の技術、Fractal Brownian Motion（FBM）を図解とコードで理解する。Frequency / Amplitude / Octave がどのように積み重なるか、Three.js/Shader で応用するための基礎を整理します。

カテゴリ： Noise

タグ： #PerlinNoise#FBM#WebGL#Shader#Three.js

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

注目のプロジェクト

おすすめ記事

最新記事