![[Astro] #123 GDAL Converter — gdal3.js WASM によるブラウザ完結型 GISデータ変換・可視化ツール](https://assets.lain-lab.com/images/uploads/astro-123-gdal-converter.webp?0)
gdal3.js（GDAL C/C++ライブラリのEmscripten WASMビルド）をブラウザに組み込み、ドロップされたGISファイルのメタデータ表示・フォーマット変換・地図プレビューを実現。ogr2ogr/gdal_translate/gdalwarpの各APIをブラウザ内で実行し、ベクタ9形式・ラスタ6形式の相互変換とCRS再投影をサーバー不要で完結。
![[Astro] #122 IFC Viewer — web-ifc WASM によるブラウザ完結型 建築BIM IFCファイルビューア](https://assets.lain-lab.com/images/uploads/astro-122-ifc-viewer.webp)
web-ifc WASMモジュールをブラウザに組み込み、IFCファイルのジオメトリをストリーミング処理でThree.jsメッシュに変換。IFCタイプ別の要素ツリー表示、クリックによるプロパティ参照、タイプ別ハイライト、エッジ表示、GLBエクスポート対応。完全ブラウザ完結、広告なし。
![[Astro] #121 3D Model Viewer — assimpjs WASM による40+フォーマット対応ブラウザ完結型3Dモデルビューア](https://assets.lain-lab.com/images/uploads/astro-121-3d-model-viewer.webp?0)
assimpjs（assimp C++ライブラリのEmscripten WASMビルド）をブラウザに組み込み、ドロップされた3Dモデルファイルをglb2形式に変換、Three.js GLTFLoaderで表示。ZIP内テクスチャ・MTL自動解決、ネイティブThree.jsローダーへのフォールバック、アニメーション再生、GLBエクスポートに対応。
![[Astro] #120 SID Player — reSID + fake6502 WASM + AudioWorklet によるブラウザ完結型 Commodore 64 SIDプレイヤー](https://assets.lain-lab.com/images/uploads/astro-120-sid-player.webp?0)
reSIDとfake6502をSTANDALONE_WASMビルドし、AudioWorkletスレッド内で直接instantiateしてCommodore 64のSID音源をブラウザでリアルタイム再生。PSIDヘッダー解析、C64メモリマップ配線、50Hz playルーチン、3Voice分離波形ビジュアライザー、チップモデル切替まで実装。
![[JavaScript] reSID + fake6502をWASM化してAudioWorkletで.sidファイルを再生する ― ブラウザ完結SIDプレイヤー構築記](https://assets.lain-lab.com/images/uploads/javascript-resid-wasm-audioworklet-sid-player.webp?0)
reSID（MOS 6581/8580エミュレーター）とfake6502（6502 CPUエミュレーター）をEmscriptenでSTANDALONE_WASMビルドし、AudioWorkletスレッド内で直接WASMをinstantiateしてリアルタイム音声合成を実現。PSIDヘッダー解析、C64メモリマップ配線、50Hz playルーチン呼び出しまで。
![[Astro] #119 JP2 (JPEG 2000) Image Converter — WASM + Canvas + JSZipによるブラウザ完結型画像変換・ZIP一括出力](https://assets.lain-lab.com/images/uploads/astro-119-jp2-converter.webp?2)
OpenJPEGのWASMデコーダーとCanvas API、JSZipを用いて構築したブラウザ完結型のJPEG 2000 (.jp2) 画像コンバーター。DPR対応の高精細プレビュー、toBlobによるメモリ最適化、複数ファイルの一括ZIPダウンロード機能を実装。
![[Astro] #118 STEP / IGES / BREP 3D Viewer — occt-import-js(WASM) + Three.jsによるCADファイルビューア](https://assets.lain-lab.com/images/uploads/astro-118-step-viewer.webp?1)
occt-import-js（OpenCASCADE WASM）とThree.jsによるSTEP/IGES/BREPファイルのブラウザ完結型3Dビューア。階層ツリー表示、per-face color、テッセレーション品質調整、断面表示、2点間距離測定、GLBエクスポートまで実装。
![[Astro] #117 DXF 3D Viewer — dxf-parser + Three.jsによるDXFファイルの2D/3Dビューア](https://assets.lain-lab.com/images/uploads/astro-117-dxf-3d-viewer.webp?1)
DXFファイルのブラウザ完結型3Dビューアを構築。dxf-parserでのパース、Three.jsによるエンティティ描画、レイヤー管理、Shift-JIS自動判定、Point Cloud ViewerのDXF出力との連携まで。
![[JavaScript] libjxlをWASM+SIMD化してWeb Workerで動かす ― ブラウザ完結JPEG XLコンバーター構築記](https://assets.lain-lab.com/images/uploads/javascript-libjxl-wasm-simd-worker-guide.webp?1)
C++ライブラリ（libjxl）のWASM化、EmscriptenによるSIMDフラグ指定、Web Workerでの非同期エンコード処理、そしてAstro UIからのパラメータ動的制御まで。15.16秒から1.01秒への15倍高速化とエラーハンドリングのハマりどころを解説。
![[JavaScript] WebAssembly（WASM）とEmscriptenの全体像 ― C/C++をブラウザで動かすまでの道のり](https://assets.lain-lab.com/images/uploads/javascript-wasm-emscripten-guide.webp)
WebAssemblyの基本概念、Emscriptenのビルドパイプライン、C/C++ライブラリのWASM化手順を、laz-perfカスタムビルドの実例を交えて解説。バインディング、メモリ管理、最適化まで。
![[Astro] #116 Storage Benchmark — IndexedDB vs OPFS (SyncAccessHandle) 比較検証ツールの実装](https://assets.lain-lab.com/images/uploads/astro-116-storage-benchmark-idb-vs-opfs.webp?1)
IndexedDBとOPFS（SyncAccessHandle）のパフォーマンス比較ツールを開発。Web Workerでのバックグラウンド並列処理、FileSystemSyncAccessHandleを用いた同期書き込み、HTML5 Canvasによるブロック単位のレイテンシマップ可視化の実装手法を解説。
![[Astro] #115 Point Cloud Viewer #10 — LAZ圧縮エクスポート・ファイル名反映・進捗表示](https://assets.lain-lab.com/images/uploads/astro-115-point-cloud-viewer-laz-export.webp)
Astro + React Three Fiber製の点群ビューアのv10。laz-perfにEmscripten圧縮バインディングを自作して250KBのWASMをビルドし、LAZエクスポートを実装。全エクスポートのファイル名をソースファイル名ベースに変更、LAZ圧縮の進捗表示（スピナー+パーセント）も追加。