diff --git a/src/runner-web/RunnerCanvas.js b/src/runner-web/RunnerCanvas.js
index 630693de..de0bee33 100644
--- a/src/runner-web/RunnerCanvas.js
+++ b/src/runner-web/RunnerCanvas.js
@@ -7,30 +7,31 @@ export function RunnerCanvas({ runtimeScene, projectAssets, loadedModelAssets, l
     const hostRef = useRef(null);
     const [runnerMessage, setRunnerMessage] = useState(null);
     const [interactionPrompt, setInteractionPrompt] = useState(null);
+    const [firstPersonTelemetry, setFirstPersonTelemetry] = useState(null);
     useEffect(() => {
         const container = containerRef.current;
         if (container === null) {
             return;
         }
-        const testCanvas = document.createElement("canvas");
-        const hasWebGl = testCanvas.getContext("webgl2") !== null ||
-            testCanvas.getContext("webgl") !== null ||
-            testCanvas.getContext("experimental-webgl") !== null;
         try {
             const runtimeHost = new RuntimeHost({
-                enableRendering: hasWebGl
+                enableRendering: true
             });
             hostRef.current = runtimeHost;
             runtimeHost.mount(container);
             runtimeHost.setRuntimeMessageHandler(onRuntimeMessageChange);
-            runtimeHost.setFirstPersonTelemetryHandler(onFirstPersonTelemetryChange);
+            runtimeHost.setFirstPersonTelemetryHandler((telemetry) => {
+                setFirstPersonTelemetry(telemetry);
+                onFirstPersonTelemetryChange(telemetry);
+            });
             runtimeHost.setInteractionPromptHandler((prompt) => {
                 setInteractionPrompt(prompt);
                 onInteractionPromptChange(prompt);
             });
-            setRunnerMessage(hasWebGl ? null : "WebGL is unavailable in this browser environment. The runner shell is visible, but runtime rendering is disabled.");
+            setRunnerMessage(null);
             return () => {
                 onInteractionPromptChange(null);
+                setFirstPersonTelemetry(null);
                 runtimeHost.dispose();
                 hostRef.current = null;
             };
@@ -51,5 +52,5 @@ export function RunnerCanvas({ runtimeScene, projectAssets, loadedModelAssets, l
     useEffect(() => {
         hostRef.current?.setNavigationMode(navigationMode);
     }, [navigationMode]);
-    return (_jsxs("div", { ref: containerRef, className: "runner-canvas", "data-testid": "runner-shell", "aria-label": "Built-in scene runner", style: createWorldBackgroundStyle(runtimeScene.world.background, runtimeScene.world.background.mode === "image" ? loadedImageAssets[runtimeScene.world.background.assetId]?.sourceUrl ?? null : null), children: [navigationMode === "firstPerson" ? _jsx("div", { className: "runner-canvas__crosshair", "aria-hidden": "true" }) : null, navigationMode === "firstPerson" && interactionPrompt !== null ? (_jsxs("div", { className: "runner-canvas__prompt", "data-testid": "runner-interaction-prompt", role: "status", "aria-live": "polite", children: [_jsx("div", { className: "runner-canvas__prompt-badge", children: "Click" }), _jsx("div", { className: "runner-canvas__prompt-text", "data-testid": "runner-interaction-prompt-text", children: interactionPrompt.prompt }), _jsxs("div", { className: "runner-canvas__prompt-meta", "data-testid": "runner-interaction-prompt-meta", children: [interactionPrompt.distance.toFixed(1), "m away \u00B7 ", interactionPrompt.range.toFixed(1), "m range"] })] })) : null, runnerMessage === null ? null : (_jsxs("div", { className: "runner-canvas__fallback", role: "status", children: [_jsx("div", { className: "runner-canvas__fallback-title", children: "Runner Unavailable" }), _jsx("div", { children: runnerMessage })] }))] }));
+    return (_jsxs("div", { ref: containerRef, className: `runner-canvas ${navigationMode === "firstPerson" && firstPersonTelemetry?.inWaterVolume ? "runner-canvas--underwater" : ""}`, "data-testid": "runner-shell", "aria-label": "Built-in scene runner", style: createWorldBackgroundStyle(runtimeScene.world.background, runtimeScene.world.background.mode === "image" ? loadedImageAssets[runtimeScene.world.background.assetId]?.sourceUrl ?? null : null), children: [navigationMode === "firstPerson" && firstPersonTelemetry?.inWaterVolume ? _jsx("div", { className: "runner-canvas__underwater", "aria-hidden": "true" }) : null, navigationMode === "firstPerson" ? _jsx("div", { className: "runner-canvas__crosshair", "aria-hidden": "true" }) : null, navigationMode === "firstPerson" && interactionPrompt !== null ? (_jsxs("div", { className: "runner-canvas__prompt", "data-testid": "runner-interaction-prompt", role: "status", "aria-live": "polite", children: [_jsx("div", { className: "runner-canvas__prompt-badge", children: "Click" }), _jsx("div", { className: "runner-canvas__prompt-text", "data-testid": "runner-interaction-prompt-text", children: interactionPrompt.prompt }), _jsxs("div", { className: "runner-canvas__prompt-meta", "data-testid": "runner-interaction-prompt-meta", children: [interactionPrompt.distance.toFixed(1), "m away \u00B7 ", interactionPrompt.range.toFixed(1), "m range"] })] })) : null, runnerMessage === null ? null : (_jsxs("div", { className: "runner-canvas__fallback", role: "status", children: [_jsx("div", { className: "runner-canvas__fallback-title", children: "Runner Unavailable" }), _jsx("div", { children: runnerMessage })] }))] }));
 }