three-quake — Three.jsで動くQuake（移植作業）

Web
three-quake — Three.jsで動くQuake（移植作業）

three-quake — Three.jsで動くQuake（移植作業）

Three.js上でQuake（1996年）を再現する作業中のプロジェクト。BSP形式のレベル描画とライトマップ、Quake独自のMDLモデルアニメーション、スプライト描画、.demデモ再生、全8種の武器や複数のモンスターAI、衝突判定など、オリジナルのゲーム要素をWebブラウザへ移植することを目標にしています。GitHub Pagesでプレイ可能なビルドも用意され、キーボード／マウス操作やデバッグオーバーレイ、クイックセーブ／ロードなど実用的な操作性を備えます。（約300字）

https://github.com/mrdoob/three-quake

概要

three-quakeは、1996年にリリースされた名作FPS「Quake」をThree.js（WebGL）上へ移植する作業中のリポジトリです。BSPによるレベル描画やライトマップ処理、Quake独自フォーマットのMDLモデルアニメーション、スプライトの描画、ゲームデモ（.demファイル）再生など、オリジナルの表現を再現するための機能が実装されています。ブラウザで直接プレイ可能なデモがGitHub Pagesで公開されており、WASDやマウスによる操作、武器切替、デバッグ表示、クイックセーブ／ロードといったゲームプレイ上の基本機能も用意されています。オープンソースかつ学習用途にも適した実装で、古典ゲームのレンダリング・アセット処理を学ぶ良い教材になっています。（約300字）

GitHub

リポジトリの統計情報

  • スター数: 4
  • フォーク数: 0
  • ウォッチャー数: 4
  • コミット数: 3
  • ファイル数: 8
  • メインの言語: JavaScript

主な特徴

  • QuakeのBSPレベルをThree.jsでレンダリング（ライトマップ対応）
  • MDLフォーマットのモデルアニメーションとスプライト描画をサポート
  • .demファイルによるデモ再生機能を実装
  • ブラウザで動作するプレイ可能デモと標準的な操作体系（WASD、マウス等）

技術的なポイント

three-quakeは、元のQuakeが採用したレンダリング・データ構造やフォーマット（BSP、MDL、ライトマップ、スプライト）をWeb環境に移植することに主眼を置いています。BSP（Binary Space Partitioning）レベルはポリゴンや面情報、光源情報を含み、視界決定（PVS）や可視性最適化と組み合わせることで古典的かつ効率的な描画が可能になります。Three.js上では、BSP面をBufferGeometryに変換してジオメトリを構築し、ライトマップ用UVを別チャンネルとして扱い、テクスチャとライトマップをブレンドするマテリアル（フラグメントで加算／乗算するシェーダやマルチテクスチャ）を使うことで、Quake特有の固定ライトマップ表現を再現しています。

MDLモデルはQuakeの頂点アニメーション（フレーム差分）を使った形式で、three-quakeではこれをThree.jsのジオメトリ更新あるいはモーフターゲット的な手法で実装します。各フレームの頂点座標を読み込み、適切なインターポレーションでアニメーションを再生することで、元のゲームと同様の動きを再現します。スプライト（煙やエフェクト、アイテム表示）はBillboardとしてカメラに向く四角ポリゴンでレンダリングされ、画面上の遠近や透過処理が行われます。

衝突判定や物理的な挙動は、BSP空間や境界箱を利用した簡易的なコリジョン検出で実装されることが多く、レイキャストによる当たり判定（弾丸や視線判定）や、プレイヤー移動時の滑りやスタッキング防止のためのサンプルベースの補正処理が入ります。AIやモンスターの挙動はオリジナルのステートマシンを再現した単純な行動ルーチンで、移動、攻撃、被弾反応などを組合せています。

さらに、.demデモ再生機能はQuakeの録画フォーマットを解析してプレイヤー入力やイベントを再現するもので、ゲームのリプレイやデモ観賞が可能です。入力系はブラウザ標準のキーボード／ポインタイベントを用い、フルスクリーンやポインロックに対応することで操作性を確保。GitHub Pagesによるデプロイで即座にブラウザで体験できる点も特徴です。これらの実装はThree.jsのレンダリングパイプライン（ジオメトリ、マテリアル、カメラ、テクスチャロード）をベースに、古典的ゲームフォーマットのパーサーやカスタムシェーダで補完する構成になっています。（約1200字）

プロジェクトの構成

主要なファイルとディレクトリ：

  • .gitignore: file
  • LICENSE: file
  • README.md: file
  • assets: dir
  • index.html: file
  • main.js: file
  • src/: dir（実装コード、モデル・レンダリング処理等）
  • demo/: dir（デモ用ファイルやプレイページ）

リポジトリは軽量で、必要最低限のアセットとサンプル実装を含む構成です。index.htmlはデモのエントリポイントで、Three.jsの読み込み、シーン初期化、リソースの非同期ローディング（BSP/MDL/テクスチャ/ライトマップ）を行い、読み込み完了後にレンダーループと入力更新を開始します。assetsディレクトリにはマップデータやモデル、テクスチャ、デモファイルなどが格納され、MDLやBSPといった旧フォーマットのパース処理はJavaScript側で実装されています。デバッグ用にオーバーレイやコンソール、クイックセーブ／ロードのフックも用意され、開発・検証がしやすい構成です。

まとめ

Three.jsでQuakeの表現を再現する学習的価値の高い移植プロジェクト。ブラウザで動くデモがすぐ試せます。（約50字）

リポジトリ情報：

READMEの抜粋：

three-quake

A WIP port of Quake (1996) to Three.js.

Play

https://mrdoob.github.io/three-quake/

Controls

  • WASD - Move
  • Mouse - Look
  • Space - Jump
  • 1-8 - Select weapon
  • E - Interact
  • Tab - Debug overlay
  • ~ - Console
  • Escape - Menu
  • F5 - Quick save
  • F9 - Quick load

Features

  • BSP level rendering with lightmaps
  • MDL model animation
  • Sprite rendering
  • Demo playback (.dem files)
  • All 8 weapons
  • 14 monster types with AI
  • Collisio…