実装されている仕様

HTML <canvas> エレメントはスクリプトから画像を描画するために利用できます。2D 描画 API により 2D 画像を、W3C でなく Khronos Group により開発されている WebGL により 3D 画像を描画できます。

ベクタ方式も XML 形式の 2D ベクタ画像を記述するための SVG (Scalable Vector Graphics) により利用できます。この形式では画像は幾何学形状の集合で記述されるため、ズームイン・アウト可能なインターフェースを作成するのに向いています。 SVG オブジェクトは簡単にアニメーション化でき、高度かつ滑らかなユーザインターフェースを作成可能です。

ゲームでの重要な点としてユーザインターフェースを全画面表示可能かどうかがあり、Fullscreen API によりフルスクリーン表示を要求・検出可能です。

Web Audio API は低遅延の音声処理・合成 API を定義し、ゲームが音声を精密に制御できるようになります。この API は、空間音響機構、幅広いリニアエフェクトなどの合成エンジンといった様々な機能を提供します。HTML <audio> エレメントによる宣言的方法も、バックグラウンド音楽のような精密な操作が必要とならない音声処理においては有用です。

アニメーションを CSS AnimationsCSS Transitions により宣言的に記述することができます。

スクリプトによるアニメーションは制約のあるデバイスではリソースを食う場合があります。Animation Frames によりアニメーションの更新頻度を操作でき、リソース消費を制御できます。

CSS 3 とそれ以降では rounded cornersshadow effects や、rotated content といった簡単ながら高機能な画像エフェクトを実現する機能が実装されています。

CSS FlexboxCSS Grid などのいくつかのレイアウトモードを利用することでユーザのデバイスに合わせたインターフェースを作成することが可能になり、中に含まれる HTML コードを変更することなくコンテンツそのもの (HTML, SVG) と画面上の要素の並べ替えを可能にするレイアウトの間に明確な区別をつけることが可能になります。

効果的な画面表示を考えるうえでフォントも重要な要素となります。WOFF (Web Open Font Format) により、ゲームが実際に必要とする部分に限定したサイズの小さなフォントセットをスタイルシート経由で自動ダウンロードされるフォントとして簡単に利用できるようになります。

機能仕様・グループ標準化段階現在の実装状況
Select browsers…
2D/3D graphicsThe 2D rendering context in HTML Standard
WHATWG
Living Standard
WebGL Specification
Khronos Group
勧告
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
SVG Working Group
勧告
Viewport controlFullscreen API Standard
WHATWG
Living Standard
Audio renderingWeb Audio API
Audio Working Group
勧告
AnimationsCSS Animations Level 1
CSS Working Group
草案
CSS Transitions
CSS Working Group
草案
requestAnimationFrame in HTML Standard
WHATWG
Living Standard
Graphical effectsRounded corners in CSS Backgrounds and Borders Module Level 3
CSS Working Group
勧告候補
Box shadow effects in CSS Backgrounds and Borders Module Level 3
CSS Working Group
勧告候補
2D effects in CSS Transforms Module Level 1
CSS Working Group
勧告候補
CSS Flexible Box Layout Module Level 1
CSS Working Group
勧告候補
CSS Grid Layout Module Level 1
CSS Working Group
勧告候補
Downloadable fontsWOFF File Format 2.0
Web Fonts Working Group
勧告

仕様化が進行中の仕様

WebXR Device API 仕様ではアプリケーションがヘッドマウントディスプレイ (HMD) に JavaScript から接続・制御するための低レベル API を定義し、有用な仮想現実 (VR) や拡張現実 (AR) 体験を実現することが可能になります。現時点ではこれらの API はまだ安定しておらず、主要ブラウザではこれか古い WebVR 仕様の一部分を実装していますが、現時点でもウェブベースの VR/AR ゲームの開発は可能です。

ゲームではプレイ中に何らかの操作で変更されないようにスクリーンの方向を固定することが必要になる場合がよくあります。Screen Orientation API ではスクリーン方向の種別や角度を検出でき、変化した場合に認識でき、特定の方向に固定することができる機能を提供しています。

アニメーションは Web Animations で公開されている API 経由でスクリプトにより操作可能です。

機能仕様・グループ標準化段階現在の実装状況
Select browsers…
VR/AR renderingWebXR Device API
Immersive Web Working Group
勧告候補
WebVR
Immersive Web Community Group
編集者草案
Viewport controlThe Screen Orientation API
Web Applications Working Group
草案
AnimationsWeb Animations
CSS Working Group
草案

調査中の項目

W3C では ウェブにおける GPU CG (GPU for the Web Community Group) において、効率的、効果的、かつ安全に利用可能な現代的な 3D グラフィック機能を利用可能にするウェブ API を Direct3D、Metal、Vulkan といった既存のネイティブの機構にとらわれずかつ互換性のある形で検討しています。長期的には、この提案はウェブアプリケーションで GPU 計算能力を利用可能にするものになるでしょう。

Web workers は DOM へのアクセスができず、直接画面表示ができません。HTML の OffscreenCanvas インターフェース は特にワーカー内でDOM と独立して画面表示要素を作成できるようにするものです。