カテゴリ：Noise

【Next.js #36】Procedural Clouds on Sphere — 雲海をまとったノイズ惑星を Three.js + GLSL で拡張する

【Next.js #36】Procedural Clouds on Sphere — 雲海をまとったノイズ惑星を Three.js + GLSL で拡張する

2026-03-13 | lain

前回作成した Procedural Biome Planet をベースに、外側へ Cloud Sphere を追加し、4D FBMノイズで流れる雲海を実装。雲の濃淡表現、地表への影フェイク、Atmosphere と組み合わせた“生きた惑星”表現を Three.js + GLSL で構築した記録。

カテゴリ： Next.js

タグ： #Three.js#GLSL#Noise#FBM#Procedural Generation#Planet#Shader

[Noise 入門 #33] Procedural Biome と大気散乱 — ノイズ惑星に海と森、そして「青い空」を纏わせる

[Noise 入門 #33] Procedural Biome と大気散乱 — ノイズ惑星に海と森、そして「青い空」を纏わせる

2026-03-12 | lain

前回錬成したノイズの地形（球体）に「生命の息吹」を与えます。高さ（Height）と傾斜（Slope）に基づいて海や森、雪山を塗り分けるProcedural Biomeの実装と、フレネル反射を用いた大気（Atmosphere）のシミュレーション手法をGLSLで直感的に解説します。

カテゴリ： Procedural Shader Three.js

タグ： #Noise#GLSL#WebGL#Math#3D

[Next.js #33] Interactive Noise Sphere — Three.js × GLSLで球体ノイズにクリック波紋を加える

[Next.js #33] Interactive Noise Sphere — Three.js × GLSLで球体ノイズにクリック波紋を加える

2026-03-11 | lain

平面で触れるノイズ場を作った前回実装を球体へ拡張。SphereGeometry、Raycaster、GLSLを使い、球体表面にクリック波紋が広がるインタラクティブなノイズ惑星デモを作成。背景用スカイスフィアも加え、触れる3D世界として整理します。

カテゴリ： Next.js

タグ： #Next.js#Three.js#GLSL#Shader#Raycaster#SphereGeometry#Noise#Interactive#WebGL

[Next.js #31] Touching Noise Field — Three.js × GLSLで“触れるノイズ場”を作る

[Next.js #31] Touching Noise Field — Three.js × GLSLで“触れるノイズ場”を作る

2026-03-10 | lain

Three.jsとGLSLを使い、Raycasterで取得したマウス位置をもとに局所的なDomain Warpingを発生させる“触れるノイズ場”を実装。PlaneGeometry上の頂点変形と色設計を組み合わせ、鑑賞するノイズから体験するノイズへ発展させる。

カテゴリ： Next.js

タグ： #Next.js#Three.js#GLSL#Shader#Raycaster#Domain Warping#Noise#Interactive Art#WebGL