WebGL

[Next.js #15] Next.js + R3F で 5万本の草原を生成する – InstancedMesh + GPUシェーダー

2026-02-13 | lain

React Three Fiber で大量の草をGPUで描画する方法。InstancedMesh・シェーダー揺れ・FBM地形・疑似法線ライティングまで実装。

カテゴリ： Next.js

タグ： #R3F#Three.js#WebGL#Shader#InstancedMesh#GPU

[Noise 入門 #05] Fractal Brownian Motion（FBM）— ノイズを“自然界の複雑さ”へ進化させる

2026-02-12 | lain

Perlin Noise を“自然な地形・雲・水”に変える魔法の技術、Fractal Brownian Motion（FBM）を図解とコードで理解する。Frequency / Amplitude / Octave がどのように積み重なるか、Three.js/Shader で応用するための基礎を整理します。

カテゴリ： Noise

タグ： #PerlinNoise#FBM#WebGL#Shader#Three.js

[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 #09] Perlin/FBM ノイズで地形を作り、プレイヤーを Raycast で追従

2026-02-08 | lain

R3F(React Three Fiber) 上で FBM ノイズ地形を生成し、Raycaster で地面の高さを取得してプレイヤーを自然に追従させる。地形生成（頂点Z変形・法線再計算・標高カラー）から、WASD移動＋atan2回転、hit安全処理とLERP補間までを最小構成でまとめる。

カテゴリ： Next.js

タグ： #R3F#Three.js#Noise#Perlin#FBM#Raycast#Terrain#MMD#WebGL

[Next.js #08]VRM / BVH / PMX を Next.js（R3F）で扱うための互換性と実装整理

2026-02-08 | lain

VRM・BVH・PMX を Next.js(App Router) + React Three Fiber で扱う際の互換性、使用すべきバージョン、正しいローダー構成、そして避けるべき組み合わせを整理する技術ドキュメント。

カテゴリ： Next.js

タグ： #R3F#Three.js#VRM#BVH#PMX#MMD#WebGL

[Next.js #06]多段キャンバス構造の設計図：2D Canvas と 3D（R3F）を重ねて扱う方法

2026-02-06 | lain

Next.js で DOM・2D Canvas・3D Canvas（R3F）を3層構造で扱うための設計パターンを解説します。ゲームUIやインタラクティブな Web 表現に必須となる多段キャンバス構造の実装方法をまとめました。

カテゴリ： Next.js

タグ： #React#R3F#Three.js#Canvas#WebGL

[Next.js #03] React Three Fiber（R3F）導入：Three.js を Next.js と正しく統合する

2026-02-02 | lain

Next.js(App Router) と Three.js を安全に統合するための必須レイヤー、React Three Fiber（R3F）の基礎と構造を整理する。ヴァニラ Three.js と R3F の対応関係、Canvas / useFrame / useThree の最低限の理解、コンポーネント境界（use client）など、Next.js で 3D を扱うための“地図”を作る回。

カテゴリ： Next.js

タグ： #ReactThreeFiber#R3F#Three.js#WebGL#AppRouter#Next.js

[JavaScript] Three.js RenderTarget ミニマップを“ゲームUI”にする（円形マスク＋フレーム＋時計表示）

2026-01-31 | lain

前回の RenderTarget + サブカメラ方式ミニマップを、円形マスク（alphaMap）とUIフレーム重ね、CanvasTexture で日時・称号テキストまで表示する“ゲームHUD”へ進化。renderOrder / depthTest / toneMapped のハマり所も整理する。

カテゴリ： JavaScript

タグ： #Three.js#WebGL#MiniMap#RenderTarget#SubCamera#UI#CanvasTexture#alphaMap#HUD

[JavaScript] Three.jsでミニマップ実装：サブカメラ＋RenderTarget＋カーナビ式スムーズ回転

2026-01-31 | lain

Three.jsでゲーム向けミニマップを実装。俯瞰サブカメラの描画をWebGLRenderTargetに出力し、Planeへ貼り付けて画面左上に固定。さらにキャラクターの進行方向に合わせてミニマップを回転させ、atan2補正＋lerpで急回転を滑らかにする。

カテゴリ： JavaScript

タグ： #three.js#WebGL#game-dev#minimap#render-target#camera#UI

カテゴリ：WebGL