Web でのリッチなゲーム体験の場合、選択する武器は WebGL であり、HTML {{htmlelement("canvas")}} にレンダリングされます。 WebGL は、基本的に Web 用の OpenGL ES 2.0 であり、リッチなインタラクティブアニメーション、そしてもちろんゲームを構築するためのツールを提供する JavaScript API です。 ハードウェアアクセラレーションされた JavaScript を使用して、動的な 3D グラフィックスを生成およびレンダリングできます。
WebGL プロジェクトのドキュメントと仕様は、ほとんどの Web API のように W3C ではなく、Khronos Group によって維持されています。 最新のブラウザーでのサポートは、モバイルでも非常に良いので、それほど心配する必要はありません。 主なブラウザーはすべて WebGL をサポートしており、使用するデバイスのパフォーマンスを最適化するだけに集中する必要があります。
近い将来、WebGL 2.0（OpenGL ES 3.0 に基づく）のリリースに向けた継続的な取り組みがあります。 これにより、多くの改善がもたらされ、開発者は現在の強力なハードウェアを使用して最新の Web 用のゲームを構築できます。
3D 理論の基本は、3D 空間で表される形状を中心としており、座標系を使用してそれらの位置を計算します。 必要なすべての情報については、基本的な 3D 理論の説明の記事を参照してください。
WebGL を使用すると、さらに多くのことができます。 シェーダー、衝突検出、または最新のホットトピックである Web 上の仮想現実など、詳細に掘り下げて学ぶ必要のある高度な概念がいくつかあります。
それ自体は別の話であるシェーダーについて言及する価値があります。 シェーダーは、グラフィックスパイプラインによって直接実行される C と同様の構文を持つ特別な OpenGL シェーディング言語である GLSL を使用します。 これらは、頂点シェーダーとフラグメントシェーダー（またはピクセルシェーダー）に分割できます。 前者は形状の位置を実際の 3D 描画座標に変換し、後者はレンダリングする色やその他の属性を計算します。 それらの詳細については、GLSL シェーダーの記事を必ず確認してください。
衝突検出のないゲームを想像するのは難しいです — 何かが何かにぶつかっているときには、常にそれを解決する必要があります。 以下に学ぶことができる情報があります。
仮想現実の概念は新しいものではありませんが、Oculus Rift などのハードウェアの進歩と VR ハードウェアから情報をキャプチャーして JavaScript アプリケーションで使用できるようにするための (現在実験的な) WebVR API のおかげで、Web に押し寄せています。 詳細については、WebVR — Webによる仮想現実をご覧ください。
また、A-Frame フレームワークを使用して仮想現実の 3D 環境を構築することがいかに簡単であるかを示す、A-Frame を使った基本的なデモの構築に関する記事もあります。
生の WebGL のコーディングはかなり複雑ですが、プロジェクトがより高度になるにつれて、長期的にはそれを理解する必要があります (開始するには、WebGL ドキュメントを参照してください)。 実際のプロジェクトでは、開発をスピードアップし、作業中のプロジェクトを管理するのに役立つフレームワークをたぶん使うことになるでしょう。 3D ゲームのフレームワークを使用すると、使用するツールによって多くの処理が行われるため、パフォーマンスを最適化するのにも役立ちます。 これにより、ゲーム自体の構築に集中できます。
最も人気のある JavaScript 3D ライブラリーは Three.js で、一般的な 3D 技術をより簡単に実装できる多目的ツールです。 他にもチェックする価値のある人気のあるゲーム開発ライブラリーとフレームワークがあります。 A-Frame、PlayCanvas、Babylon.js などは、豊富なドキュメント、オンラインエディター、活発なコミュニティを備えた、最もよく知られたものです。
A-Frame は、3D および VR エクスペリエンスを構築するための Web フレームワークです。 内部的には、宣言型のエンティティコンポーネントパターンを備えた Three.js フレームワークなので、HTML だけでシーンを構築できます。 デモを作成するステップバイステップのプロセスについては、A-Frame を使った基本的なデモの構築のサブページを参照してください。
Babylon.js は、開発者が使用する最も人気のある 3D ゲームエンジンの1つです。 他の 3D ライブラリーと同様に、一般的な 3D 機能をより迅速に実装するのに役立つ組み込み関数を提供します。 開発環境のセットアップ、必要な HTML の構造化、JavaScript コードの記述など、Babylon.jsの 基本的な使い方については、Babylon.js を使った基本的なデモの構築のサブページを参照してください。
PlayCanvas は、GitHub でオープンソース化された人気の 3D WebGL ゲームエンジンであり、オンラインで利用可能なエディターと優れたドキュメントを備えています。 より高度な詳細については、PlayCanvas を使った基本的なデモの構築のサブページを参照してください。 また、PlayCanvas ライブラリーとオンラインエディターを使ったデモの作成方法については、さらに詳しい記事を参照してください。
Three.js は、他のライブラリーと同様に、巨大なアドバンテージを提供します。 何百行もの WebGL コードを記述して興味深いものを構築する代わりに、組み込みのヘルパー関数を使用して、はるかに簡単かつ迅速に構築できます。 デモを作成するステップバイステップのプロセスについては、Three.js を使った基本的なデモの構築のサブページを参照してください。
Unity と Unreal はどちらも asm.js を使用してゲームを WebGL にエクスポートできるため、それらのツールとテクニックを自由に使用して、Web にエクスポートされるゲームを構築できます。
この記事では、現在利用可能なテクノロジーで可能なことのほんの一部を紹介しました。 WebGL と、その上に構築されたライブラリーやフレームワークを使用して、Web 上で没入型の美しく高速な 3D ゲームを構築できます。
このシリーズのデモのすべてのソースコードは GitHub にあります。