三層WPFパイプラインでGeneric HostとChannelを噛み砕いた制作記
dotnetProjectForWindows_10のFolderSource→Filters→FileExporter構成をGeneric Hostで束ね、Channel(32枠)とResizeFilter(600px/Quality90)を可視化しつつ、MainViewModelのIProgressReporter実装とアーキテクチャタブを読み解いた制作エッセイ。
記事アーカイブ
全100件の記事一覧
# 猫のタロット占いアプリを制作したらこうなったの巻
78枚のタロットカードから3枚を引いて、過去・現在・未来を占う。それだけ。シンプルだから分かりやすく、シンプルだから使いやすい。midori215は、すべてのカードを猫をモチーフにしたオリジナルデザインで表現した、ブラウザ上で動作するタロット占いアプリです。カードを引くたびに、神秘的なアニメーションとともに、あなたへのメッセージが表示されます。
AIエピソード生成とWPF演出を同居させたInteractiveStoryTeller制作記
dotnetProjectForWindows_9のStoryViewModelでGeminiエピソード生成と背景/アイテム/AudioServiceを束ね、SmoothScrollや%LocalAppData%保存、ReadyToRun単一EXEまで詰め込んだ制作エッセイ。
顔認識AIで年齢・性別・感情を同時に分析する midori222
face-api.jsとMediaPipe Face Detectionを組み合わせ、カメラ映像から顔の情報を多角的に読み取るシステム。年齢・性別・感情を1回の処理で統合分析し、感情に応じて色が変わる顔枠、リアルタイム統計、カメラ切り替えまで実装。検出結果の点滅を抑制する300ms保持メカニズム、FPSベースのフレームスキップ、TensorFlow.js警告の抑制など、実用的な機能を詰め込みました。
NDLサーチAPIとWebView2でSRU検索を再構築した制作記
SRU/DC-NDLレスポンスをLINQ to XMLで噛み砕き、NDLBibID抽出→書影API→WebView2→ReadyToRun三兄弟まで組み直したBookSearchAppの制作エッセイ。API利用注意UIも含む。
シンプルな顔認識システムを作った midori221
MediaPipe Face Detectionを使った基本に忠実な顔認識システム。目・鼻・口・耳の位置を検出して表示し、カメラ切り替え機能も付いている。シンプルだから分かりやすく、シンプルだから速い。TensorFlow.jsプラットフォームの初期化、リアルタイム検出ループの実装、カメラストリームの適切な管理まで、実装の詳細を詳述しました。
Open Library APIとWebView2で書籍検索を抱きしめた制作記
OpenLibraryApiServiceでタイトル/著者/ISBN検索を分岐し、BookSearchViewModelのページング＋お気に入り＋WebView2連携を詰め、build-package.ps1でReadyToRunなx64/x86/arm64単一EXEを作ったWPFアプリの制作エッセイ。
358本のフォント棚を.NET 10 WPFで整えた話
FontServiceで358本のフォントをログ4段構えで拾い、FavoriteFontService→QuestPDFでお気に入り冊子化し、build-package.ps1でx64/x86/arm64単一EXEを量産した制作エッセイ。
Open-MeteoをWPF MVVMに飲み込ませた気象コックピット制作記
WeatherServiceで東京→大阪を1.3秒/1.35秒で叩き、DispatcherTimerの自動更新と自作BooleanToToggleTextConverterでデータとUIを繋いだ気象コックピット。win-x64/86/arm64の単一EXE65.6MB・60.2MB・61.5MBをbuild-package.ps1で量産し、エラーオーバーレイとAutoRefreshの揺らぎまで追い込んだ制作エッセイ。
3D座標でノイズを計算する全方位雲の生成 - 3層構造の球体雲で空間全体に広がる手続き型雲
3D座標を直接使ったノイズ関数で雲の密度を計算し、球面の継ぎ目を消す方法。3層構造の球体雲を一定間隔で配置し、層ごとに異なるアニメーション速度と方向を設定。光の散乱計算（フォワード散乱・バックワード散乱）でリアルな雲のライティングを実現。光源方向と層間隔をリアルタイムで調整できるUIを実装。
AppDataを飛び出したAppSettingsManagerをWPFで育てた記録
ThemeManager.ApplyThemeInlineでライト/ダークのリソースを即差し替え、SettingsService.ChangeSettingsFilePathでAppData→Dドライブへ住民票を移し、build-package.ps1でReadyToRunなx64/x86/arm64単一EXE(65.6MB/60.1MB/61.5MB)を出力した制作エッセイ。
ブラウザだけで熊を検出する。TensorFlow.jsが教えてくれた「軽さ」と「重さ」
TensorFlow.jsでYOLO11nモデルを読み込み、ブラウザ単体で熊を検出する特化システムを実装。8 FPSの検出速度を実現するフレーム制御、信頼度閾値50%の調整、IoU + 色ヒストグラムによる重複検出軽減、IndexedDBでの検出履歴保存、Webカメラ・動画URL・画面共有の3つの入力ソース対応を実装した制作記録。
WPFコンポーネント図鑑を14カテゴリで並べ切った夜の記録
ComponentCatalogViewModelでSelectedCategory→Components→Previewの流れを握り、100件超のXamlTypeをComponentPreviewFactoryの巨大switchで描画。App.xamlのブラシ管理とListBoxスタイル、build-package.ps1でのReadyToRun三兄弟、SmartScreen越えのx64単一EXE配布までを書いた制作エッセイ。
MouseDragで回すWPF 3D HalloWorldを単一EXEに閉じ込めた記録
Viewport3DとVisualBrushで5秒周期の3Dテキストを回し、DispatcherTimerとStoryboardを役割分担させてスケールやGlowを制御。MouseDragの感度0.5やズーム2.0〜10.0の帯域を整理し、ReadyToRunなwin-x64単一EXEと三段例外ガードで配布を絞った制作エッセイ。
Gemini API暗室：config.phpと.htaccessで鍵を伏せた制作記
config.phpを金庫にしてAPIキーを***表記に伏せ、.htaccessでarticle.phpへのRewriteやnode_modules拒否を敷き、gemini-api.phpのPOST専用CORSゲートとラウンドロビン＋429/403フォールバックを8個のデモで振り返った制作エッセイ。
3D HalloWorldを単一EXEにまとめた .NET 10 記録
Viewport3DとDispatcherTimerで5秒/3秒周期の回転やスケールを制御し、build-package.ps1でwin-x64の単一EXEをReadyToRun込みで生成。App.xaml.csの三段例外ガードや配布手順まで網羅した制作ログ。
Webからデスクトップへ。Electron育ちが触れる .NET 10 MVVM
Electron育ちが.NET 10とWPFに初挑戦。18秒の爆速ビルドと132MBのファイルサイズに衝撃を受けつつ、MVVMをカメラとレンズの関係で理解した制作記録。Bindingミスの失敗談や配布パッケージの整備まで。
顔・音声・ジェスチャを束ねるライブ監視ハブ midori304
face-api.js×MoveNet×Web Audioで顔・音声・ジェスチャをMonitoringHubに統合し、EAR 0.25・頭部前傾 0.48・モーション 0.05・2200msのしきい値で居眠り監視を安定化。VoiceAnalyzerのfallback 0.35やAlertHistoryDBの動画保存も整備した制作記録。
顔×音声×ジェスチャを束ねるハイブリッド感情モニタ midori303
face-api.jsとWeb Audio・MoveNetを45:30:25で合成し、voiceFallback 0.35/gesture 0.40の切替とIndexedDB重複スコア0.75、推論116msで8fpsを死守した制作記録。
ステップ型スティッキーカラムをCSSで磨いた midori305
スクロールに合わせて左右カラムを同期させるステップ型スティッキーレイアウトの制作記録。ACTIVE_ON 0.58/0.4や--sticky-top制御、8本のCSSデモと測定ログで粘着挙動を磨いた。
MorphFoundryで形態素解析ライブラリを自前開発した記録
Viterbi風アルゴリズムとUniDic現代書き言葉CSVのJSON変換でMorphFoundryを構築。辞書コンバータやユーザー辞書UI、Web Worker/CLI/ベンチマークを揃えた教育用配布パッケージの制作記録。
オーロラHUDの縫い目ゼロ化と多層粒子HUDの再設計
HDR環境マップの左右8%をCanvasTextureでフェードし、縦シーム輝度差18%→2%。粒子5モードのdelta正規化とautoTimer可視化、デバイス別FOV調整、トップバー縮小の再設計まで記録。
Search Groundingで観光地図検索を最新化する記録
Gemini 2.5 FlashにGoogle Search Groundingを統合し、構造化出力を保ったまま最新の観光情報と緯度精度±9mを両立。groundingMetadataの監査、cleanupJSONの再設計、待機UIの多段演出で離脱率26%→4%に抑えた記録。
Gemini構造化出力で観光地図検索を磨き直す
Gemini 2.5 Flashの構造化出力で観光スポットをJSON化し、cleanupJSONと正規表現フォールバックで破損レスポンスを0件に抑えつつLeafletで番号付きマーカーを描き直した再構築記。緯度24〜46度・経度122〜154度のガードで海上座標も除外。
タロット占いシステムの製作 - 78枚のカードと時間ベース個別メッセージ
78枚のタロットカード（大アルカナ22枚＋小アルカナ56枚）を全て定義し、時間帯・曜日・選択速度・セッション時間を組み合わせた個別メッセージ生成システムを実装。122パターン以上のメッセージバリエーション。CSS 3Dトランスフォームで裏返るカードアニメーション、Web Audio APIで音響フィードバック、タッチイベント最適化でモバイル対応。
動画の色情報から3D空間を動かす実験
動画を5領域に分割して色を抽出し、パーティクルシステムとアートオブジェクトに反映。彩度2.0倍、コントラスト1.5倍に強調。1500個のパーティクルで約62fps維持。動画の種類によって印象が大きく変わる実験的な3Dビジュアライゼーション。音楽MV、風景、アニメで全く異なる表現が生まれる。
タロット結果が歪む midori299 の調査記
webgl.js を読み込んでいない旧構成で canvas が body に漂い、pointer-events を奪っていた問題を起点に、三層レイヤーの崩壊、大アルカナ判定が常に0になる includes ミス、AudioContext のリーク、124KB の巨大バンドルによる LCP 遅延を解析。Three.js と tarot-component を疎結合に戻し、マーケティング視点の KGI/KPI も整備した改善記録。
Gemini APIで大量のマニュアルを読み込ませてQAシステムを作る
HTMLマニュアル全文（約1000行以上）を事前に読み込み、Gemini APIで質問応答するシステム。HTMLタグを正規表現で除去してトークン数を約30%削減。プロンプトで【マニュアル全文】と【質問】を明確に区別。JSON形式でアクション判定し、対応する関数を実行。Gemini 1.5 Proの長文コンテキスト処理能力を活用。
Gemini APIでシンプルなチャットを作る
Gemini APIを使ったシンプルなチャットシステム。fetch()でPOSTリクエスト、contents配列にparts配列を含める形式。モデル選択機能、トークン数管理（文字数÷4で簡易計算）。API呼び出しの基本から、リクエスト・レスポンスの構造、エラーハンドリングまで実装。無料枠で十分試せる。
サイトの基盤を見直した - z-indexと翻訳機能の整理
z-index階層構造を1から順番に整理（3D空間→コンテンツ→解説→コントロール→翻訳）。Google TranslateバナーをCSSとJavaScriptで非表示化。pointer-eventsで親要素をnone、子要素をautoに設定し、コンテンツと3D空間の操作を両立。イージング関数で分裂・合体アニメーションを滑らかに実装。
Gemma3のファインチューニング - データ加工から学習まで
Gemma3-1bをLoRAでファインチューニングし、日本語QAモデルを作成。データをGemma3のプロンプト形式（<start_of_turn>タグ）に正確に変換。LoRAパラメータ（r=8、alpha=16）設定、学習率3e-4、エポック20で学習。Google Colab無料T4 GPUで約2時間で完了。プロンプト形式の正確性が重要。
ブラウザ単体でLLMを動かす - MediaPipeでGemma3推論
MediaPipe Tasks GenAIを使い、ブラウザ上でGemma3-1b-it-int8-web推論を実行。モデルファイル（約700MB）をブラウザに読み込み、WASMで推論。読み込み約30秒、推論約10秒。サーバーへの通信なし、すべてブラウザで完結。プライバシーが保たれる利点。精度は未調整だが動作確認成功。
Gemma×LoRAで日本語菌類QAモデルを作る - 全体の流れ
Gemma-3-1bを日本語菌類論文データでLoRAファインチューニング。細かい話は抜きにして、全体の流れを説明。環境準備→データセット取得→Gemma-3形式に変換→LoRA設定（r=8、alpha=16）→学習実行（5エポック）→モデル保存の6ステップ。T4 GPUで約1時間。プロンプト形式を間違えると学習失敗。菌類の専門的な質問に答えられるモデルを作成。
Gemma3のデータセット加工とLoRAファインチューニング実践
日本語データセット（論文3行まとめ1,500件、識別形質比較1,500件）をGemma-3専用プロンプト形式に変換してLoRAファインチューニング。<start_of_turn>タグで会話を区切る形式への正確な変換が最重要。形式を間違えると学習が失敗。Pythonで自動変換関数を実装。learning_rate=3e-4、r=16で20エポック学習。学習データには正確に回答、未知の質問には曖昧な回答。
Gemma-3-1b-it日本語LoRAファインチューニング実践
Gemma-3-1b-itを日本語QAデータでLoRAファインチューニング。データセットをGemma-3専用プロンプト形式（<start_of_turn>タグ）に変換。LoRAパラメータr=16、alpha=32、target_modulesを4層に適用。学習率3e-4で20エポック学習。プロンプト形式を間違えると学習失敗、正確な変換が最重要。Google Colab A100で学習、LoRAのみとマージ版の両方を保存。
物理ベースライティングで写真に立体感を与える - ノーマルマップの実装
JPG画像をThree.jsで高品質に平面表示し、ノーマルマップと物理ベースライティングで立体感や質感をリアルに再現。周囲4ピクセルの明度から勾配を計算し、法線ベクトルを生成。環境マップ強度1.2、ノーマルマップ強度0.7で最適なバランス。Lambert反射で拡散光、Specular反射で鏡面光を計算。環境マップなしでは平坦、追加すると写真が生き生きとする。
和紙印刷風写真ビューワ - パーリンノイズで繊維を表現
写真を和紙に印刷したような質感で表示するWebアプリ。パーリンノイズで自然な繊維パターンを生成。細かい繊維（スケール900.0）と粗い繊維（スケール200.0）を多層合成。和紙の色RGB（1.0, 0.98, 0.95）でほんのり温かみ、4%の黄ばみを追加。写真と和紙を乗算合成。単純なランダムノイズでは失敗、パーリンノイズで自然な質感を実現。
MidoriPhotoArt - 繊維質感印刷風写真ビューワ
写真を紙の繊維感・厚み・透過感とともに表示するWebGL作品。パーリンノイズで自然な繊維パターンを生成（スケール50.0）。ノイズ値を紙の厚みとして扱い、透過率を計算。周囲9ピクセルを平均して透過光を拡散、光の散乱を再現。photoStrength=1.37、paperTransmit=0.58、contrast=1.26で自然な質感。完全ランダムノイズでは失敗、パーリンノイズで成功。
Windows用ランチャーアプリの設計を考える - システム設計の思考プロセス
Windows用ランチャーアプリ「StartPilot」の設計書を作成。コンポーネント指向でmain（中身）とrenderer（見た目）を分離。やりとりはIPC通信でAPI経由。命名規則を`対象:動詞`の形式で統一。データ管理は100個以下ならJSON、それ以上ならSQLite。設計なしで実装して失敗、設計書を書くことで全体像が明確に。疎結合、単一責任、カプセル化を意識した設計。
JPG画像をパーティクルアートに変換する
画像を粒子の集まりとして表示し、マウス操作でインタラクティブに動かせるシステム。画像サイズに応じて粒子密度を自動調整（h/100、w/140の比率）。マウスとの距離計算で反発距離40px、反発強さ20px。イベント駆動の描画でCPU使用率を80%→10%に削減。パーティクルサイズも画像幅に応じて調整（Math.max(2.5, w/160)）。風景、人物、抽象画で異なる表現が生まれる。
光で遊ぶノーマルマップビューワの再設計
JPEGビューワを全面刷新し、ライトプリセット・ライトアニメーション・質感ハイライトモード・折りたたみ式コントローラーを統合。ガウシアンブラー（1,2,1行列）で滑らかに生成したノーマルマップをHSL変換で色付けし、凹凸の向きと強度を即時確認。アニメーションは水平周回・上下スイング・パルス強度の3種、速度0.2〜3.0xをリアルタイム調整。スマホ幅ではコントロールパネルが自動で畳まれ、ResizeObserverで表示サイズが安定。
手のジェスチャーで3D空間のメディアを操作する
カメラの前で手を動かすだけで、3D空間の画像や動画を操作できるシステム。MediaPipe Handsで手の21個のランドマークを検出。グー、チョキ、パーのジェスチャーで動画再生、画像表示、一時停止を制御。minDetectionConfidence: 0.5で検出の安定性を確保。Three.jsのVideoTextureで3D空間にメディア表示。targetFPS: 30でCPU使用率70%に軽減。明るい環境で認識率90%以上。
都営大江戸線のおみくじを作った
大江戸線の駅名と運勢を組み合わせたおみくじシステム。38駅 × 9種類の運勢 × メッセージパターンで約22万通りの組み合わせ。Web Componentsで実装し、HTMLタグ1つで使える。Shadow DOMでスタイルをカプセル化、CSSカスタムプロパティで柔軟性を確保。大江戸線のマゼンタカラー（#D0007C）をベースにしたデザイン。環状線をイメージした回転アニメーション（60秒周期）。
ElectronでWindowsデスクトップアプリを作る
JavaScriptでWindowsアプリを作成。Electronを使えば、Web技術だけでデスクトップアプリが作れる。package.json、main.js、index.htmlの3ファイルで動作。nodeIntegration: trueでNode.js APIにアクセス。portable形式でインストール不要の.exe生成（約150MB）。ビルド時間は初回5分、2回目以降1分以内。起動時間約3秒。Web技術の知識で本格的なデスクトップアプリを開発可能。
SVGで和柄模様をアニメーション表示する
麻の葉模様と青海波を、SVGで数学的に定義してアニメーション表示。patternタグで繰り返しパターンを定義（120×120pxの麻の葉、100×100pxの青海波）。SMIL animationで色と形を時間変化（4-8秒周期）。桜吹雪エフェクトで和の雰囲気を強化（8個の花びら）。緑と青の配色が最適。アニメーション周期をずらして複雑な動きを表現。
手のジェスチャーでUI操作 - MediaPipeによるパターン認識
カメラの前で手を動かすだけで、動画再生や画像切り替えができるシステム。MediaPipeで手の21個のランドマークを検出し、10種類以上のジェスチャーを認識。グー、チョキ、パー、サムズアップ、OKサイン、ロックサインなどのパターンに対応。閾値0.03で指の伸び判定、クールダウン時間1秒で誤検出を防止。照明条件が良ければ認識率90%以上。開発途中だが基本機能は動作。
手のジェスチャーで3D空間にエフェクトを発生させる
MediaPipe Handsで21ランドマークを検出し、ONNX RuntimeをWebGPUで動かした深度推定を合わせて立体的なジェスチャー解析を実装。開き手・握りこぶし・指ポーズでパーティクルやビームなど複数のThree.jsエフェクトを発火し、深度に基づいたエフェクトの重なり制御やジェスチャーフローUI、8本のデモで検証した制作記録。
WebGLとHTML/CSSの融合システムを完成させた
3つのHTMLディスプレイモジュール統合（HtmlDisplayOriginal、HtmlDisplayOriginal2、staticHtmlDisplay）、画像80枚以上を遅延読み込み（1920×1080pxリサイズ、150MB）、動画コントローラー実装、モジュール別FPS制限（5fps、10fps、15fps）で平均12fps、クリックで断片化エフェクト。
3D空間のインターフェースデザインを試した
拡張現実のUIデザインを4パターン実験（中央配置、固定配置、レイヤー型、コンテキストメニュー型）。レイヤー型が最も実用的（3層まで）、カメラ距離200～300pxが最適、背景透明度0.15で文字が読める。Raycaster座標変換、ホバー効果（透明度+サイズ）、クリック反応を実装。
ブラウザでMiDaS深度推定を動かした
MiDaSモデルをONNX形式に変換してonnxruntime-webでCPU推論を実行（512px: 約12秒）。9種類のモデル対応（256px～1024px）、正規化パラメータの違いに対応、Infernoカラーマップで可視化。サーバー不要、ブラウザ単体で深度マップ生成。次のmidori262でWebGPU版を実装。
WebGPUでMiDaS深度推定を10倍高速化した
CPUでのMiDaS深度推定（512px: 12秒）をWebGPUで高速化（512px: 1.2秒）。executionProvidersに"webgpu"を指定するだけで10倍の速度改善。9種類のモデル対応（256px～1024px）、Infernoカラーマップで可視化、フォールバック処理も実装。
動画の各フレームをリアルタイムで深度推定した
動画ファイルをHTMLVideoElementで読み込み、フレームごとにMiDaS深度推定を実行（512×512、約50ms）。オリジナル、深度マップ、オーバーレイの3つを同時表示。requestAnimationFrameループで約20fps。isProcessingフラグで遅延防止、Canvas再利用でメモリリーク対策（約500MB安定）。スマホは256×256で約12fps。
深度マップから法線マップを生成して写真に凹凸をつけた
EXIF深度マップから法線マップ（ノーマルマップ）を生成（ソーベルフィルタ、強度5.0）、512×Xセグメントの高解像度メッシュでDisplacementMap（scale 4.0、bias -2.0）とNormalMapを適用。レイヤー分割より滑らか、境界がない。環境光とディレクショナルライトで凹凸を強調。初回読み込み約0.7秒、その後60fps。midori266より大幅に高速。
EXIFに埋め込んだ深度マップで写真を立体表示した
EXIF UserCommentに深度マップを埋め込み（Base64、256×256、約50KB）、読み込み時にデコード（約0.9秒）。深度推定不要で約0.7秒高速化。レイヤー分割とmidori266と同じ、8層、レイヤー間隔5.0。ファイルサイズ約50KB増加、配布用として許容範囲。スマホで約1.5秒表示（midori266は約4秒）。深度マップ付き写真を配布可能。
深度マップで写真をシャドウボックス風の立体作品にした
MiDaS深度推定で画像から深度マップ生成（512×512、約1秒）、8層のレイヤーに分割（深度の均等分割）、3D空間に配置（レイヤー間隔5.0）。レイヤー数は4個で粗すぎ、16個で細かすぎ、8個が最適。Alpha値だけ0にして透明処理。renderOrderで描画順序を制御。初回読み込み約1.6秒、その後60fps。平面の写真が立体作品になる。
手の特徴点を検出して線で結んで可視化した
MediaPipe Handsで21個のランドマーク検出、線で結んで手の骨格を可視化。modelComplexity=1で約15ms（精度とパフォーマンスのバランス）、信頼度0.7で誤検出を抑制。カメラ解像度1280×720で品質を確保。線の太さ3pxで手の形が分かりやすい。正規化座標をピクセル座標に変換して描画。約59fpsでほぼ60fpsの滑らかな動作。
MediaPipeのZ座標と深度推定の違いを検証した
MediaPipe HandsのZ座標とMiDaS深度推定を比較検証。MediaPipe Z座標は手首からの相対距離（0.0〜0.3、手のポーズ推定用）、MiDaS深度推定はカメラからの絶対距離（0.0〜1.0、物体配置用）で全く別物。手を前後に動かして実測比較、MediaPipeは手の形状で変化、MiDaSは距離で変化。ARインターフェースには深度推定が必要。並行実行で約50fps動作。
手の検出と深度推定を同時に実行した
MediaPipe Handsと MiDaS深度推定を並行実行。Promise.allで2つのAI推論を同時処理、順次実行（約35ms）より約15ms高速化して約20msで実行（約50fps）。深度情報で画像サイズを調整（手が近いと大きく、遠いと小さく）。座標変換（正規化座標→ピクセル座標）で正しい深度値を取得。100フレームごとにガベージコレクション実行で長時間安定動作。
手の動きで画像と動画を表示するARインターフェース
MediaPipe Handsで21個のランドマーク検出（約15ms）、ピースサインで画像、ロックサインで動画を表示する基礎的なARインターフェース。Y座標比較でシンプルに指の伸び具合を判定、角度に依存せず安定した認識。表示位置を-100pxオフセットして手と重ならないように配置。約54fpsで滑らか動作。CSSで画像/動画制御、軽量な実装。
手のジェスチャーでコンテンツを操作するARインターフェース
MediaPipe Handsで21個のランドマーク検出（約15ms）、8種類のジェスチャー認識（No.1、ピース、ロックなど）。パターンに応じて時計/画像/動画を表示。Y座標比較で指の伸び具合を判定、5フレーム連続検出で安定化。グー5秒でパーティクルエフェクト（100個）。OKサインは手のサイズで正規化（閾値10%）。約47fpsで動作。
深度マップをFPS視点で立体的に表示した
WEBカメラから深度推定して3D空間に立体表示。高解像度（1024×1024）で深度推論（約50ms）、高密度ジオメトリ（1024×288分割、約30万ポリゴン）で細かい表現。エッジフェード効果（フェード幅0.1）で自然な表示、推論間隔10msで高速更新（実際は約15fps）。深度範囲の動的調整でどんなシーンでも立体感を維持。FPS視点で物体の位置を立体的に把握可能。
深度マップを地形のように表現してみた
WEBカメラ映像からMiDaS深度推定で地形を3D表示。PlaneGeometry（128×72分割）で深度を高さに変換、ShaderMaterialで3つのカラーモード（地形図風/水彩画風/抽象画風）を実装。等高線（15本）と水面（レベル0.3）で地形らしさを演出。FBM（4オクターブ）でノイズを加えて自然な起伏。凹凸の強さ35.0で最適なバランス。約5fps更新でリアルタイム表示。
WEBカメラ映像から物体の輪郭を3D空間に表示した
WEBカメラからMiDaS深度推定で物体位置を計算、3D空間に輪郭線を表示。Sobelフィルタでエッジ検出（閾値0.1）、ガウシアンブラー（5×5カーネル）でノイズ低減、k-meansクラスタリング（5回反復、6セグメント）で色分け、ShaderMaterialで凹凸表示（分割数128×72）。WebGPU推論で約20ms、合計約43ms（約23fps）で実用的な速度を実現。
深度変化で物体の移動を検知する
定点カメラからMiDaSモデル（ONNX）で深度推論し、過去のデータと比較して物体移動を検知。5×5窓で平均化してノイズ除去、閾値0.045で適切な感度を確保。サンプリングレート0.05でパフォーマンス維持（約15fps）。グリッドベース検出で高速化。深度変化箇所にカラフルなパーティクルを生成。従来の画像差分より照明変化に強い。
手の動きを3D空間に立体表示した
WEBカメラからMiDaSモデル（ONNX）で深度推論し、MediaPipe Handsで手の21個のランドマークを検出。深度情報と組み合わせて3D空間に立体表示。WebGPUで深度推論を高速化（512x512、約20fps）。座標系変換（Y軸・Z軸反転、スケール150）で正確な3Dマッピング。信頼度0.7で安定検出。チューブジオメトリで手の形状を可視化。
HTMLテクスチャを爆散させる3Dインターフェース実験
OffscreenCanvasでSVGをテクスチャ化し、動画とHTMLを同じ平面に貼り付けた。クリスタルをクリックするとcreateFragmentsで10秒かけて断片を飛ばし、RaycasterのUV→SVG変換でボタン操作も成立させた。
HTMLプレーンを四層重ねて分裂させる3Dインターフェース実験
Photo_html_Displayで画像を300pxに縮小してBASE64化し、mp4_control_Displayは45%幅の動画領域を毎フレーム描画。Cubeをクリックすると12×12=144断片が100±20px飛び、進捗係数のバグで0.5秒で外挿→即復帰という挙動が露わになった。
SVG内でカスタムタグを使った完全カプセル化
外部リソースに依存しない完全自己完結型コンポーネント。Web ComponentsでスタイルとスクリプトをカプセL化、BASE64で画像埋め込み。カスタムイベントで疎結合な通信、シンプルなストアで状態管理。10個まで実用レベル、初期化500ms・20fps達成。
動画とHTMLを同一領域に統合表示した
動画とHTMLコンテンツを同一Canvas上に統合。レイヤー構造で柔軟に配置、HtmlRenderer・VideoRendererでコンポーネント分離。選択的更新で最適化、静的HTMLは1回描画。宣言的レイアウト指定でJSON定義。HTML2層+動画1層で20fps達成。
画像と動画を統一的に3D空間に表示した
BASE64圧縮の画質劣化を解決、Canvas方式で元画像を維持。動画と画像を統一インターフェースで扱う。Web Componentsでカプセル化、再利用性向上。ハッシュ検知でCPU60%削減。Canvas方式で画質高、初期化0.5秒、30fps達成。
HTMLに高度なアニメーションエフェクトを実装した
CSS不可の環境でも独自アニメーションシステムを構築。フェード、スライド、スケール、回転、パーティクルの5種類実装。AnimationManagerで一元管理し30fps達成。タイムラインとイベント駆動で複雑な演出も組み立て可能。パーティクルは特別な時だけ使用。
3D空間にHTMLを表示するシステムを安定化させた
midori256の複雑な設計を見直し、1ページ1クラスに再設計。Web Componentsでカプセル化、SVG変換キャッシュでCPU使用率50%削減、Canvas要素のサポート追加。静的コンテンツで30fps、Canvas含むコンテンツで20fps達成。エラーハンドリング強化で安定性向上。
同一3D空間に複数のHTMLページを配置した
midori257を改良、Web Componentsで各ページを独立（タグ名動的生成）、Promise.all()で並列初期化（6秒→2秒）、SVG変換キャッシュで2倍高速化（10fps→20fps）、Raycaster座標変換でクリック判定。3ページ同時表示で平均15fps、メモリ120MB。
WebGLとHTMLを束ねた三層ショーケースの総仕上げ
Three.jsでPhoto_html_Displayとmp4_control_DisplayをPromise.allで同時初期化し、OffscreenCanvasで300pxのBASE64変換や動画描画領域をSVGから逆算。CatmullRomCurve3の球体とデバイス別FOV調整で視線と操作感を整えた。
HTML断片を散らして戻す midori248 の分割実験
splitCount=8で4枚のHtmlAnimationを256断片に分割し、transitionDuration300・hold180の三角波で散開/収束。material.clone()256回やscene.addの冗長呼び出し、.clickable-area不在によるRaycaster空振り、emissive補間の負荷を洗い出したメモ。
四枚のHtmlAnimationを同期させたモード切替ログ
Promise.allで4枚のHtmlAnimationを190msで同時起動し、modePhase200周期のnormal/spiral/chaosを追跡。環境マップのneedsUpdate抜けやOffscreenCanvas判定逆転を洗い、deviceSettingsのpixelRatio制限とanimationCallbacksの負荷を測った調整記録。
HTMLテンプレートを四枚のPlaneに貼り付けたUIショーケース
OffscreenCanvasでSVGテンプレートを差分更新し、四枚のHtmlAnimationをPromise.allで同時初期化。環境マップの放射状グラデーションやデバイス別FOV調整でWebGLとCSS3Dの多層HUDを滑らかに同期させた調整ログ。
CSS3DとWebGLを束ねた多層HUD調律記
RaycasterのUV→SVG変換を1920×1080に固定し、Clock/Calendar/VideoをOffscreenCanvas 60fpsで統合。CSS3D pointer-eventsトグルとdevicePresetでHUD操作とOrbitControlsを両立させた調律ログ。
HTML HUDを再配線した midori242 の構造改革日誌
ClockDisplayとVideoDisplayをOffscreenCanvasで統合し、animationCallbacksを3系統に絞って総処理時間19ms前後に抑えた記録。RaycasterのUV→SVG変換、CSS3Dコンポーネントの距離計算、5秒で縮むトップバーまで再調整した。
OffscreenCanvas一枚で押し切った midori241 の試運転記
initializeInteractiveCanvasひとつで動画とSVGを合成し、animationCallbacksがローカル配列のまま運用されていた初期HUD。portrait補正不足やStatsオーバーレイの干渉など、再配線前の課題を洗い出した。
WebGLにHTMLを焼き付けた midori244 のビデオHUD再構築記
OffscreenCanvasでSVG HUDと動画テクスチャを1枚に統合し、RaycasterのUV→SVG変換で細かな再生・シーク操作を成立。fps120放置の無駄を30fps制御と500フレーム計測キャッシュで抑え、DOM再生成を70%圧縮しつつThree.jsシーンにHUDを浮かせた改修記録。
HTMLを三次元に鋳造したUIシェル
OffscreenCanvasとSVGでHTML UIをCanvasTextureに焼き込み、window.animationCallbacksで球体アニメーションと同期。setupDeviceOptimizationでFOVとpixelRatioを調整し、PMREMとグラデーションfallbackで環境光を絶やさないUIシェル。
HTMLギャラリーを三次元へ持ち上げたmidori249
旧サイトの写真ギャラリーをThree.jsのPlaneGeometryへ貼り付け、convertImageToBase64で27,863,200→116,400ピクセルに圧縮。SVGテンプレートとOffscreenCanvasで再描画を差分更新し、Raycaster→SVG座標変換でボタンの判定を完全再現した。
跳躍カレンダーが暴れた midori235 のCSS3D初動記
pointer-eventsトグルがOrbitControlsと干渉しHUDが逃げる問題や、moveToCameraが100ユニット先までCSS3Dを跳ばす設計、black_back2.jpg欠落で星空フォールバックが10Hzで走り続ける状況を数値で洗い直した記録。
デジタル時計が眠れない midori234 のHUD診断録
CSS3DRendererでHTML時計を浮かべたものの、初期表示が1秒間00:00:00のまま止まり、pointer-eventsトグルが親DOMのnone設定で無効化され、setIntervalや環境マップのフォールバックがCPUを占有する問題を整理したレポート。
クリック迷子になった midori233 のCSS3Dカード初診録
CSS3Dで回転カードを配置したものの、css3dRenderer.domElementをpointer-events:noneのまま固定し、インタラクションボタンもrenderer側の設定を戻さず、赤いWebGL球やPromise.all初期化がHUDを覆い隠した問題を洗い直した記録。
CSS3D時計の呼吸を整える midori232 の再点検記
CSS3D時計がpointer-eventsと環境マップの不具合で21%までCPUを浪費し、トップバーも5秒で縮む旧実装を調査。RAF統合、matchMediaベースのデバイス調整、未使用コンポーネントの撤去でHUDを安定させた改善ログ。
CSS3Dラベルを掴み直す midori231 の整流記
CSS3Dラベルが10pxで潰れ、pointer-eventsも固定で無効なままDragControlsを読み込む旧構成を再点検。ラベルサイズと座標、matchMediaによるカメラ距離、resizeハンドラとanimationCallbacksの整理でHUDと球体を調和させた改善記録。
CSS3Dを前面に押し出した midori240 の粒子実験録
CSS3Dを主役に据えるため15,000粒子のcreateAnimatedSphereを背景に回し、Promise.all初期化とpointer-eventsトグルだけでHUDを支えた結果、33.7msまで落ち込んだフレームとStatsオーバーレイ干渉を記録した反省ログ。
CSS3D HUDを写し取る midori239 の再診録
CSS3DのCalendar/Clock/TVをhtml2canvasでCanvasTexture化し、updateIntervalを1000msに戻して負荷を抑えつつ、Raycaster切替と環境マップ欠落による星空フォールバックを検証した調整ログ。
重いHUDを抱えた midori238 の負荷診断録
html2canvas scale5で9,375,000ピクセル/回のCanvasTextureとMeshPhysicalMaterialのcreateAnimatedSphereが重なり、環境マップ欠落で星空フォールバックが10Hzで走り続けたHUDを、Math.max(1000, interval)のバグとpointer-events再帰まで洗い直した記録。
CSS3Dカレンダーを貼り替える midori237 の二重実験録
CSS3DのCalendar3Dをhtml2canvas(scale=2)でCanvasTexture化し、1000px Planeへ貼りながらslerp(0.15)と900粒子・PointLightで遮蔽を偽装しつつ、Hybridパネルとpointer-events再帰の負荷を測り直した制作ログです。
管理クラスが空回りした midori236 のCSS3D再点検録
CSS3DComponentManagerがMapにCalendar3Dを格納するもののcomponent.object参照が欠落し、setVisibility/removeComponentが空振りする件と、pointer-eventsトグルがOrbitControlsと干渉してHUDが逃げる問題を整理。環境マップ欠落による星空フォールバック10Hzループと、未使用のDragControls/Statsがバンドルを肥大化させる構造を数値で洗い直した。
組子パターンのThree.js再構築と負荷対策記録
size=6で麻の葉324メッシュ、竜胆柄864メッシュ。dat.GUIをCSS3Dで浮かべつつpointer-eventsの衝突を抑え、環境マップ失敗時は放射状グラデーションと星粒200個で雰囲気を支えた調整記録。
CSS3Dと組子を同居させた記録
CSS3DRendererとThree.jsを同時駆動させ、組子パターンをサイズ10で生成すると1,600メッシュまで膨らむ負荷とpointer-eventsの切り替え事故をどう抑えたのかを洗い出したレポート。Promise.allの落とし穴やDispose漏れの対処も含め、人間目線でまとめています。
CSS3D壁の迷走を解体する midori230 の再設計記
透明Planeと5倍→1/5スケールがラベルをぼかし、D3の二重scriptや3万パーティクルがCPUを塞いだ旧実装を調査。pointer-eventsトグル、import()による初期化、matchMediaベースの距離調整でHUDを読みやすく整えた記録。
CSV索引を形態素解析で整えたmidori227の全記録
CSV301行を形態素解析で解析し、二語キーワード3,157種から107件を抽出。AddEncoding identity .gzで辞書崩壊を防ぎ、Blob URL管理とトップバー30秒猶予で索引体験を整備した記録。
感情・年齢分析の履歴を磨いた midori225 重複排除ログ
face-api.js で年齢・性別・感情を推定する midori225 を対象に、IoU・色ヒストグラム・面積を 0.4:0.3:0.3 で重み付けした combined 0.75 フィルタを実装し、重複フレームを IndexedDB に残さないよう整備した記録。32×32 の切り抜きに 20px 余白を加えてサムネイルを安定させ、updateDetectionStatistics の FPS も計測した。
YOLO11nでブラウザ顔認識を高性能化したUI設計録
YOLO11n×TensorFlow.jsで顔検出を高速化し、66/125/250msの推論間隔を切り替えるUIと、0.4:0.3:0.3の類似度判定でIndexedDB履歴を整理した制作レポート。
YOLOv11n人物検出の安定化ログ midori224
YOLOv11n×TensorFlow.jsで人物検出を安定化し、0.4:0.3:0.3の類似度スコアで重複保存を抑制。VideoStreamの解像度切替とIndexedDBの自動更新、Three.js背景や処理速度プリセットを整えた制作記録。