カテゴリ：Shader

[Next.js #13] OBJモデルを“粒子化”：PointCloud＋GLSL揺らぎでモデルを再構築

[Next.js #13] OBJモデルを“粒子化”：PointCloud＋GLSL揺らぎでモデルを再構築

2026-02-11 | lain

OBJモデルを Three.js で点群化し、GLSL の揺らぎで再構築するデモ。粒子が形状を保ったまま個別に振動する仕組み、basePosition の保持、uniform のリアルタイム操作など、Vanilla Three.js × Next.js での高度な表現を解説する。

カテゴリ： Next.js

タグ： #three.js#glsl#shader#pointcloud#obj#particles

[Next.js #12] R3Fに“インスペクタ”を付ける：Levaで雲・水・ライトをリアルタイム調整

[Next.js #12] R3Fに“インスペクタ”を付ける：Levaで雲・水・ライトをリアルタイム調整

2026-02-11 | lain

Next.js × React-Three-Fiber のシーンに Leva UI を統合し、雲ドーム・水シェーダー・ライト強度などをインスペクタからリアルタイムに調整できる仕組みを解説。ShaderMaterial の uniforms 制御、useControls の罠、UI配置の注意点までまとめた。

カテゴリ： Next.js

タグ： #Three.js#R3F#Shader#Leva#WebGL

[Next.js #11] FBM地形を削って“動く湖”を作る：反射・雲ドーム・水シェーダーの完全統合

[Next.js #11] FBM地形を削って“動く湖”を作る：反射・雲ドーム・水シェーダーの完全統合

2026-02-10 | lain

FBMノイズで生成した地形を“くぼませて湖を作る”実装を解説。水面のFBM波シェーダー、雲ドーム、Reflector鏡面エフェクト、プレイヤー移動まで統合した“ひとつの世界”をR3Fで構築する。

カテゴリ： Next.js

タグ： #three.js#r3f#glsl#fbm#shader#noise#terrain#water

[Noise 入門 #03] ノイズを設計する5つのパラメータ（Frequency / Amplitude / Octave / Lacunarity / Gain）

[Noise 入門 #03] ノイズを設計する5つのパラメータ（Frequency / Amplitude / Octave / Lacunarity / Gain）

2026-02-10 | lain

Perlin・Simplex・FBM すべてに共通する“ノイズの設計パラメータ”を体系的に理解する回。周波数・振幅・オクターブ・ラキュナリティ・ゲインの5要素を押さえることで、ノイズの世界が一気に読み解けるようになる。

カテゴリ： Procedural

タグ： #Noise#Shader#Three.js#Mathematics#Procedural Generation

[Next.js #10] R3F × GLSL で “動く雲の SkyDome” を作る：FBM ノイズで空を生成

[Next.js #10] R3F × GLSL で “動く雲の SkyDome” を作る：FBM ノイズで空を生成

2026-02-09 | lain

R3F × GLSL で FBM ノイズを使った “動く雲の SkyDome” を実装し、地形に続いて空を生成する方法を解説します。

カテゴリ： Next.js

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

[Shader 入門 #06] VR / WebXR / Unity XR のシェーダー注意点（実戦編）

[Shader 入門 #06] VR / WebXR / Unity XR のシェーダー注意点（実戦編）

2026-01-27 | lain

VR・WebXR・Unity XR で必ず直面するシェーダーの落とし穴を30分で理解する最終回。ステレオレンダリング、透明の破綻、multipass、反射の罠、VR向け軽量化の原則を、Three.js と Unity 両対応で実戦的にまとめた。

カテゴリ： Shader Three.js Unity

タグ： #VR#WebXR#UnityXR#Shader#HLSL#GLSL

[Unity] #12 : SimpleWaterで最小の水面を作る（Plane＋URPシェーダー＋テクスチャ）

[Unity] #12 : SimpleWaterで最小の水面を作る（Plane＋URPシェーダー＋テクスチャ）

2026-01-23 | lain

Planeに自作URPシェーダーを当てて、最小構成の水面（SimpleWater）を実装。波（頂点揺らし）＋透明合成＋水面テクスチャで、箱庭に“湖”を追加する手順をまとめる。

カテゴリ： Unity

タグ： #URP#Shader#SimpleWater#Water#Terrain#Material

[JavaScript] Three.jsで動画再生とカスタム表示する方法まとめ

[JavaScript] Three.jsで動画再生とカスタム表示する方法まとめ

2025-12-23 | lain

Three.jsのVideoTextureを自由に加工・トリミング・エフェクト適用する方法を整理。基本からShaderMaterialによる高度なカスタムまで網羅。

カテゴリ： JavaScript

タグ： #Three.js#WebGL#VideoTexture#Shader

[Babylon.js #05] fBmノイズ地形とthin instancesで草原を作る

[Babylon.js #05] fBmノイズ地形とthin instancesで草原を作る

2026-02-20 | lain

Babylon.jsでfBmノイズを使った地形生成、法線再計算、沈み込み防止、thin instancesによる草原描画、風揺れシェーダ、DynamicTextureによる地面テクスチャ生成、WebXR移動までをまとめる。

カテゴリ： Babylon.js

タグ： #Babylon.js#WebXR#TypeScript#Procedural Generation#Noise#thin instances#Shader