![[Noise 入門 #15] Simplex Noise を GLSL で実装する — 空間と時間を歪める 4D の魔法](https://assets.lain-lab.com/images/uploads/noise-intro-15-simplex-noise-glsl.webp)
[Noise 入門 #15] Simplex Noise を GLSL で実装する — 空間と時間を歪める 4D の魔法
Noise 入門シリーズ第15回。Simplex Noise のアルゴリズムを GPU（GLSL）で動かすための具体的な実装手法を解説。空間を歪ませる Skewing 係数の意味から、3D、そして時間をパラメータに加えた 4D ノイズまで、パフォーマンスを維持したまま滑らかなアニメーションを実現する技術をまとめます。
ARCHIVE_INDEX / PAGE_11
TOTAL_ITEMS: 582
![[Babylon.js #07] 地形上を複数MMDキャラが隊列移動する仕組みを作る](https://assets.lain-lab.com/images/uploads/babylonjs-07-mmd-party-formation-follow.webp)
[Babylon.js #07] 地形上を複数MMDキャラが隊列移動する仕組みを作る
Babylon.js と babylon-mmd を使い、MMDキャラクターの複数体運用を一歩進めて、地形上での隊列移動（RPG風の縦列歩行）を実装します。TransformNode による制御、Ray による地面吸着、Yaw 補間、履歴追従、PARTY_TUNE による調整値の分離までまとめます。
![[Noise 入門 #14] Simplex Noise — Perlin Noiseを過去にした「正三角形」の魔法](https://assets.lain-lab.com/images/uploads/noise-intro-14-simplex-noise.webp)
[Noise 入門 #14] Simplex Noise — Perlin Noiseを過去にした「正三角形」の魔法
Noise 入門シリーズ第14回。高次元での計算コストを抑え、より自然な結果を生み出すSimplex Noiseのアルゴリズムを解説。空間を歪ませるSkewingなど、数学的な魔法の構造に迫ります。
![[Babylon.js #06] MMDキャラクターを地形上で動かす（複数体・ランダム移動・地面吸着）](https://assets.lain-lab.com/images/uploads/babylonjs-06-mmd-walkers-on-terrain.webp)
[Babylon.js #06] MMDキャラクターを地形上で動かす（複数体・ランダム移動・地面吸着）
Babylon.js + babylon-mmd で MMD キャラを地形上に配置し、ランダム移動・向き補間・地面吸着を実装する記事。複数体（clone / 別モデル）構成や VR 時のパフォーマンス所感も紹介。
![[Babylon.js #05] fBmノイズ地形とthin instancesで草原を作る](https://assets.lain-lab.com/images/uploads/babylonjs-05-fbm-terrain-thin-instances-grass.webp)
[Babylon.js #05] fBmノイズ地形とthin instancesで草原を作る
Babylon.jsでfBmノイズ地形を生成し、thin instancesで草原を描画。地面変形・法線再計算・沈み込み防止・草の風揺れシェーダ・DynamicTexture地面テクスチャ・WebXR移動までを実装した記録。
![[Noise 入門 #13] Voronoi Noiseの実践 — 数式で「岩肌」「ひび割れ」「クリスタル」を錬成する](https://assets.lain-lab.com/images/uploads/noise-intro-13-voronoi-applications.webp)
[Noise 入門 #13] Voronoi Noiseの実践 — 数式で「岩肌」「ひび割れ」「クリスタル」を錬成する
Noise 入門シリーズ第13回。前回学んだVoronoiの概念をShader（GLSL）の実装へと落とし込みます。F1とF2の組み合わせによるテクスチャ表現のバリエーションや、Domain Warpingとの融合による有機的な質感作りまでを網羅。
![[Babylon.js #04] HTTPS設定からQuest2でのWebXR没入体験まで](https://assets.lain-lab.com/images/uploads/babylonjs-04-https-to-webxr-quest2-immersive.webp)
[Babylon.js #04] HTTPS設定からQuest2でのWebXR没入体験まで
Babylon.jsでWebXRを動かすにはHTTPS（Secure Context）が必須。本記事ではViteでのSSL設定、mkcertによるローカル証明書生成、Babylon.jsのcreateDefaultXRExperienceAsyncによるVR初期化、Quest2での没入体験までを体系的に解説する。
![[Noise 入門 #12] Voronoi / Worley Noise — 「距離」が描く細胞の幾何学](https://assets.lain-lab.com/images/uploads/noise-intro-12-voronoi-worley.webp)
[Noise 入門 #12] Voronoi / Worley Noise — 「距離」が描く細胞の幾何学
「一番近い点はどこか？」というシンプルな問いから生まれる幾何学的なパターン。Voronoi/Worley Noiseのアルゴリズム、距離関数の違い、そしてF1/F2を用いた質感表現の基礎を直感的に理解できるよう整理します。
![[Noise 入門 #11] Procedural Water — ノイズで海面を波立たせる（Gerstner Wave vs Noise）](https://assets.lain-lab.com/images/uploads/noise-intro-11-procedural-water.webp)
[Noise 入門 #11] Procedural Water — ノイズで海面を波立たせる（Gerstner Wave vs Noise）
Noise 入門シリーズ第11回。手続き型で生成する水面表現の核心に迫ります。FBMによるランダムな揺らぎと、Gerstner Waveによる物理的な『尖り』を持つ波の作り方を比較・融合し、Shaderで海を作る手法をまとめます。
![[Babylon.js #03] WebGPUで MMD 1,000体を走らせる：大量描画と影の最適化戦略](https://assets.lain-lab.com/images/uploads/babylonjs-03-webgpu-1000-instances-optimization.webp)
[Babylon.js #03] WebGPUで MMD 1,000体を走らせる：大量描画と影の最適化戦略
Babylon.jsとWebGPUを使い、1,000体のMMDモデルを同時描画。InstancedMeshによるパーツ単位の複製、ShadowGeneratorの解像度調整、行列計算の凍結など、ブラウザ上で軍勢を動かすための実践的ノウハウの記録。
![[Next.js #19] Next.js + R3F: 初心に帰るシャドウマップ実装とLevaでのパラメータ可視化](https://assets.lain-lab.com/images/uploads/nextjs-19-r3f-shadow-map-leva.webp)
[Next.js #19] Next.js + R3F: 初心に帰るシャドウマップ実装とLevaでのパラメータ可視化
React Three FiberにおけるDirectionalLightのシャドウマップ設定の基本解説。Levaを用いたバイアスや解像度、カメラ範囲（Frustum）のリアルタイム調整と、トラブルシューティングの基礎について。
![[Noise 入門 #10] Procedural Terrain Generation — 数学で大地を隆起させる](https://assets.lain-lab.com/images/uploads/noise-intro-10-terrain-generation.webp)
[Noise 入門 #10] Procedural Terrain Generation — 数学で大地を隆起させる
Perlin NoiseとFBMをVertex Shader（頂点シェーダー）に適用し、平面をリアルタイムに隆起させて山岳地帯を作ります。単なる波打ちを「山」に変えるRidge Noiseのテクニックや、高度・傾斜に基づくバイオーム塗り分けなど、プロシージャルな世界生成の基礎を実装します。