カテゴリ：Three.js

[Next.js #25] Three.js×MMD：モデル情報スナップショット→UI反映→デバッグ機能まで一気に固める

[Next.js #25] Three.js×MMD：モデル情報スナップショット→UI反映→デバッグ機能まで一気に固める

2026-03-05 | lain

3D時計UIは“レイアウト”より先に“文字”で完成度が決まる。巨大な時刻表示・HUD・右パネルを崩さず、数字/曜日/天気を作品っぽく整えるフォント設計とCSS変数の管理をまとめる。

カテゴリ： Next.js

タグ： #Three.js#MMD#Typography#UI#CSS

[Noise 入門 #26] Vertex Shaderによる頂点変形（Displacement） — ノイズで立体を鼓動させる

[Noise 入門 #26] Vertex Shaderによる頂点変形（Displacement） — ノイズで立体を鼓動させる

2026-03-05 | lain

Noise 入門シリーズ第26回。ピクセルを塗るFragment Shaderから、立体を直接歪めるVertex Shaderの世界へ。法線（Normal）に沿った頂点移動の基本と、分割数の罠、そしてThree.js + GLSLを用いたリアルタイムな3Dモデルの変形（Displacement）を解説します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Three.js#Vertex Shader#Displacement

[Next.js #24] 3D時計UIを“作品”に変えるタイポグラフィ設計（Three.js×MMD）

[Next.js #24] 3D時計UIを“作品”に変えるタイポグラフィ設計（Three.js×MMD）

2026-03-04 | lain

3D時計（Next.js×Three.js×MMD）にUIパネルを実装したので、次は“フォントで仕上げる”。数字・曜日・HUD・パネルを統一するためのタイポグラフィ方針、サイズ階層、文字間、影、可読性、そしてCSS変数による運用をまとめる。

カテゴリ： Next.js

タグ： #Three.js#MMD#UI#Typography#CSS#DOM

[Noise 入門 #25] Three.js × GLSL の架け橋 — ShaderMaterial と EffectComposer でノイズをブラウザに解き放つ

[Noise 入門 #25] Three.js × GLSL の架け橋 — ShaderMaterial と EffectComposer でノイズをブラウザに解き放つ

2026-03-04 | lain

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

カテゴリ： Procedural

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

[Next.js #23] Three.js×MMD：ランダム歩行・ランダム会話・VPDポーズで“動く3D時計”へ進化

[Next.js #23] Three.js×MMD：ランダム歩行・ランダム会話・VPDポーズで“動く3D時計”へ進化

2026-03-03 | lain

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

カテゴリ： Next.js

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

[Next.js #22] Three.jsで作る理想のWEB時計：3Dアナログ×3Dデジタル×ノイズ背景×lil-gui調整

[Next.js #22] Three.jsで作る理想のWEB時計：3Dアナログ×3Dデジタル×ノイズ背景×lil-gui調整

2026-03-02 | lain

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

カテゴリ： Next.js

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

[Next.js #20] R3F×GLSL ドメイン・ワーピング：Bloom不要の発光と流体表現

[Next.js #20] R3F×GLSL ドメイン・ワーピング：Bloom不要の発光と流体表現

2026-03-01 | lain

ノイズ連載21回分の集大成。ドメイン・ワーピングとカスタムシェーダーを組み合わせ、ライブラリ不要の爆発的な視覚エフェクトを実装します。

カテゴリ： Next.js

タグ： #React Three Fiber#GLSL#Noise#Three.js#Web Graphics

[Next.js #19] Next.js + R3F: 初心に帰るシャドウマップ実装とLevaでのパラメータ可視化

[Next.js #19] Next.js + R3F: 初心に帰るシャドウマップ実装とLevaでのパラメータ可視化

2026-02-17 | lain

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

カテゴリ： Next.js

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

[Noise 入門 #10] Procedural Terrain Generation — 数学で大地を隆起させる

[Noise 入門 #10] Procedural Terrain Generation — 数学で大地を隆起させる

2026-02-17 | lain

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

カテゴリ： Procedural

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