![[Noise 入門 #60] 第6集完結 — 神領域のオーディオ・ビジュアル・アート](https://assets.lain-lab.com/images/uploads/noise-intro-60-audio-visual-art.webp)
[Noise 入門 #60] 第6集完結 — 神領域のオーディオ・ビジュアル・アート
Noise入門シリーズ第60回。Web Audio APIを用いた音の解析データ（低音・高音）をGLSLに流し込み、Domain Warpingやプラズマ表現と連動させる手法を解説。音と数式が完全に同期する「神領域のアート」をThree.js上で実装します。
ARCHIVE_INDEX / PAGE_2
TOTAL_ITEMS: 574
![[Astro #08] Shader パラメータ計算機：静的なブログに 動き を吹き込む](https://assets.lain-lab.com/images/uploads/astro-08-interactive-shader-calc.webp)
[Astro #08] Shader パラメータ計算機：静的なブログに 動き を吹き込む
Astro と React を組み合わせ、MDX 内で動作する Gerstner Wave パラメータ計算機を構築。client:visible ディレクティブによるパフォーマンス最適化と、サイバーパンク風の UI カスタマイズについて詳しく紹介します。
![[Noise 入門 #59] 次元崩壊グリッチ（Post-Processing Audio Glitch） — 音の衝撃で世界がバグるサイバーパンク・エフェクト](https://assets.lain-lab.com/images/uploads/noise-intro-59-post-processing-audio-glitch.webp)
[Noise 入門 #59] 次元崩壊グリッチ（Post-Processing Audio Glitch） — 音の衝撃で世界がバグるサイバーパンク・エフェクト
Web Audio APIとThree.jsのポストプロセスを連携させ、音の強さに反応してUV座標を引き裂くAudio-Reactiveなグリッチエフェクトの実装手法を直感的にまとめます。
![[Noise 入門 #58] Curl Noise × Audio — 音に乗って舞うパーティクル](https://assets.lain-lab.com/images/uploads/noise-intro-58-curl-noise-audio.webp)
[Noise 入門 #58] Curl Noise × Audio — 音に乗って舞うパーティクル
Noise 入門シリーズ第58回。GPGPUによる100万のパーティクルとCurl Noiseのベクトル場に音楽データを流し込み、音の波形で流体を制御するオーディオ・ビジュアル・アートの錬成方法をGLSLコードと共に直感的に解説します。
![[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パーサーの仕様対応、および移行後のクローリング状況についてまとめる。
![[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」で公開に踏み切る開発哲学について。