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

2026-03-13 | lain

Three.jsとGLSLを用いて、プロシージャルな惑星にFBMノイズを活用した「動く雲海」を実装。地形の上に雲の層を重ね、地表に影を落とすことで生きた気象システムを構築します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Three.js#FBM#Shader

2026-03-12 | lain

Three.js製MMD時計アプリに設定UIを実装。アナログ時計・デジタル時計・壁紙・床シェーダー・MotionAssetsの各種設定をGUIから変更し、localStorage と IndexedDB で保存・復元できる構成を整備しました。

カテゴリ： Next.js

タグ： #Three.js#MMD#IndexedDB#localStorage#WebGL#GLSL#Shader#UI

2026-03-12 | lain

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

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

2026-03-11 | lain

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

カテゴリ： Next.js

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

2026-03-11 | lain

Three.jsのSphereGeometryとRaycasterを用い、3D空間上のプロシージャルな惑星を生成。マウス操作で局所的に地形を歪ませ、OrbitControlsで探索するインタラクションの実装手法を解説します。

カテゴリ： Procedural

タグ： #Noise#Three.js#GLSL#Shader#Math

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

2026-03-10 | lain

第4集「Three.js編」が開幕。Raycasterを用いてマウスの動きをGLSLへ伝達し、ユーザーの操作に呼応して空間が歪む「触れるノイズ」の実装手法を解説します。

カテゴリ： Procedural

タグ： #Noise#Three.js#GLSL#WebGL#Interaction

2026-03-09 | lain

第3集「Shader実践編」の最終回。これまでに学んだFBM、Domain Warping、極座標、GPGPUの全知識を統合し、ブラウザ上に100万の星々と星雲が渦巻く「プロシージャルな宇宙」をGLSLで錬成します。

カテゴリ： Procedural Shader

タグ： #Noise#GLSL#FBM#Domain Warping#GPGPU#Three.js#Generative Art

カテゴリ：GLSL