WebGL

2026-03-04 | lain

数式としてのノイズを、ブラウザ上で美しく統治する。Three.jsのShaderMaterialとEffectComposerを用いて、数学をWebエンジニアリングへと昇華させる具体的な実装手法を解説。

カテゴリ： Procedural

タグ： #Three.js#GLSL#WebGL#ShaderMaterial#Post-processing

2026-03-03 | lain

Three.jsの3D時計 UI に、MMDキャラクターのランダム歩行・ランダム会話・VPDポーズ連動を追加し、動的なデスクトップマスコットのように進化させる実装手順。

カテゴリ： Next.js

タグ： #Three.js#MMD#PMX#VMD#VPD#WebGL#JavaScript#3D UI

2026-03-03 | lain

ポストプロセス（Post-Processing）とノイズを組み合わせ、画面全体を歪ませる手法を解説。水中の揺らぎ、陽炎（Heat Haze）、グリッチエフェクトなど、レンダリング結果そのものをハックするShaderの実装に迫ります。

カテゴリ： Procedural

タグ： #Noise#Shader#GLSL#Post-Processing#WebGL

2026-03-02 | lain

Three.jsで3Dアナログ時計＋3Dデジタルパネルを構築し、onBeforeCompileの背景ノイズとlil-guiのインスペクターで光・色・ノイズ・床を即時調整できるWEB時計を作る。MMD(PMX)歩行はおまけ。

カテゴリ： Next.js

タグ： #Three.js#WebGL#Shader#lil-gui#MMD

2026-03-02 | lain

Noise 入門シリーズ第23回。直交座標から極座標へ視点を移し、GLSLで「プロシージャルな魔法陣 / ノイズオーラ」を実装。数式の秩序と4Dノイズの混沌を融合させ、円環状の美しいエフェクトを錬成する手法を図解とコードで解説します。

カテゴリ： Procedural Shader

タグ： #Noise#GLSL#WebGL#Polar Coordinates#VFX

2026-02-25 | lain

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

カテゴリ： Procedural

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

2026-02-23 | lain

MMDキャラの隊列ランダム徘徊に、焚き火の位置へ集合して円陣を組み、しばらく休んだあと再び散開するイベントを追加。焚き火モデルは Hunyuan3D で自作し、Babylon.js から glb として読み込む。

カテゴリ： Babylon.js

タグ： #Babylon.js#MMD#babylon-mmd#WebGL#Hunyuan3D#3DCG#生成AI

2026-02-17 | lain

影が出ない・切れるといった「あるある」を防ぐために。Levaを使ってDirectional LightのShadow Camera範囲を可視化し、最適な設定を探るプロセスをまとめました。

カテゴリ： Next.js

タグ： #React Three Fiber#Three.js#Leva#WebGL

2026-02-15 | lain

配列データの管理から物理ベースの設計へ。R3Fでドラッグ操作、角丸の高級マテリアル、そして動的なグループ化を用いたルービックキューブの実装プロセスを解説します。

カテゴリ： Next.js

タグ： #React Three Fiber#Three.js#WebGL#Rubik's Cube#3D

カテゴリ：WebGL