[ CATEGORY / 🎮 CREATIVE_3D ]

MATCHED_ITEMS: 43
[Next.js #46] Procedural Solar System ― Three.js × GLSL ─ ノイズだけで描く「太陽系全惑星」と「星雲」
[2026/3/19]

[Next.js #46] Procedural Solar System ― Three.js × GLSL ─ ノイズだけで描く「太陽系全惑星」と「星雲」

GLSLの4DノイズとDomain Warpingを用いて、木星の大赤斑、土星の環、天王星の垂直リング、海王星の大暗斑をプロシージャルに生成。InstancedMeshによる小惑星帯やOrbitControlsの拡張によるシネマティックなカメラ操作も実装し、ブラウザ上に生きた太陽系を完成させます。
[Babylon.js #13] メビウス帯の継ぎ目バグ修正（上下反転）＋WebXRローラーコースター化
[2026/2/28]

[Babylon.js #13] メビウス帯の継ぎ目バグ修正（上下反転）＋WebXRローラーコースター化

メビウス帯の継ぎ目で発生する姿勢フリップを、2つの等価姿勢から連続性を保つ方を選択することで解消。WebXRでは回転を上書きせず位置のみ追従し、HMD head tracking を維持したままVR体験を作る。
[Babylon.js #12] ミニボウリング試作 — Havok物理 + GLBピン + PMX操作キャラ（VPDポーズ）
[2026/2/27]

[Babylon.js #12] ミニボウリング試作 — Havok物理 + GLBピン + PMX操作キャラ（VPDポーズ）

Babylon.js + Havokでミニボウリングを試作。GLBピン差し替え、物理形状の分離、レーンの簡易木目、影・空の演出、PMX(VPD)ポーズ適用、スペース長押し投球までを実装ログとしてまとめる。
[Babylon.js #11] 3DスマートボールをCanvas 2Dへ移植 — アーチ壁・サブステップ・カップ判定の実装
[2026/2/26]

[Babylon.js #11] 3DスマートボールをCanvas 2Dへ移植 — アーチ壁・サブステップ・カップ判定の実装

Babylon.js版スマートボールをCanvas 2Dに移植し、物理と当たり判定を自前実装。サブステップでの時間刻み、上部アーチ壁の衝突反射、ポケットのカップ形状を線分近似で判定し“乗る→落ちる”で入賞させる設計、チャージ発射や軽量演出まで、ロジック中心に解説する。
[Babylon.js #10] スマートボール試作 — 発射レール制御と物理落下
[2026/2/24]

[Babylon.js #10] スマートボール試作 — 発射レール制御と物理落下

打ち出しの等速運動ロジック、段ボールの質感を出すセグメント配置、真鍮や真珠のマテリアル表現、そして黄金のパーティクルと効果音による没入感の演出まで、技術的な難所とその解決策を詳しく解説します。
[Babylon.js #09] MMD隊列に焚き火休憩イベントを追加する — Hunyuan3D製モデルを読み込む
[2026/2/23]

[Babylon.js #09] MMD隊列に焚き火休憩イベントを追加する — Hunyuan3D製モデルを読み込む

Babylon.js + babylon-mmd で作った MMDキャラクター隊列に、焚き火休憩イベントを実装します。Hunyuan3D で焚き火の 3D モデルを生成し、Blender で確認したうえで glb を Babylon.js から読み込み、Roam / GoToFire / AtFire / Regroup の4状態で行動を切り替えるロジックを実装しました。
[Babylon.js #08] メビウスの帯の上をMMDモデルが歩く
[2026/2/22]

[Babylon.js #08] メビウスの帯の上をMMDモデルが歩く

Babylon.js / babylon-mmd を使って、メビウス帯の上を MMD キャラが歩くシーンを構築。トラックフレーム、姿勢合わせ、MMDアニメーションの停止対策、Inspector UI によるリアルタイム調整までまとめて解説。
[Babylon.js #07] 地形上を複数MMDキャラが隊列移動する仕組みを作る
[2026/2/21]

[Babylon.js #07] 地形上を複数MMDキャラが隊列移動する仕組みを作る

Babylon.js と babylon-mmd を使い、MMDキャラクターの複数体運用を一歩進めて、地形上での隊列移動（RPG風の縦列歩行）を実装します。TransformNode による制御、Ray による地面吸着、Yaw 補間、履歴追従、PARTY_TUNE による調整値の分離までまとめます。
[Babylon.js #06] MMDキャラクターを地形上で動かす（複数体・ランダム移動・地面吸着）
[2026/2/20]

[Babylon.js #06] MMDキャラクターを地形上で動かす（複数体・ランダム移動・地面吸着）

Babylon.js + babylon-mmd で MMD キャラを地形上に配置し、ランダム移動・向き補間・地面吸着を実装する記事。複数体（clone / 別モデル）構成や VR 時のパフォーマンス所感も紹介。
[Babylon.js #05] fBmノイズ地形とthin instancesで草原を作る
[2026/2/20]

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

Babylon.jsでfBmノイズ地形を生成し、thin instancesで草原を描画。地面変形・法線再計算・沈み込み防止・草の風揺れシェーダ・DynamicTexture地面テクスチャ・WebXR移動までを実装した記録。
[Babylon.js #04] HTTPS設定からQuest2でのWebXR没入体験まで
[2026/2/19]

[Babylon.js #04] HTTPS設定からQuest2でのWebXR没入体験まで

Babylon.jsでWebXRを動かすにはHTTPS（Secure Context）が必須。本記事ではViteでのSSL設定、mkcertによるローカル証明書生成、Babylon.jsのcreateDefaultXRExperienceAsyncによるVR初期化、Quest2での没入体験までを体系的に解説する。
[Babylon.js #03] WebGPUで MMD 1,000体を走らせる：大量描画と影の最適化戦略
[2026/2/18]

[Babylon.js #03] WebGPUで MMD 1,000体を走らせる：大量描画と影の最適化戦略

Babylon.jsとWebGPUを使い、1,000体のMMDモデルを同時描画。InstancedMeshによるパーツ単位の複製、ShadowGeneratorの解像度調整、行列計算の凍結など、ブラウザ上で軍勢を動かすための実践的ノウハウの記録。
[Babylon.js #02] 自作MMDモデルをWebGPUでアニメーション (pmx / vmd converter)
[2026/2/17]

[Babylon.js #02] 自作MMDモデルをWebGPUでアニメーション (pmx / vmd converter)

Babylon.jsとWebGPUでMMDモデルを表示する際に直面するシェーダーエラー、Tポーズで固まる問題、そしてアニメーションが途中で止まる「15秒の壁」。これらをbpmxLoaderとフレーム数スキャンロジックで解決し、影とBloomで仕上げるまでの全記録。
[Babylon.js #01] 環境構築とWebGPUの夜明け（Hello World）
[2026/2/17]

[Babylon.js #01] 環境構築とWebGPUの夜明け（Hello World）

2026年版Babylon.js入門。Viteを使用した高速な開発環境の構築から、必要なパッケージのインストール、そしてWebGPUEngineを使用した「Hello World」までの手順をステップバイステップで解説します。
[Next.js #18] R3Fで「無限の水平線」を作る — Ocean & Volumetric Clouds
[2026/2/16]

[Next.js #18] R3Fで「無限の水平線」を作る — Ocean & Volumetric Clouds

React Three Fiber で自然環境を構築する実装解説。three/addons/objects/Water.js を extend して使用する方法、およびカスタムシェーダーで 3D FBM とレイマーチングを実装し、厚みのある雲を描画する手法を詳細に解説します。
[Unity #16] Starter Assets + VRM + OpenXRを同一シーンで共存・判定切替
[2026/1/27]

[Unity #16] Starter Assets + VRM + OpenXRを同一シーンで共存・判定切替

Unity 2022 LTSでStarter AssetsのThirdPersonControllerとVRMモデル、OpenXRのVR環境を同一シーンに統合し、PCモードとVRモードを自動判定して切り替える完全な手順とハマりどころの解説。PlatformSwitcherによる自動切替方式、カメラ・AudioListener競合排除、VR初期化待機のノウハウをまとめた記事。
[Shader 入門 #06] VR / WebXR / Unity XR のシェーダー注意点（実戦編）
[2026/1/27]

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

Shader 入門シリーズ最終回。VR / WebXR / Unity XR でシェーダーを書く際の注意点を、ステレオレンダリングの構造、透明描画の破綻、multipass や SSR の罠、パフォーマンス最適化、頂点アニメーションの重要性など、実制作で役立つ視点から解説する。WebXR 経験を持つ開発者がそのまま XR で強くなれる知識をまとめた。
[Unity #15] XR Interaction ToolkitでVR移動とPC(WASD)操作を共通化する（Androidモジュール復旧編）
[2026/1/26]

[Unity #15] XR Interaction ToolkitでVR移動とPC(WASD)操作を共通化する（Androidモジュール復旧編）

Unity 2022.3 LTS環境で、XR Interaction Toolkitを使用してVRスティック移動とPCキーボード操作を共存させる実装ガイド。トラブル時のモジュール再インストール手順も網羅。
[Shader 入門 #05] 波・水面・炎・発光を作る：sin / noise / depth / Fresnel（Three.js & Unity）
[2026/1/26]

[Shader 入門 #05] 波・水面・炎・発光を作る：sin / noise / depth / Fresnel（Three.js & Unity）

Shader入門第5回。水面・炎・発光という“ゲームで一番使う表現”を、sin / noise / depth / Fresnel の4本柱で作る。Three.jsのRawShaderMaterial（GLSL）とUnity URPのShaderLab/HLSLを横並びで比較し、SimpleWater等の実装が読めるレベルまで分解して理解する。
[Unity #14] 死闘を越えて 2022.3 LTSで築く『確実に動く』Quest 2開発環境構築
[2026/1/25]

[Unity #14] 死闘を越えて 2022.3 LTSで築く『確実に動く』Quest 2開発環境構築

最新版の罠を回避し、安定版Unity 2022.3 LTSを使用してMeta Quest 2向けのVR開発環境を一から構築する手順を解説します。
[Shader 入門 #04] Three.js vs Unity：シェーダー構造を横並び徹底比較（GLSL / HLSL 二刀流の脳）
[2026/1/25]

[Shader 入門 #04] Three.js vs Unity：シェーダー構造を横並び徹底比較（GLSL / HLSL 二刀流の脳）

GLSL と HLSL の違いは文法より“受け渡しの作法”。Three.js と Unity のシェーダー構造を横並びで比較し、attribute→appdata、varying→v2f、time/UV/normal、model/view/projection 行列の対応（modelMatrix ↔ unity_ObjectToWorld 等）を整理。どちらでも同じ表現を再現できる“二刀流の脳”を完成させる。
[Unity] #13 : VR 実験で踏み抜いた Prefab 地獄と Git 復旧失敗の記録
[2026/1/24]

[Unity] #13 : VR 実験で踏み抜いた Prefab 地獄と Git 復旧失敗の記録

Unity（URP）で SimpleWater の最小実装を進める過程で、XR/Project Settings の変更を引き金に PlayerArmature（VRM）と Prefab/Scene のリンクが破綻。Overrides → Revert All による破壊、Prefab Overrides の無限ズレ、Library 再生成や Animator 再設定の無効、さらに Git ロールバックが meta/GUID/インポート順依存で機能しなかった経緯を、再発防止のために技術的に記録する。
[Shader 入門 #03] Unity で最小の HLSL を書く：_Time で頂点と色を動かす（URP対応）
[2026/1/24]

[Shader 入門 #03] Unity で最小の HLSL を書く：_Time で頂点と色を動かす（URP対応）

UnityのShaderLab構造（Properties/SubShader/Pass/Tags）を押さえつつ、HLSL最小サンプルで頂点をsin波で揺らし、時間で色を変える。Three.js/GLSLとの共通点と相違点、初心者の罠（URPタグ、座標変換、Time、前方宣言）を潰す。
[Unity] #12 : SimpleWaterで最小の水面を作る（Plane＋URPシェーダー＋テクスチャ）
[2026/1/23]

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

Unity 6（URP）で最も簡単な水面表現を作る。Planeを配置し、HLSLの最小シェーダーで頂点を揺らして波を出し、透明合成で水らしさを付与。さらに無料テクスチャを_MainTexに適用してベタ塗り感を解消し、GameViewで“湖として成立する”見た目に仕上げる。
[Unity] #11 オリジナルEditorツールの作成：Terrainを一括で底上げ EditorWindow実装
[2026/1/23]

[Unity] #11 オリジナルEditorツールの作成：Terrainを一括で底上げ EditorWindow実装

Unity の実制作で本当に役に立つ “自作エディタツール” の基本を、Terrain を一括で 300m 底上げする実例とともに解説。Unity Editor API の基礎と実践が一度で理解できる。
[Shader 入門 #02] Three.js で最小のシェーダーを書く：GLSL の“動く”感覚を掴む
[2026/1/23]

[Shader 入門 #02] Three.js で最小のシェーダーを書く：GLSL の“動く”感覚を掴む

Shader 入門 第2回。Three.js の RawShaderMaterial を使い、最小の GLSL シェーダーを自分で書いて動かしてみる。頂点を上下に揺らす sin 波アニメーション、時間経過による色変化など、GPU の挙動を直接感じられるステップを丁寧に解説する。Three.js と Unity の両方に応用できる基礎感覚を手に入れる。
[Unity] #10 プレイヤー追従カメラの正しい実装（Cinemachine + StarterAssets）
[2026/1/22]

[Unity] #10 プレイヤー追従カメラの正しい実装（Cinemachine + StarterAssets）

Unity 6 / StarterAssets / Cinemachine の最新バージョンに対応した TPS プレイヤー追従カメラの構築方法を詳しく解説。AudioListener 警告の原因、Virtual Camera と実カメラの役割、Follow/LookAt の設定、CameraTarget の正しい指定、FreeLook Camera の反転設定、ズーム機能の追加用スクリプトまで、Three.js 経験者にも理解しやすく整理。
[Shader 入門 #01] シェーダーとは何か？GPU 描画の仕組みをゼロから理解する
[2026/1/22]

[Shader 入門 #01] シェーダーとは何か？GPU 描画の仕組みをゼロから理解する

Three.js と Unity の両方で応用できる「シェーダーとは何か？」の基礎を解説する入門記事。GPU が三角形をどう処理しているか、Vertex/Fragment シェーダーの役割、CPU との分業など、初心者がつまずくポイントをゼロから整理する。
[Unity] #09 Unity Asset Store にアセットを公開する最新ワークフロー（2026年版）
[2026/1/22]

[Unity] #09 Unity Asset Store にアセットを公開する最新ワークフロー（2026年版）

Unity Asset Store にアセットを公開する際の最新ワークフロー（2026年版）を詳しく解説。Publisher Portal の準備、パッケージ構成、メディア作成、Unity Editor からのアップロード方法、Submit 前の注意点、審査期間のリアルな実態まで網羅しています。古い情報が多い中、最新UIに合わせた貴重な実践記事です。
[Unity] #08 地形生成とトンネル作成：Terrain と Blender を組み合わせて最短ルートで作る
[2026/1/21]

[Unity] #08 地形生成とトンネル作成：Terrain と Blender を組み合わせて最短ルートで作る

Unity 6 の Terrain で山を作り、Blender で半円トンネルを作って Unity に持ち込み、Paint Holes で地形に穴を開けて接続するまでをまとめた実践記事。Terrain の解像度設定、テクスチャペイント、トンネルモデルの最小構成など、迷いがちな部分を整理して解説。
[Unity] #07 線路 (鉄道)を、４点ベジェ曲線で自動生成（Bezier接続ツール化）
[2026/1/21]

[Unity] #07 線路 (鉄道)を、４点ベジェ曲線で自動生成（Bezier接続ツール化）

Unity 6で曲線レール敷設を自動化。始点/終点レールの位置とforwardを使いCubic Bezierで接続し、接線方向に合わせてPrefabを連続配置。Circle WeightとSegment Lengthで調整し、OnValidateでエディタ上も即時再生成できるようにした。
[Unity] #06: 直線レール敷設と列車の自走・停止
[2026/1/20]

[Unity] #06: 直線レール敷設と列車の自走・停止

Unity 6で直線レールを敷設し、列車を移動させて駅手前で停止させるところまで実装。StopPoint運用、WaypointsへのTransform一括投入、Inspectorロック、スナップ設定の発見など、作業ログをThree.js経験者の視点で整理。
[Unity] #05: アセットを活用した街づくり + Unity6 トラブル回避（シーン上書き事故・他）
[2026/1/19]

[Unity] #05: アセットを活用した街づくり + Unity6 トラブル回避（シーン上書き事故・他）

Unity 6で街づくりをした1日の実録メモ。無料アセット活用、Inspector数値調整、Empty GameObjectによる整理、URPの紫問題、SampleScene上書き事故の原因と完全な回避方法まで、Three.js経験者視点で整理する。
[Unity] 入門講座 #02 : MonoBehaviour は何者か
[2026/1/19]

[Unity] 入門講座 #02 : MonoBehaviour は何者か

Unity の MonoBehaviour を、継承による機能追加ではなく「Unity の実行モデルに接続するための資格」として解説。Update が呼ばれる条件や、通常の C# クラスとの違いを明確にし、GameObject/Component の理解とつなげてスクリプトが動く仕組みを掴む。
[Unity] 入門講座 #01 : GameObject と Component の本質的な関係
[2026/1/18]

[Unity] 入門講座 #01 : GameObject と Component の本質的な関係

Unityで最初にぶつかる違和感──クラスを書いても動かない理由、アタッチの意味、Inspector が存在する根拠を、GameObject と Component の関係から整理する基礎講座。
[Unity] #04: CubeGeometry から VRMへ アニメーションでキャラクターを動かす
[2026/1/17]

[Unity] #04: CubeGeometry から VRMへ アニメーションでキャラクターを動かす

VRMをUnityで動かす最短ルートとして、UniVRM導入→VRMインポート→StarterAssetsのPlayerArmature差し替え→Transformズレの修正→Skybox導入まで、一日に起きた実例で解説するメモ。Three.js経験者がUnityを触った時にハマりやすいポイントの整理にもなる。
[Unity] 入門講座 #00 : Unityは“普通のC#プログラム”ではない
[2026/1/17]

[Unity] 入門講座 #00 : Unityは“普通のC#プログラム”ではない

Unityを初めて触ると、mainがなく、newせず、Updateを呼んでいないのに動いてしまう。この違和感の正体を、Unityの実行モデルとコンポーネント方式から解説し、MonoBehaviourを理解するための前提を整える基礎記事。
[Unity] #03 Three.jsからUnity：Editor基本操作とGUIの要点（WASD移動・カメラ・重力）
[2026/1/16]

[Unity] #03 Three.jsからUnity：Editor基本操作とGUIの要点（WASD移動・カメラ・重力）

Three.jsからUnityへ移行する人向けに、Unity Editorの基本操作と頻出GUI、スクリプトの付け方、Rigidbody/Collider、UpdateとFixedUpdateなど“最初に必要な差分”を駆け足でまとめる。
[Unity] #02 UnityプロジェクトをGitHubで正しく管理する（巨大フォルダ地獄を避ける）
[2026/1/16]

[Unity] #02 UnityプロジェクトをGitHubで正しく管理する（巨大フォルダ地獄を避ける）

UnityプロジェクトをGitHubにpushすると1GB超えする理由、正しい.gitignore、.slnxの削除方法、Libraryフォルダ地獄を回避する手順を詳細に解説。
[Unity] #01：CubeとPlaneで始める最短入門（Three.js経験者向け）
[2026/1/16]

[Unity] #01：CubeとPlaneで始める最短入門（Three.js経験者向け）

Unity 6 (URP) を使い、CubeとPlaneの生成、Rigidbodyによる物理、WASD移動、カメラ操作、Mesh変形までを最短ルートで確認する記録。Three.js経験者視点で、Unity特有の罠とGUIの壁を整理する。
[JavaScript] WebAudio × three.js で作るサウンドリアクティブ・ジオメトリアニメーション
[2026/1/12]

[JavaScript] WebAudio × three.js で作るサウンドリアクティブ・ジオメトリアニメーション

nw_wrld に影響を受け、WebAudio の解析結果を three.js に直接接続することで、サウンドリアクティブなジオメトリアニメーションを実装した。BoxGeometry を中心に、状態管理・色制御・ジオメトリ切り替えの設計をまとめる。
[JavaScript] Three.jsでボールバウンドアニメーションを実装する｜Canvas2D実装の移植ログ
[2025/12/31]

[JavaScript] Three.jsでボールバウンドアニメーションを実装する｜Canvas2D実装の移植ログ

Three.jsでGameBox内に複数ボールのバウンドアニメーションを実装する過程を解説。Canvas2D由来のロジックをVector3ベースに移植し、deltaTime管理、壁反射、ボール同士の衝突判定、残像表現を行う。
[JavaScript] Three.jsでGLBの作成と読み込み、アニメーション処理の実装方法
[2025/12/17]

[JavaScript] Three.jsでGLBの作成と読み込み、アニメーション処理の実装方法

Three.jsを使ってGLB形式の3Dキャラクターを作成、読み込み、アニメーションを追加する方法を紹介。さらに、カメラの向きに合わせたキャラクターの移動処理も解説。