Clear Game.Cameras in FrameSetup; separate xr variants of sys_camera, sys_render_forward

Animate/game.ts

···
     LightDetails = new Float32Array(4 * 8);
 
     override FrameUpdate(delta: number) {
+        // Camera.
+        sys_resize(this, delta);
+        sys_camera(this, delta);
+
         // Player input.
         sys_control(this, delta);
 
···
         // Rendering.
         sys_audio_listener(this, delta);
         sys_audio_source(this, delta);
-        sys_resize(this, delta);
-        sys_camera(this, delta);
         sys_light(this, delta);
         sys_render_forward(this, delta);
     }

DeferredShading/game.ts

···
     MeshCube = mesh_cube(this.Gl);
     MeshQuad = mesh_quad(this.Gl);
 
-    Targets: {
+    override Targets: {
         Gbuffer: DeferredTarget;
         Shaded: ForwardTarget;
         Sun: DepthTarget;
···
     }
 
     override FrameUpdate(delta: number) {
+        sys_resize(this, delta);
+        sys_camera(this, delta);
+
         sys_control_always(this, delta);
+
         sys_move(this, delta);
         sys_transform(this, delta);
-        sys_resize(this, delta);
-        sys_camera(this, delta);
+
         sys_light(this, delta);
         sys_render_depth(this, delta);
         sys_render_deferred(this, delta);

DeferredShading/systems/sys_resize.ts

···
-import {resize_deferred_target} from "../../common/framebuffer.js";
-import {Game} from "../game.js";
-
-export function sys_resize(game: Game, delta: number) {
-    if (game.ViewportWidth != window.innerWidth || game.ViewportHeight != window.innerHeight) {
-        game.ViewportResized = true;
-    }
-
-    if (game.ViewportResized) {
-        game.ViewportWidth = game.Canvas3D.width = game.Canvas2D.width = window.innerWidth;
-        game.ViewportHeight = game.Canvas3D.height = game.Canvas2D.height = window.innerHeight;
-
-        resize_deferred_target(
-            game.Gl,
-            game.Targets.Gbuffer,
-            game.ViewportWidth,
-            game.ViewportHeight
-        );
-    }
-}
+../../core/systems/sys_resize.ts

FirstPerson/game.ts

···
-import {GameXR} from "../common/game.js";
+import {Game3D} from "../common/game.js";
 import {mat_forward_colored_gouraud} from "../materials/mat_forward_colored_gouraud.js";
 import {mesh_cube} from "../meshes/cube.js";
 import {sys_camera} from "./systems/sys_camera.js";
···
 import {sys_ui} from "./systems/sys_ui.js";
 import {World} from "./world.js";
 
-export class Game extends GameXR {
+export class Game extends Game3D {
     World = new World();
 
     MaterialColoredGouraud = mat_forward_colored_gouraud(this.Gl);
···
     LightDetails = new Float32Array(4 * 8);
 
     override FrameUpdate(delta: number) {
+        sys_resize(this, delta);
+        sys_camera(this, delta);
+
         sys_control_keyboard(this, delta);
         sys_control_mouse_move(this, delta);
         sys_control_touch_move(this, delta);
···
         sys_move(this, delta);
         sys_transform(this, delta);
 
-        sys_resize(this, delta);
-        sys_camera(this, delta);
         sys_light(this, delta);
         sys_render_forward(this, delta);
         sys_draw(this, delta);

ForwardShading/game.ts

···
-import {GameXR} from "../common/game.js";
+import {Game3D} from "../common/game.js";
 import {mat_forward_colored_flat} from "../materials/mat_forward_colored_flat.js";
 import {mat_forward_colored_gouraud} from "../materials/mat_forward_colored_gouraud.js";
 import {mat_forward_colored_phong} from "../materials/mat_forward_colored_phong.js";
···
 import {sys_transform} from "./systems/sys_transform.js";
 import {World} from "./world.js";
 
-export class Game extends GameXR {
+export class Game extends Game3D {
     World = new World();
 
     MaterialColoredPoints = mat_forward_colored_points(this.Gl);
···
     LightDetails = new Float32Array(4 * 8);
 
     override FrameUpdate(delta: number) {
+        sys_resize(this, delta);
+        sys_camera(this, delta);
+
         sys_control_always(this, delta);
+
         sys_move(this, delta);
         sys_transform(this, delta);
-        sys_resize(this, delta);
-        sys_camera(this, delta);
+
         sys_light(this, delta);
         sys_render_forward(this, delta);
     }

ForwardShadows/game.ts

···
     LightPositions = new Float32Array(4 * 8);
     LightDetails = new Float32Array(4 * 8);
 
-    Targets = {
+    override Targets = {
         Sun: create_depth_target(this.Gl, 2048, 2048),
     };
 

Instancing/game.ts

···
     LightDetails = new Float32Array(4 * 8);
 
     override FrameUpdate(delta: number) {
-        sys_transform(this, delta);
         sys_resize(this, delta);
         sys_camera(this, delta);
+
+        sys_transform(this, delta);
+
         sys_light(this, delta);
         sys_render_forward(this, delta);
     }

Minimal3D/game.ts

···
-import {GameXR} from "../common/game.js";
+import {Game3D} from "../common/game.js";
 import {mat_forward_colored_gouraud} from "../materials/mat_forward_colored_gouraud.js";
 import {mesh_cube} from "../meshes/cube.js";
 import {sys_camera} from "./systems/sys_camera.js";
···
 import {sys_transform} from "./systems/sys_transform.js";
 import {World} from "./world.js";
 
-export class Game extends GameXR {
+export class Game extends Game3D {
     World = new World();
 
     MaterialColoredGouraud = mat_forward_colored_gouraud(this.Gl);
···
         sys_transform(this, delta);
         sys_resize(this, delta);
         sys_camera(this, delta);
+
         sys_light(this, delta);
         sys_render_forward(this, delta);
     }

Monkey/game.ts

···
-import {GameXR} from "../common/game.js";
+import {Game3D} from "../common/game.js";
 import {Mesh} from "../common/mesh.js";
 import {mat_forward_colored_gouraud} from "../materials/mat_forward_colored_gouraud.js";
 import {mat_forward_colored_phong} from "../materials/mat_forward_colored_phong.js";
···
 import {sys_transform} from "./systems/sys_transform.js";
 import {World} from "./world.js";
 
-export class Game extends GameXR {
+export class Game extends Game3D {
     World = new World();
 
     MaterialColoredGouraud = mat_forward_colored_gouraud(this.Gl);
···
     LightDetails = new Float32Array(4 * 8);
 
     override FrameUpdate(delta: number) {
-        sys_transform(this, delta);
         sys_resize(this, delta);
         sys_camera(this, delta);
+
+        sys_transform(this, delta);
+
         sys_light(this, delta);
         sys_render_forward(this, delta);
     }

NewProject3D/game.ts

···
-import {GameXR} from "../common/game.js";
+import {Game3D} from "../common/game.js";
 import {mat_forward_colored_phong} from "../materials/mat_forward_colored_phong.js";
 import {mesh_cube} from "../meshes/cube.js";
 import {sys_animate} from "./systems/sys_animate.js";
···
 import {sys_ui} from "./systems/sys_ui.js";
 import {World} from "./world.js";
 
-export class Game extends GameXR {
+export class Game extends Game3D {
     World = new World();
 
     MaterialColoredShaded = mat_forward_colored_phong(this.Gl);
···
         // Event loop.
         sys_poll(this, delta);
 
+        // Camera.
+        sys_resize(this, delta);
+        sys_camera(this, delta);
+
         // Player input.
         sys_control_keyboard(this, delta);
         sys_control_mouse_move(this, delta);
···
         // Rendering.
         sys_audio_listener(this, delta);
         sys_audio_source(this, delta);
-        sys_resize(this, delta);
-        sys_camera(this, delta);
         sys_light(this, delta);
         sys_render_forward(this, delta);
         sys_draw(this, delta);

Particles/game.ts

···
     Textures: Record<string, WebGLTexture> = {};
 
     override FrameUpdate(delta: number) {
+        sys_resize(this, delta);
+        sys_camera(this, delta);
+
         sys_particles(this, delta);
         sys_shake(this, delta);
         sys_transform(this, delta);
-        sys_resize(this, delta);
-        sys_camera(this, delta);
+
         sys_render_forward(this, delta);
     }
 }

PathFinding/game.ts

···
-import {GameXR} from "../common/game.js";
+import {Game3D} from "../common/game.js";
 import {Mesh} from "../common/mesh.js";
 import {Entity} from "../common/world.js";
 import {mat_forward_colored_gouraud} from "../materials/mat_forward_colored_gouraud.js";
···
 import {sys_transform} from "./systems/sys_transform.js";
 import {World} from "./world.js";
 
-export class Game extends GameXR {
+export class Game extends Game3D {
     World = new World();
 
     MaterialColoredLine = mat_forward_colored_line(this.Gl);
···
     Selected?: Entity;
 
     override FrameUpdate(delta: number) {
-        // Camera controls and picking.
+        // Camera and picking.
+        sys_resize(this, delta);
+        sys_camera(this, delta);
+        sys_pick(this, delta);
+
+        // User input.
         sys_control_keyboard(this, delta);
         sys_control_mouse_drag(this, delta);
         sys_control_touch_drag(this, delta);
         sys_control_dolly(this, delta);
-        sys_pick(this, delta);
 
         // Player order.
         sys_control_player(this, delta);
···
         sys_collide(this, delta);
 
         // Rendering.
-        sys_resize(this, delta);
-        sys_camera(this, delta);
         sys_light(this, delta);
         sys_render_forward(this, delta);
         sys_draw(this, delta);

Render2D/game.ts

···
 import {sys_move2d} from "./systems/sys_move2d.js";
 import {sys_physics2d_integrate} from "./systems/sys_physics2d_integrate.js";
 import {sys_render2d} from "./systems/sys_render2d.js";
-import {sys_resize} from "./systems/sys_resize.js";
+import {sys_resize2d} from "./systems/sys_resize2d.js";
 import {sys_transform} from "./systems/sys_transform.js";
 import {sys_transform2d} from "./systems/sys_transform2d.js";
 import {World} from "./world.js";
···
     }
 
     override FrameUpdate(delta: number) {
+        sys_resize2d(this, delta);
+        sys_camera2d(this, delta);
+
         sys_control_player(this, delta);
         sys_control_always2d(this, delta);
+
         sys_move2d(this, delta);
         sys_physics2d_integrate(this, delta);
         sys_transform2d(this, delta);
         sys_transform(this, delta);
-        sys_resize(this, delta);
-        sys_camera2d(this, delta);
+
         sys_render2d(this, delta);
     }
 }

Render2D/systems/sys_camera2d.ts

···
  */
 
 import {copy, get_translation, multiply} from "../../common/mat4.js";
-import {ProjectionKind, resize_ortho_keeping_unit_size} from "../../common/projection.js";
 import {CameraKind} from "../components/com_camera.js";
 import {Game} from "../game.js";
 import {Has} from "../world.js";
···
 const QUERY = Has.Transform | Has.Camera;
 
 export function sys_camera2d(game: Game, delta: number) {
-    game.Cameras = [];
     for (let i = 0; i < game.World.Signature.length; i++) {
         if ((game.World.Signature[i] & QUERY) === QUERY) {
             let camera = game.World.Camera[i];
-            if (camera.Kind === CameraKind.Xr) {
-                throw new Error("XR not implemented");
+            if (camera.Kind !== CameraKind.Forward) {
+                throw new Error("Only Forward cameras are supported.");
             }
 
             let transform = game.World.Transform[i];
             let projection = camera.Projection;
-
-            if (game.ViewportResized) {
-                let aspect = game.ViewportWidth / game.ViewportHeight;
-                switch (projection.Kind) {
-                    case ProjectionKind.Ortho:
-                        resize_ortho_keeping_unit_size(projection, aspect, game.ViewportHeight, 16);
-                        break;
-                }
-            }
 
             copy(camera.View, transform.Self);
             multiply(camera.Pv, projection.Projection, camera.View);

Render2D/systems/sys_resize.ts

···
-../../core/systems/sys_resize.ts

Render2D/systems/sys_resize2d.ts

···
+/**
+ * @module systems/sys_resize2d
+ */
+
+import {ProjectionKind, resize_ortho_keeping_unit_size} from "../../common/projection.js";
+import {CameraKind} from "../components/com_camera.js";
+import {Game} from "../game.js";
+import {Has} from "../world.js";
+
+const QUERY = Has.Camera;
+
+export function sys_resize2d(game: Game, delta: number) {
+    if (game.ViewportWidth != window.innerWidth || game.ViewportHeight != window.innerHeight) {
+        game.ViewportResized = true;
+    }
+
+    if (game.ViewportResized) {
+        game.ViewportWidth = game.Canvas3D.width = game.Canvas2D.width = window.innerWidth;
+        game.ViewportHeight = game.Canvas3D.height = game.Canvas2D.height = window.innerHeight;
+
+        for (let i = 0; i < game.World.Signature.length; i++) {
+            if ((game.World.Signature[i] & QUERY) === QUERY) {
+                let camera = game.World.Camera[i];
+                if (
+                    camera.Kind == CameraKind.Forward &&
+                    camera.Projection.Kind == ProjectionKind.Ortho
+                ) {
+                    let aspect = game.ViewportWidth / game.ViewportHeight;
+                    resize_ortho_keeping_unit_size(
+                        camera.Projection,
+                        aspect,
+                        game.ViewportHeight,
+                        16
+                    );
+                    break;
+                }
+            }
+        }
+    }
+}

RenderTexture/game.ts

···
 import {create_forward_target} from "../common/framebuffer.js";
-import {GameXR} from "../common/game.js";
+import {Game3D} from "../common/game.js";
 import {mat_forward_textured_unlit} from "../materials/mat_forward_textured_unlit.js";
 import {mesh_cube} from "../meshes/cube.js";
 import {mesh_plane} from "../meshes/plane.js";
···
 import {sys_transform} from "./systems/sys_transform.js";
 import {World} from "./world.js";
 
-export class Game extends GameXR {
+export class Game extends Game3D {
     World = new World();
 
     MaterialTexturedUnlit = mat_forward_textured_unlit(this.Gl);
···
     MeshPlane = mesh_plane(this.Gl);
 
     Textures: Record<string, WebGLTexture> = {};
-    Targets = {
+    override Targets = {
         Minimap: create_forward_target(this.Gl, 256, 256),
     };
 
···
     LightDetails = new Float32Array(4 * 8);
 
     override FrameUpdate(delta: number) {
+        sys_resize(this, delta);
+        sys_camera(this, delta);
+
         sys_control_always(this, delta);
+
         sys_move(this, delta);
         sys_transform(this, delta);
-        sys_resize(this, delta);
-        sys_camera(this, delta);
+
         sys_render_forward(this, delta);
     }
 }

RigidBody/game.ts

···
-import {GameXR} from "../common/game.js";
+import {Game3D} from "../common/game.js";
 import {mat_forward_colored_gouraud} from "../materials/mat_forward_colored_gouraud.js";
 import {mesh_cube} from "../meshes/cube.js";
 import {mesh_hand} from "../meshes/hand.js";
···
 import {sys_transform} from "./systems/sys_transform.js";
 import {World} from "./world.js";
 
-export class Game extends GameXR {
+export class Game extends Game3D {
     World = new World();
 
     MaterialColoredGouraud = mat_forward_colored_gouraud(this.Gl);
···
         // Destroy entities past their age.
         sys_lifespan(this, delta);
 
+        // Camera.
+        sys_resize(this, delta);
+        sys_camera(this, delta);
+
         // Input and AI.
         sys_control_always(this, delta);
 
···
         sys_transform(this, delta);
 
         // Rendering.
-        sys_resize(this, delta);
-        sys_camera(this, delta);
         sys_light(this, delta);
         sys_render_forward(this, delta);
     }

Trigger/game.ts

···
-import {GameXR} from "../common/game.js";
+import {Game3D} from "../common/game.js";
 import {mat_forward_colored_gouraud} from "../materials/mat_forward_colored_gouraud.js";
 import {mat_forward_colored_wireframe} from "../materials/mat_forward_colored_unlit.js";
 import {mesh_cube} from "../meshes/cube.js";
···
 import {sys_trigger} from "./systems/sys_trigger.js";
 import {World} from "./world.js";
 
-export class Game extends GameXR {
+export class Game extends Game3D {
     World = new World();
 
     MaterialColoredWireframe = mat_forward_colored_wireframe(this.Gl);
···
     LightDetails = new Float32Array(4 * 8);
 
     override FrameUpdate(delta: number) {
+        sys_resize(this, delta);
+        sys_camera(this, delta);
+
         sys_control_always(this, delta);
+
         sys_move(this, delta);
         sys_transform(this, delta);
-
         sys_collide(this, delta);
         sys_trigger(this, delta);
 
-        sys_resize(this, delta);
-        sys_camera(this, delta);
         sys_light(this, delta);
         sys_render_forward(this, delta);
         sys_debug(this, delta);

WebXR/game.ts

···
 import {mesh_cube} from "../meshes/cube.js";
 import {mesh_hand} from "../meshes/hand.js";
 import {sys_camera} from "./systems/sys_camera.js";
+import {sys_camera_xr} from "./systems/sys_camera_xr.js";
 import {sys_control_xr} from "./systems/sys_control_xr.js";
 import {sys_light} from "./systems/sys_light.js";
 import {sys_render_forward} from "./systems/sys_render_forward.js";
+import {sys_render_xr} from "./systems/sys_render_xr.js";
 import {sys_resize} from "./systems/sys_resize.js";
 import {sys_transform} from "./systems/sys_transform.js";
 import {sys_ui} from "./systems/sys_ui.js";
···
     LightDetails = new Float32Array(4 * 8);
 
     override FrameUpdate(delta: number) {
-        sys_control_xr(this, delta);
-        sys_transform(this, delta);
-        sys_resize(this, delta);
-        sys_camera(this, delta);
-        sys_light(this, delta);
-        sys_render_forward(this, delta);
-        sys_ui(this, delta);
+        if (this.XrFrame) {
+            sys_camera_xr(this, delta);
+
+            sys_control_xr(this, delta);
+            sys_transform(this, delta);
+
+            sys_light(this, delta);
+            sys_render_xr(this, delta);
+        } else {
+            sys_resize(this, delta);
+            sys_camera(this, delta);
+
+            sys_transform(this, delta);
+
+            sys_light(this, delta);
+            sys_render_forward(this, delta);
+            sys_ui(this, delta);
+        }
     }
 }

WebXR/systems/sys_camera.ts

···
-/**
- * @module systems/sys_camera
- */
-
-import {copy, create, get_translation, invert, multiply} from "../../common/mat4.js";
-import {ProjectionKind, resize_ortho, resize_perspective} from "../../common/projection.js";
-import {Entity} from "../../common/world.js";
-import {Camera, CameraKind, CameraXr, XrEye} from "../components/com_camera.js";
-import {Game} from "../game.js";
-import {Has} from "../world.js";
-
-const QUERY = Has.Transform | Has.Camera;
-
-export function sys_camera(game: Game, delta: number) {
-    game.Cameras = [];
-
-    for (let i = 0; i < game.World.Signature.length; i++) {
-        if ((game.World.Signature[i] & QUERY) === QUERY) {
-            let camera = game.World.Camera[i];
-            switch (camera.Kind) {
-                case CameraKind.Xr:
-                    if (game.XrFrame) {
-                        update_xr(game, i, camera);
-                        game.Cameras.push(i);
-                    }
-                    break;
-                case CameraKind.Forward:
-                    if (!game.XrFrame) {
-                        update_camera(game, i, camera);
-                        game.Cameras.push(i);
-                    }
-                    break;
-                default:
-                    update_camera(game, i, camera);
-                    game.Cameras.push(i);
-                    break;
-            }
-        }
-    }
-}
-
-function update_camera(game: Game, entity: Entity, camera: Exclude<Camera, CameraXr>) {
-    let transform = game.World.Transform[entity];
-    let projection = camera.Projection;
-
-    if (game.ViewportResized) {
-        let aspect =
-            camera.Kind === CameraKind.Forward
-                ? game.ViewportWidth / game.ViewportHeight
-                : camera.Target.Width / camera.Target.Height;
-        switch (projection.Kind) {
-            case ProjectionKind.Perspective: {
-                resize_perspective(projection, aspect);
-                break;
-            }
-            case ProjectionKind.Ortho:
-                resize_ortho(projection, aspect);
-                break;
-        }
-    }
-
-    copy(camera.View, transform.Self);
-    multiply(camera.Pv, projection.Projection, camera.View);
-    get_translation(camera.Position, transform.World);
-}
-
-function update_xr(game: Game, entity: Entity, camera: CameraXr) {
-    let transform = game.World.Transform[entity];
-    let pose = game.XrFrame!.getViewerPose(game.XrSpace);
-
-    camera.Eyes = [];
-    for (let viewpoint of pose.views) {
-        let eye: XrEye = {
-            Viewpoint: viewpoint,
-            View: create(),
-            Pv: create(),
-            Position: [0, 0, 0],
-        };
-
-        // Compute the eye's world matrix.
-        multiply(eye.View, transform.World, viewpoint.transform.matrix);
-        get_translation(eye.Position, eye.View);
-
-        // Compute the view matrix.
-        invert(eye.View, eye.View);
-        // Compute the PV matrix.
-        multiply(eye.Pv, viewpoint.projectionMatrix, eye.View);
-
-        camera.Eyes.push(eye);
-    }
-}
+../../core/systems/sys_camera.ts

WebXR/systems/sys_camera_xr.ts

···
+../../core/systems/sys_camera_xr.ts

WebXR/systems/sys_render_xr.ts

···
+../../core/systems/sys_render_xr.ts

common/framebuffer.ts

···
     GL_TEXTURE_2D,
 } from "./webgl.js";
 
+export type RenderTarget = ForwardTarget | DeferredTarget | DepthTarget;
+
 export interface ForwardTarget {
     Framebuffer: WebGLFramebuffer;
     Width: number;

common/game.ts

···
+import {RenderTarget} from "./framebuffer.js";
 import {GL_CULL_FACE, GL_DEPTH_TEST, GL_ONE_MINUS_SRC_ALPHA, GL_SRC_ALPHA} from "./webgl.js";
 import {Entity, WorldImpl} from "./world.js";
 
···
 
         let tick = (now: number) => {
             let delta = (now - last) / 1000;
-            this.FrameSetup(delta);
+            last = now;
+
+            this.Running = requestAnimationFrame(tick);
 
+            this.FrameSetup(delta);
             accumulator += delta;
             while (accumulator >= step) {
                 accumulator -= step;
···
             }
             this.FrameUpdate(delta);
             this.FrameReset(delta);
-
-            last = now;
-            this.Running = requestAnimationFrame(tick);
         };
 
         this.Stop();
···
     Canvas3D = document.querySelector("#scene")! as HTMLCanvasElement;
     Gl = this.Canvas3D.getContext("webgl2")!;
 
+    Audio = new AudioContext();
     Cameras: Array<Entity> = [];
-    Audio = new AudioContext();
+    Targets: Record<string, RenderTarget> = {};
 
     constructor() {
         super();
···
         this.Gl.enable(GL_CULL_FACE);
 
         this.Gl.blendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
+    }
+
+    override FrameSetup(delta: number) {
+        super.FrameSetup(delta);
+        this.Cameras = [];
     }
 }
 
···
 
         let tick = (now: number, frame?: XRFrame) => {
             let delta = (now - last) / 1000;
-            this.FrameSetup(delta);
+            last = now;
+
+            if (frame) {
+                this.XrFrame = frame;
+                this.Running = this.XrFrame.session.requestAnimationFrame(tick);
+            } else {
+                this.XrFrame = undefined;
+                this.Running = requestAnimationFrame(tick);
+            }
 
+            this.FrameSetup(delta);
             accumulator += delta;
             while (accumulator >= step) {
                 accumulator -= step;
···
             }
             this.FrameUpdate(delta);
             this.FrameReset(delta);
-
-            last = now;
-            if (frame) {
-                this.XrFrame = frame;
-                this.Running = this.XrFrame.session.requestAnimationFrame(tick);
-            } else {
-                this.XrFrame = undefined;
-                this.Running = requestAnimationFrame(tick);
-            }
         };
 
         if (this.XrSession) {

core/systems/sys_camera.ts

···
  */
 
 import {copy, get_translation, multiply} from "../../common/mat4.js";
-import {ProjectionKind, resize_ortho, resize_perspective} from "../../common/projection.js";
 import {Entity} from "../../common/world.js";
 import {Camera, CameraKind, CameraXr} from "../components/com_camera.js";
 import {Game} from "../game.js";
···
 const QUERY = Has.Transform | Has.Camera;
 
 export function sys_camera(game: Game, delta: number) {
-    game.Cameras = [];
-
     for (let i = 0; i < game.World.Signature.length; i++) {
         if ((game.World.Signature[i] & QUERY) === QUERY) {
-            game.Cameras.push(i);
             let camera = game.World.Camera[i];
             switch (camera.Kind) {
-                case CameraKind.Xr:
-                    throw new Error(
-                        "XR camera is not part of core/. See WebXR/systems/sys_camera."
-                    );
-                default:
+                case CameraKind.Forward:
+                case CameraKind.Deferred:
+                case CameraKind.Framebuffer:
+                case CameraKind.Depth:
                     update_camera(game, i, camera);
+                    game.Cameras.push(i);
                     break;
             }
         }
···
 function update_camera(game: Game, entity: Entity, camera: Exclude<Camera, CameraXr>) {
     let transform = game.World.Transform[entity];
     let projection = camera.Projection;
-
-    if (game.ViewportResized) {
-        let aspect =
-            camera.Kind === CameraKind.Forward
-                ? game.ViewportWidth / game.ViewportHeight
-                : camera.Target.Width / camera.Target.Height;
-        switch (projection.Kind) {
-            case ProjectionKind.Perspective: {
-                resize_perspective(projection, aspect);
-                break;
-            }
-            case ProjectionKind.Ortho:
-                resize_ortho(projection, aspect);
-                break;
-        }
-    }
 
     copy(camera.View, transform.Self);
     multiply(camera.Pv, projection.Projection, camera.View);

core/systems/sys_camera_xr.ts

···
+/**
+ * @module systems/sys_camera_xr
+ */
+
+import {create, get_translation, invert, multiply} from "../../common/mat4.js";
+import {Entity} from "../../common/world.js";
+import {CameraKind, CameraXr, XrEye} from "../components/com_camera.js";
+import {Game} from "../game.js";
+import {Has} from "../world.js";
+
+const QUERY = Has.Transform | Has.Camera;
+
+export function sys_camera_xr(game: Game, delta: number) {
+    for (let i = 0; i < game.World.Signature.length; i++) {
+        if ((game.World.Signature[i] & QUERY) === QUERY) {
+            let camera = game.World.Camera[i];
+            switch (camera.Kind) {
+                case CameraKind.Xr:
+                    update_xr(game, i, camera);
+                    game.Cameras.push(i);
+                    break;
+            }
+        }
+    }
+}
+
+function update_xr(game: Game, entity: Entity, camera: CameraXr) {
+    let transform = game.World.Transform[entity];
+    let pose = game.XrFrame!.getViewerPose(game.XrSpace);
+
+    camera.Eyes = [];
+    for (let viewpoint of pose.views) {
+        let eye: XrEye = {
+            Viewpoint: viewpoint,
+            View: create(),
+            Pv: create(),
+            Position: [0, 0, 0],
+        };
+
+        // Compute the eye's world matrix.
+        multiply(eye.View, transform.World, viewpoint.transform.matrix);
+        get_translation(eye.Position, eye.View);
+
+        // Compute the view matrix.
+        invert(eye.View, eye.View);
+        // Compute the PV matrix.
+        multiply(eye.Pv, viewpoint.projectionMatrix, eye.View);
+
+        camera.Eyes.push(eye);
+    }
+}

core/systems/sys_render_forward.ts

···
                 game.Gl.clear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
                 render_all(game, camera, camera.Target.RenderTexture);
                 break;
-            case CameraKind.Xr:
-                let layer = game.XrFrame!.session.renderState.baseLayer!;
-                game.Gl.bindFramebuffer(GL_FRAMEBUFFER, layer.framebuffer);
-                game.Gl.clearColor(...camera.ClearColor);
-                game.Gl.clear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
-
-                for (let eye of camera.Eyes) {
-                    let viewport = layer.getViewport(eye.Viewpoint);
-                    game.Gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
-                    render_all(game, eye);
-                }
-                break;
         }
     }
 }

core/systems/sys_render_xr.ts

···
+/**
+ * @module systems/sys_render_forward
+ */
+
+import {distance_squared_from_point} from "../../common/mat4.js";
+import {Material} from "../../common/material.js";
+import {
+    GL_ARRAY_BUFFER,
+    GL_BLEND,
+    GL_COLOR_BUFFER_BIT,
+    GL_DEPTH_BUFFER_BIT,
+    GL_FLOAT,
+    GL_FRAMEBUFFER,
+    GL_TEXTURE0,
+    GL_TEXTURE1,
+    GL_TEXTURE2,
+    GL_TEXTURE3,
+    GL_TEXTURE_2D,
+    GL_UNSIGNED_SHORT,
+} from "../../common/webgl.js";
+import {Entity} from "../../common/world.js";
+import {CameraEye, CameraKind} from "../components/com_camera.js";
+import {Render, RenderKind, RenderPhase} from "../components/com_render.js";
+import {Game} from "../game.js";
+import {Has} from "../world.js";
+
+const QUERY = Has.Transform | Has.Render;
+
+export function sys_render_xr(game: Game, delta: number) {
+    for (let camera_entity of game.Cameras) {
+        let camera = game.World.Camera[camera_entity];
+        switch (camera.Kind) {
+            case CameraKind.Xr:
+                let layer = game.XrFrame!.session.renderState.baseLayer!;
+                game.Gl.bindFramebuffer(GL_FRAMEBUFFER, layer.framebuffer);
+                game.Gl.clearColor(...camera.ClearColor);
+                game.Gl.clear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+
+                for (let eye of camera.Eyes) {
+                    let viewport = layer.getViewport(eye.Viewpoint);
+                    game.Gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
+                    render_all(game, eye);
+                }
+                break;
+        }
+    }
+}
+
+function render_all(game: Game, eye: CameraEye, current_target?: WebGLTexture) {
+    // Keep track of the current state to minimize switching.
+    let current_material: Material<unknown> | null = null;
+    let current_front_face: GLenum | null = null;
+
+    // Transparent objects to be sorted by distance to camera and rendered later.
+    let transparent_entities: Array<Entity> = [];
+
+    // First render opaque objects.
+    for (let ent = 0; ent < game.World.Signature.length; ent++) {
+        if ((game.World.Signature[ent] & QUERY) === QUERY) {
+            let render = game.World.Render[ent];
+
+            if (render.Phase === RenderPhase.Transparent) {
+                // Store transparent objects in a separate array to render them later.
+                transparent_entities.push(ent);
+                continue;
+            }
+
+            if (render.Material !== current_material) {
+                current_material = render.Material;
+                use_material(game, render, eye);
+            }
+
+            if (render.FrontFace !== current_front_face) {
+                current_front_face = render.FrontFace;
+                game.Gl.frontFace(render.FrontFace);
+            }
+
+            draw_entity(game, ent, current_target);
+        }
+    }
+
+    // Sort transparent objects by distance to camera, from back to front, to
+    // enforce overdraw and blend them in the correct order.
+    transparent_entities.sort((a, b) => {
+        let transform_a = game.World.Transform[a];
+        let transform_b = game.World.Transform[b];
+        return (
+            distance_squared_from_point(transform_b.World, eye.Position) -
+            distance_squared_from_point(transform_a.World, eye.Position)
+        );
+    });
+
+    game.Gl.enable(GL_BLEND);
+
+    for (let i = 0; i < transparent_entities.length; i++) {
+        let ent = transparent_entities[i];
+        let render = game.World.Render[ent];
+
+        if (render.Material !== current_material) {
+            current_material = render.Material;
+            use_material(game, render, eye);
+        }
+
+        if (render.FrontFace !== current_front_face) {
+            current_front_face = render.FrontFace;
+            game.Gl.frontFace(render.FrontFace);
+        }
+
+        draw_entity(game, ent, current_target);
+    }
+
+    game.Gl.disable(GL_BLEND);
+}
+
+function use_material(game: Game, render: Render, eye: CameraEye) {
+    switch (render.Kind) {
+        case RenderKind.ColoredUnlit:
+            game.Gl.useProgram(render.Material.Program);
+            game.Gl.uniformMatrix4fv(render.Material.Locations.Pv, false, eye.Pv);
+            break;
+        case RenderKind.ColoredShaded:
+            game.Gl.useProgram(render.Material.Program);
+            game.Gl.uniformMatrix4fv(render.Material.Locations.Pv, false, eye.Pv);
+            game.Gl.uniform3fv(render.Material.Locations.Eye, eye.Position);
+            game.Gl.uniform4fv(render.Material.Locations.LightPositions, game.LightPositions);
+            game.Gl.uniform4fv(render.Material.Locations.LightDetails, game.LightDetails);
+            break;
+        case RenderKind.TexturedUnlit:
+            game.Gl.useProgram(render.Material.Program);
+            game.Gl.uniformMatrix4fv(render.Material.Locations.Pv, false, eye.Pv);
+            break;
+        case RenderKind.TexturedShaded:
+            game.Gl.useProgram(render.Material.Program);
+            game.Gl.uniformMatrix4fv(render.Material.Locations.Pv, false, eye.Pv);
+            game.Gl.uniform3fv(render.Material.Locations.Eye, eye.Position);
+            game.Gl.uniform4fv(render.Material.Locations.LightPositions, game.LightPositions);
+            game.Gl.uniform4fv(render.Material.Locations.LightDetails, game.LightDetails);
+            break;
+        case RenderKind.Vertices:
+            game.Gl.useProgram(render.Material.Program);
+            game.Gl.uniformMatrix4fv(render.Material.Locations.Pv, false, eye.Pv);
+            break;
+        case RenderKind.MappedShaded:
+            game.Gl.useProgram(render.Material.Program);
+            game.Gl.uniformMatrix4fv(render.Material.Locations.Pv, false, eye.Pv);
+            game.Gl.uniform3fv(render.Material.Locations.Eye, eye.Position);
+            game.Gl.uniform4fv(render.Material.Locations.LightPositions, game.LightPositions);
+            game.Gl.uniform4fv(render.Material.Locations.LightDetails, game.LightDetails);
+            break;
+    }
+}
+
+function draw_entity(game: Game, entity: Entity, current_target?: WebGLTexture) {
+    let transform = game.World.Transform[entity];
+    let render = game.World.Render[entity];
+
+    switch (render.Kind) {
+        case RenderKind.ColoredUnlit:
+            game.Gl.uniformMatrix4fv(render.Material.Locations.World, false, transform.World);
+            game.Gl.uniform4fv(render.Material.Locations.Color, render.Color);
+            game.Gl.bindVertexArray(render.Vao);
+            game.Gl.drawElements(
+                render.Material.Mode,
+                render.Mesh.IndexCount,
+                GL_UNSIGNED_SHORT,
+                0
+            );
+            game.Gl.bindVertexArray(null);
+
+            break;
+        case RenderKind.ColoredShaded:
+            game.Gl.uniformMatrix4fv(render.Material.Locations.World, false, transform.World);
+            game.Gl.uniformMatrix4fv(render.Material.Locations.Self, false, transform.Self);
+            game.Gl.uniform4fv(render.Material.Locations.DiffuseColor, render.DiffuseColor);
+            game.Gl.uniform4fv(render.Material.Locations.SpecularColor, render.SpecularColor);
+            game.Gl.uniform1f(render.Material.Locations.Shininess, render.Shininess);
+            game.Gl.bindVertexArray(render.Vao);
+            game.Gl.drawElements(
+                render.Material.Mode,
+                render.Mesh.IndexCount,
+                GL_UNSIGNED_SHORT,
+                0
+            );
+            game.Gl.bindVertexArray(null);
+            break;
+        case RenderKind.TexturedUnlit:
+            if (render.Texture === current_target) {
+                // Prevent feedback loop between the active render target
+                // and the texture being rendered.
+                break;
+            }
+
+            game.Gl.uniformMatrix4fv(render.Material.Locations.World, false, transform.World);
+            game.Gl.uniform4fv(render.Material.Locations.Color, render.Color);
+
+            game.Gl.activeTexture(GL_TEXTURE0);
+            game.Gl.bindTexture(GL_TEXTURE_2D, render.Texture);
+            game.Gl.uniform1i(render.Material.Locations.TextureMap, 0);
+
+            game.Gl.bindVertexArray(render.Vao);
+            game.Gl.drawElements(
+                render.Material.Mode,
+                render.Mesh.IndexCount,
+                GL_UNSIGNED_SHORT,
+                0
+            );
+            game.Gl.bindVertexArray(null);
+            break;
+        case RenderKind.TexturedShaded:
+            if (render.Texture === current_target) {
+                // Prevent feedback loop between the active render target
+                // and the texture being rendered.
+                break;
+            }
+
+            game.Gl.uniformMatrix4fv(render.Material.Locations.World, false, transform.World);
+            game.Gl.uniformMatrix4fv(render.Material.Locations.Self, false, transform.Self);
+            game.Gl.uniform4fv(render.Material.Locations.DiffuseColor, render.DiffuseColor);
+            game.Gl.uniform4fv(render.Material.Locations.SpecularColor, render.SpecularColor);
+            game.Gl.uniform1f(render.Material.Locations.Shininess, render.Shininess);
+
+            game.Gl.activeTexture(GL_TEXTURE0);
+            game.Gl.bindTexture(GL_TEXTURE_2D, render.Texture);
+            game.Gl.uniform1i(render.Material.Locations.DiffuseMap, 0);
+
+            game.Gl.bindVertexArray(render.Vao);
+            game.Gl.drawElements(
+                render.Material.Mode,
+                render.Mesh.IndexCount,
+                GL_UNSIGNED_SHORT,
+                0
+            );
+            game.Gl.bindVertexArray(null);
+            break;
+        case RenderKind.Vertices:
+            game.Gl.uniformMatrix4fv(render.Material.Locations.World, false, transform.World);
+            game.Gl.uniform4fv(render.Material.Locations.Color, render.Color);
+            game.Gl.bindBuffer(GL_ARRAY_BUFFER, render.VertexBuffer);
+            game.Gl.enableVertexAttribArray(render.Material.Locations.VertexPosition);
+            game.Gl.vertexAttribPointer(
+                render.Material.Locations.VertexPosition,
+                3,
+                GL_FLOAT,
+                false,
+                0,
+                0
+            );
+            game.Gl.drawArrays(render.Material.Mode, 0, render.IndexCount);
+            break;
+        case RenderKind.MappedShaded:
+            game.Gl.uniformMatrix4fv(render.Material.Locations.World, false, transform.World);
+            game.Gl.uniformMatrix4fv(render.Material.Locations.Self, false, transform.Self);
+
+            game.Gl.uniform4fv(render.Material.Locations.DiffuseColor, render.DiffuseColor);
+
+            game.Gl.activeTexture(GL_TEXTURE1);
+            game.Gl.bindTexture(GL_TEXTURE_2D, render.DiffuseMap);
+            game.Gl.uniform1i(render.Material.Locations.DiffuseMap, 1);
+
+            game.Gl.activeTexture(GL_TEXTURE2);
+            game.Gl.bindTexture(GL_TEXTURE_2D, render.NormalMap);
+            game.Gl.uniform1i(render.Material.Locations.NormalMap, 2);
+
+            game.Gl.activeTexture(GL_TEXTURE3);
+            game.Gl.bindTexture(GL_TEXTURE_2D, render.RoughnessMap);
+            game.Gl.uniform1i(render.Material.Locations.RoughnessMap, 3);
+
+            game.Gl.bindVertexArray(render.Vao);
+            game.Gl.drawElements(
+                render.Material.Mode,
+                render.Mesh.IndexCount,
+                GL_UNSIGNED_SHORT,
+                0
+            );
+            game.Gl.bindVertexArray(null);
+            break;
+    }
+}

core/systems/sys_resize.ts

···
  * @module systems/sys_resize
  */
 
+import {resize_deferred_target} from "../../common/framebuffer.js";
+import {
+    Projection,
+    ProjectionKind,
+    resize_ortho,
+    resize_perspective,
+} from "../../common/projection.js";
+import {CameraKind} from "../components/com_camera.js";
 import {Game} from "../game.js";
+import {Has} from "../world.js";
+
+const QUERY = Has.Camera;
 
 export function sys_resize(game: Game, delta: number) {
     if (game.ViewportWidth != window.innerWidth || game.ViewportHeight != window.innerHeight) {
···
     if (game.ViewportResized) {
         game.ViewportWidth = game.Canvas3D.width = game.Canvas2D.width = window.innerWidth;
         game.ViewportHeight = game.Canvas3D.height = game.Canvas2D.height = window.innerHeight;
+
+        for (let i = 0; i < game.World.Signature.length; i++) {
+            if ((game.World.Signature[i] & QUERY) === QUERY) {
+                let camera = game.World.Camera[i];
+                switch (camera.Kind) {
+                    case CameraKind.Forward:
+                        update_projection(
+                            camera.Projection,
+                            game.ViewportWidth / game.ViewportHeight
+                        );
+                        break;
+                    case CameraKind.Framebuffer:
+                    case CameraKind.Depth:
+                        update_projection(
+                            camera.Projection,
+                            camera.Target.Width / camera.Target.Height
+                        );
+                        break;
+                    case CameraKind.Deferred:
+                        resize_deferred_target(
+                            game.Gl,
+                            camera.Target,
+                            game.ViewportWidth,
+                            game.ViewportHeight
+                        );
+                        update_projection(
+                            camera.Projection,
+                            camera.Target.Width / camera.Target.Height
+                        );
+                        break;
+                    case CameraKind.Xr:
+                        // The eye projections are managed by the WebXR API.
+                        break;
+                }
+            }
+        }
+    }
+}
+
+function update_projection(projection: Projection, aspect: number) {
+    switch (projection.Kind) {
+        case ProjectionKind.Perspective: {
+            resize_perspective(projection, aspect);
+            break;
+        }
+        case ProjectionKind.Ortho:
+            resize_ortho(projection, aspect);
+            break;
     }
 }