2026-02-27 | lain

Noise 入門シリーズ第2集（アルゴリズム編）完結！重くなりがちなShaderのパフォーマンスを改善するLOD（Level of Detail）の概念と、近景の質感を底上げするBump Mappingの仕組みを解説します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Shader#LOD#Bump Mapping#Optimization

2026-02-26 | lain

Noise入門シリーズ第19回。計算した「高さ」や「法線（傾き）」のデータをマスクとして利用し、水、雪、草、岩などの複数の質感を動的に塗り分けるProcedural Materialの実装方法を解説します。

カテゴリ： Procedural

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

2026-02-25 | lain

Noise 入門シリーズ第18回。平坦なノイズから中心差分法を用いて法線（Normal）を計算し、Shader内でリアルタイムに光と影を描画する「Procedural Lighting」の基礎とGLSLでの実装手法を解説します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Shader#WebGL#Math

2026-02-24 | lain

Voronoiノイズに「時間」を与えて蠢かせ、Simplexノイズと掛け合わせる「Noise Blending」を解説。相反する特性を混ぜて未知のキメラ（マテリアル）を錬成します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Shader#Voronoi#Math

2026-02-17 | lain

Noise 入門シリーズ第10回。空（雲）から視点を地上へ戻し、ノイズを用いて3Dの地形（Terrain）を生成します。ハイトマップの原理、Ridge Noiseによる山脈の形成、そしてバイオームによる色付けまでを解説。

カテゴリ： Procedural

タグ： #Noise#Terrain#Three.js#GLSL#Vertex Shader#Heightmap#CG

2026-02-11 | lain

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

カテゴリ： Next.js

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

2026-02-10 | lain

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

カテゴリ： Next.js

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

2026-02-09 | lain

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

カテゴリ： Next.js

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

2026-01-27 | lain

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

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

カテゴリ：GLSL