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

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

学びと再出発の旅路へ。

注目のプロジェクト

注目

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

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

注目

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

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

注目

[Chrome Add-on] ChatGPT Question Redactor

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

注目

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

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

最新記事

$[Noise 入門 #02] ノイズを作る数学の基礎 — グリッド・勾配・補間を理解する$

[Noise 入門 #02] ノイズを作る数学の基礎 — グリッド・勾配・補間を理解する

2026-02-09 | lain

Perlin・Simplex に共通する“ノイズの根本数学”。グリッド、勾配ベクトル、内積、補間、frequency・amplitude の基礎を徹底的に整理する回。

カテゴリ： Procedural

タグ： #Noise#Perlin#Simplex#Shader#Three.js#WebGL

[Next.js #10] R3F × GLSL で “動く雲の SkyDome” を作る：FBM ノイズで空を生成

2026-02-09 | lain

R3F × GLSL で FBM ノイズを使った “動く雲の SkyDome” を実装し、地形に続いて空を生成する方法を解説します。

カテゴリ： Next.js

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

[Next.js #09] Perlin/FBM ノイズで地形を作り、プレイヤーを Raycast で追従

2026-02-08 | lain

R3F(React Three Fiber) 上で FBM ノイズ地形を生成し、Raycaster で地面の高さを取得してプレイヤーを自然に追従させる。地形生成（頂点Z変形・法線再計算・標高カラー）から、WASD移動＋atan2回転、hit安全処理とLERP補間までを最小構成でまとめる。

カテゴリ： Next.js

タグ： #R3F#Three.js#Noise#Perlin#FBM#Raycast#Terrain#MMD#WebGL

[Noise 入門 #01] ノイズとは何か？— 滑らかな乱数の正体を理解する

2026-02-08 | lain

ゲーム開発・CG制作で使われる“ノイズ”の正体を、ランダムとの違いから基礎レベルで理解する。Perlin/Simplex 以前に知るべき核となる概念を解説。

カテゴリ： Procedural

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

[Next.js #08]VRM / BVH / PMX を Next.js（R3F）で扱うための互換性と実装整理

2026-02-08 | lain

VRM・BVH・PMX を Next.js(App Router) + React Three Fiber で扱う際の互換性、使用すべきバージョン、正しいローダー構成、そして避けるべき組み合わせを整理する技術ドキュメント。

カテゴリ： Next.js

タグ： #R3F#Three.js#VRM#BVH#PMX#MMD#WebGL

[Next.js #07] R3FでglTF/VRMを扱うための“橋渡し”基礎まとめ

2026-02-07 | lain

Three.jsを理解している前提で、R3FでglTF/VRMを扱うための本質だけをまとめる。Three.jsとR3Fの思想の違い、glTF読込みの仕組み、VRM特有の落とし穴、モデルビューアー設計の基礎を効率的に整理する。

カテゴリ： Next.js

タグ： #ReactThreeFiber#glTF#VRM#Three.js#React

[Next.js #06]多段キャンバス構造の設計図：2D Canvas と 3D（R3F）を重ねて扱う方法

2026-02-06 | lain

Next.js で DOM・2D Canvas・3D Canvas（R3F）を3層構造で扱うための設計パターンを解説します。ゲームUIやインタラクティブな Web 表現に必須となる多段キャンバス構造の実装方法をまとめました。

カテゴリ： Next.js

タグ： #React#R3F#Three.js#Canvas#WebGL

[Next.js #05] App Router の“基本 UI 構造”を理解する：layout / page / component / client-server の境界

2026-02-05 | lain

R3F や WebXR に進む前に、Next.js(App Router) の UI の基礎を整理する回。layout / page / component の役割や、Server/Client Component の境界をまとめて理解する。

カテゴリ： Next.js

タグ： #Next.js#AppRouter#React#WebDev

[Next.js #04] R3F × WebXR の構造：Canvas ループと XR の衝突を理解する

2026-02-04 | lain

Next.js(App Router) + R3F + WebXR 環境で必ず発生する“レンダリングループの衝突”を、内部構造から解説する回。R3F の frameloop・advance・state.clock が XR の animationLoop と同期しない理由、useFrame の遅延、XRControllerModelFactory の不整合、Suspense が XR 中で危険な構造、そして正しい setAnimationLoop 併用方法まで網羅する。

カテゴリ： Next.js

タグ： #R3F#WebXR#Three.js#Next.js#Performance#VRM

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

注目のプロジェクト

おすすめ記事

最新記事