![[Astro #07] HugoからAstroへの移行とビルド最適化・クローリング検証](https://assets.lain-lab.com/images/uploads/astro-07-hugo-to-astro-migration-complete.webp)
[Astro #07] HugoからAstroへの移行とビルド最適化・クローリング検証
HugoからAstro + React + MDX環境への移行記録。旧環境からのリポジトリ軽量化、SSGビルド時のOOMエラー対応、MDXパーサーの仕様対応、および移行後のクローリング状況についてまとめる。
ARCHIVE_INDEX / PAGE_5
TOTAL_ITEMS: 606
![[Noise 入門 #57] Audio-Reactive Domain Warping — 音で歪む空間](https://assets.lain-lab.com/images/uploads/noise-intro-57-audio-reactive-domain-warping.webp)
[Noise 入門 #57] Audio-Reactive Domain Warping — 音で歪む空間
Noise入門シリーズ第57回。Web Audio APIで取得した低音や高音のデータをGLSLへ流し込み、Domain Warpingの強度やノイズの細かさを動的に制御。音楽と数式が連動して空間が崩壊する、サイケデリックな視覚表現のチューニング方法を直感的にまとめます。
![[Noise 入門 #56] Audio Analysis & FFT — 音響解析の基礎とノイズへの接続](https://assets.lain-lab.com/images/uploads/noise-intro-56-web-audio-api.webp)
[Noise 入門 #56] Audio Analysis & FFT — 音響解析の基礎とノイズへの接続
Noise 入門シリーズ第56回。ここから音とノイズが融合する第6集へ突入。ブラウザ上で音を「数式」に変換するFFTの仕組みと、解析したデータをThree.js経由でGLSLに渡し、Audio-Reactiveな世界を作るための土台を作ります。
![[Noise 入門 #55] 魔法文字とグリフ（Procedural Alien Runes）— 極座標とVoronoiが描く未知の言語](https://assets.lain-lab.com/images/uploads/noise-intro-55-procedural-alien-runes.webp)
[Noise 入門 #55] 魔法文字とグリフ（Procedural Alien Runes）— 極座標とVoronoiが描く未知の言語
Three.jsとGLSLを用いて、数式から意味ありげなシンボルを絞り出すアプローチ。Voronoiのセル境界と空間の円環的な歪みを掛け合わせ、インタラクティブな魔法文字を錬成するプロセスを直感的に学びます。
![[Noise 入門 #54] プロシージャル・プラズマとエネルギーシールド — ノイズの等高線とフレネルが描くSF的力場](https://assets.lain-lab.com/images/uploads/noise-intro-54-procedural-plasma-shield.webp)
[Noise 入門 #54] プロシージャル・プラズマとエネルギーシールド — ノイズの等高線とフレネルが描くSF的力場
Noise 入門シリーズ第54回。モヤモヤとした連続的なノイズを「鋭利で幾何学的なSF的エフェクト」へと変換するテクニック。サイン波による等高線（Contour）の抽出と、立体感を強調するフレネル効果を用いて、インタラクティブなエネルギーシールドを実装します。
![[Astro #06] R3Fで構築する3Dサイバーアーカイブの実装録と最適化](https://assets.lain-lab.com/images/uploads/astro-06-r3f-shorts-carousel.webp)
[Astro #06] R3Fで構築する3Dサイバーアーカイブの実装録と最適化
R3Fベースの3D動画アーカイブの実装記録。iframeのブラウザプロセス上限対策、MeshReflectorMaterialによる「データの澱み」の表現、およびDOMとWebGLの微小レイヤー構造について解説。
![[Noise 入門 #53] Liquid Metal（液体金属）とRaymarchingの融合 — 数式で「T-1000」を錬成する](https://assets.lain-lab.com/images/uploads/noise-intro-53-liquid-metal-raymarching.webp)
[Noise 入門 #53] Liquid Metal（液体金属）とRaymarchingの融合 — 数式で「T-1000」を錬成する
Three.jsとGLSLを用いて、SDFとFBMノイズを融合。Raymarchingによる完璧な法線計算と環境反射を駆使し、ポリゴンでは不可能な「ちぎれては融合する流体」のプロシージャル表現を解説します。
![[Astro #05] 一子相伝の「120px」—極限のレスポンシブで最後に笑うのは固定値だった](https://assets.lain-lab.com/images/uploads/astro-05-link-card-inheritance-logic.webp)
[Astro #05] 一子相伝の「120px」—極限のレスポンシブで最後に笑うのは固定値だった
Astro移行記第5回。外部CSSの干渉（!important）との戦いと、不完全な「Ver. 0.0.1」で公開に踏み切る開発哲学について。
![[Noise 入門 #52] チューリング・パターン（Reaction-Diffusion） — 数式が描く「生命の模様」](https://assets.lain-lab.com/images/uploads/noise-intro-52-reaction-diffusion.webp)
[Noise 入門 #52] チューリング・パターン（Reaction-Diffusion） — 数式が描く「生命の模様」
Perlin Noiseなどの静的な関数とは異なる、時間経過で成長するReaction-Diffusion（反応拡散系）のアルゴリズム。チューリング・パターンの仕組みと、Ping-Pongバッファを用いたGLSLでの実装概念を直感的にまとめます。
![[Astro #04] レスポンシブの深淵と dvh による画面固定](https://assets.lain-lab.com/images/uploads/astro-04-responsive-dvh-fixes.webp)
[Astro #04] レスポンシブの深淵と dvh による画面固定
Astroへの移行中に直面した、モバイル環境特有の表示不具合（アドレスバーの影響や要素の重なり）に対する具体的なCSS解決策と構築のポイントをまとめました。
![[DIY] Logicool G304 ホイール逆走の「完全」修理ログ：物理清掃と接点復活剤の合わせ技](https://assets.lain-lab.com/images/uploads/diy-logicool-g304-wheel-repair-complete.webp)
[DIY] Logicool G304 ホイール逆走の「完全」修理ログ：物理清掃と接点復活剤の合わせ技
Logicool G304のスクロール逆走問題への再挑戦。前回のエアダスター清掃では不十分だった原因を突き止め、楽器用接点復活剤を使用した化学的洗浄による解決策を解説します。
![[Noise 入門 #51] 量子揺らぎ（Quantum Fluctuation）と空間崩壊](https://assets.lain-lab.com/images/uploads/noise-intro-51-quantum-fluctuation.webp)
[Noise 入門 #51] 量子揺らぎ（Quantum Fluctuation）と空間崩壊
Noise入門シリーズ第51回。実装から鑑賞へシフトする第6集スタート。物理法則を無視した再帰的な座標のねじれを用いて、未知のエネルギーの渦や空間崩壊のVFXをThree.jsとShaderで表現するロジックを解説します。