![[Noise 入門 #26] Vertex Shaderによる頂点変形（Displacement） — ノイズで立体を鼓動させる](https://assets.lain-lab.com/images/uploads/noise-intro-26-vertex-displacement.webp)
[Noise 入門 #26] Vertex Shaderによる頂点変形（Displacement） — ノイズで立体を鼓動させる
3Dモデルに生命を吹き込むVertex ShaderでのDisplacement手法。頂点の法線ベクトルを利用してノイズで立体を変形させる原理と、Three.jsでの実装方法を図解とGLSLコードで直感的に解説。
ARCHIVE_INDEX / PAGE_9
TOTAL_ITEMS: 582
![[Next.js #24] 3D時計UIを“作品”に変えるタイポグラフィ設計（Three.js×MMD）](https://assets.lain-lab.com/images/uploads/nextjs-24-font-matter-ui-typography-threejs-mmd.webp)
[Next.js #24] 3D時計UIを“作品”に変えるタイポグラフィ設計（Three.js×MMD）
Next.js×Three.js×MMDで作った3D時計に、上部ツールバー/右パネル/HUDを追加。UIが整った今こそフォント設計が効く。巨大な時刻表示、曜日/天気、HUD、パネルの階層を崩さず“作品っぽさ”を上げるためのフォント選定・スケール・letter-spacing・shadow・数字の見せ方と、CSS変数での管理方法を整理する。
![[Noise 入門 #25] Three.js × GLSL の架け橋 — ShaderMaterial と EffectComposer でノイズをブラウザに解き放つ](https://assets.lain-lab.com/images/uploads/noise-intro-25-threejs-shader-bridge.webp)
[Noise 入門 #25] Three.js × GLSL の架け橋 — ShaderMaterial と EffectComposer でノイズをブラウザに解き放つ
Noise 入門シリーズ第25回。純粋なGLSLコードをThree.jsに統合し、インタラクティブなノイズ表現を実現するエンジニアリングの基礎を学びます。ShaderMaterialによるマテリアル制御、Uniformsによる時間同期、EffectComposerを用いたポストプロセスのセットアップまでを体系的に整理します。
![[Next.js #23] Three.js×MMD：ランダム歩行・ランダム会話・VPDポーズで“動く3D時計”へ進化](https://assets.lain-lab.com/images/uploads/nextjs-23-threejs-mmd-random-walk-talk-vpd.webp)
[Next.js #23] Three.js×MMD：ランダム歩行・ランダム会話・VPDポーズで“動く3D時計”へ進化
Next.js×Three.jsで構築した3D時計に、MMD(PMX/VMD/VPD)のランダム歩行・ランダム会話・カメラ追従・ポーズ適用を統合。レスポンシブ床スケール、吹き出しCanvasスプライト、VMD停止制御、talk中のVPD適用など“キャラクターとして動く時計”に進化させた実装まとめ。
![[Noise 入門 #24] Post-Processing × Noise — 世界を歪める「空間ハック」の魔法（水中の揺らぎ・陽炎・グリッチ）](https://assets.lain-lab.com/images/uploads/noise-intro-24-post-processing.webp)
[Noise 入門 #24] Post-Processing × Noise — 世界を歪める「空間ハック」の魔法（水中の揺らぎ・陽炎・グリッチ）
Noise 入門シリーズ第24回。空間内のオブジェクトではなく、レンダリングされた画面全体（カメラ）に対してノイズを適用する「ポストプロセス」の世界へ。UV座標のサンプリング偽装を用いて、水中、陽炎、次元が崩壊するグリッチエフェクトをGLSLで実装する手法を直感的に解説します。
![[Next.js #22] Three.jsで作る理想のWEB時計：3Dアナログ×3Dデジタル×ノイズ背景×lil-gui調整](https://assets.lain-lab.com/images/uploads/nextjs-22-threejs-3d-clock-ui-noise-gui.webp)
[Next.js #22] Three.jsで作る理想のWEB時計：3Dアナログ×3Dデジタル×ノイズ背景×lil-gui調整
Next.jsプロジェクトのpublic/index.htmlで孤立起動するThree.js時計を実装。ベベル付きジオメトリでアナログ時計、TextGeometryで3DデジタルUI、onBeforeCompileで壁にノイズ注入、EffectComposer+Bloom、lil-guiで露出/ライト/UI色/ノイズ/床シェーダをライブ調整。MMD(PMX)のロードと簡易歩行も添える。
![[Noise 入門 #23] 極座標 × 4D Noise — GLSLで「プロシージャルな魔法陣」を展開する](https://assets.lain-lab.com/images/uploads/noise-intro-23-polar-coordinates-magic-circle.webp)
[Noise 入門 #23] 極座標 × 4D Noise — GLSLで「プロシージャルな魔法陣」を展開する
Shaderにおける極座標（Polar Coordinates）の基礎から、4D Simplex Noiseを用いた円環状のオーラ生成まで。幾何学的な秩序とノイズの揺らぎを掛け合わせ、脈打つようなプロシージャル魔法陣をGLSLで実装する手法を詳しく解説します。
![[Next.js #21] Canvas 2Dで挑む「タイムパイロット」式 全方位カメラと無限の雲海](https://assets.lain-lab.com/images/uploads/nextjs-21-canvas-2d-screen-rotation-shooter-procedural-noise.webp)
[Next.js #21] Canvas 2Dで挑む「タイムパイロット」式 全方位カメラと無限の雲海
WebGLを使わずに、描画コンテキストの Translate・Scale・Rotate の順序を制御することで、2D座標系の中に奥行きと旋回感を生み出すテクニックを解説します。
![[Noise 入門 #22] Domain Warping の真骨頂 — GLSLで空間をねじ曲げ「ブラックホール」を錬成する](https://assets.lain-lab.com/images/uploads/noise-intro-22-blackhole-domain-warping.webp)
[Noise 入門 #22] Domain Warping の真骨頂 — GLSLで空間をねじ曲げ「ブラックホール」を錬成する
Shaderで空間を歪曲し、重力レンズ効果や事象の地平面、降着円盤を表現。FBMとDomain Warpingを用いてブラックホールをプロシージャルに錬成するGLSLの実践的な解説です。
![[Next.js #20] R3F×GLSL ドメイン・ワーピング：Bloom不要の発光と流体表現](https://assets.lain-lab.com/images/uploads/nextjs-20-r3f-domain-warping-chroma.webp)
[Next.js #20] R3F×GLSL ドメイン・ワーピング：Bloom不要の発光と流体表現
React Three Fiberでドメイン・ワーピング(Domain Warping)を実装し、有機的なうねりと虹色のスペクトル・カラーを表現する方法を解説。外部Bloomライブラリを使わず、GLSLのみで高輝度な発光を実現するテクニックも紹介。
![[Noise 入門 #21] Shader 実践編開幕 — 4DノイズとGLSLで「プロシージャルな炎」を錬成する](https://assets.lain-lab.com/images/uploads/noise-intro-21-procedural-fire-glsl.webp)
[Noise 入門 #21] Shader 実践編開幕 — 4DノイズとGLSLで「プロシージャルな炎」を錬成する
Noise 入門シリーズ第21回。いよいよ第3集「Shader（GLSL）実践編」がスタート。これまで学んだノイズの数学とアルゴリズム（FBM、4D Noise）を総動員し、GPUの力で画面上に「燃え盛るプロシージャルな炎」を実装する方法を直感的に解説します。
![[Babylon.js #13] メビウス帯の継ぎ目バグ修正（上下反転）＋WebXRローラーコースター化](https://assets.lain-lab.com/images/uploads/babylonjs-13-mmd-mobius-fix-seam-flip-webxr-coaster.webp)
[Babylon.js #13] メビウス帯の継ぎ目バグ修正（上下反転）＋WebXRローラーコースター化
メビウス帯の継ぎ目で発生する姿勢フリップを、2つの等価姿勢から連続性を保つ方を選択することで解消。WebXRでは回転を上書きせず位置のみ追従し、HMD head tracking を維持したままVR体験を作る。