Fix iOS motion permission, simplify AR to gyroscope anchoring, fix st… - #72
Merged
Merged
Conversation
…retched images
Motion sensors were reported unavailable on every iPhone, in both Safari and
Chrome. DeviceOrientationEvent.requestPermission() is only allowed to prompt
while the browser still considers itself inside the user's tap, and it was
being called after getUserMedia() resolved — by which point the user-activation
context was gone, so iOS rejected it every time. It now runs synchronously as
the first statement of the start handler, before the camera request.
Simplified the demo to one code path, as requested. WebXR, hit-test plane
detection and depth-sensing occlusion are removed: they need ARCore-class
hardware, never ran on iOS at all, and added the majority of the failure modes.
What remains is camera feed plus gyroscope, with objects anchored in the air —
place a crystal, turn away, turn back, find it again. Rotation readings are
slerped toward rather than applied raw, which is what stops a gyro-only scene
from feeling jittery. Objects render with a camera-facing glow sprite so they
read clearly against a live camera picture.
Fallbacks are unchanged in spirit: no motion sensor degrades to drag-to-look
with the camera still running, and no camera degrades to an animated 3D scene.
The denied-permission path now tells iPhone users where the master switch is
(Settings -> Apps -> Safari -> Motion & Orientation Access).
Verified against a shim that enforces the iOS gesture rule: permission is
requested under user activation in all four scenarios (granted, denied, granted
but silent hardware, no camera). Anchoring verified by pixel measurement — 12
degrees of yaw moves the object 83px then 84px, and returning to the original
heading puts it back within 0px horizontally, matching the 48.5 degree
horizontal field of view.
Also fixes two images that rendered stretched on mobile. The square event
poster was drawn 350x1045 and the video poster 348x540, because the global
`img { max-width: 100% }` rule leaves the HTML height attribute in force once
width is constrained. Adds the .yt-facade styles that were never copied over
from news.html, which also restores the missing play button on the
hide-and-seek video. Page copy, meta descriptions and llms.txt updated so they
no longer claim plane detection or occlusion the demo does not do.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G65FiJqW3AbKjyjgP9h4ku
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…retched images
Motion sensors were reported unavailable on every iPhone, in both Safari and Chrome. DeviceOrientationEvent.requestPermission() is only allowed to prompt while the browser still considers itself inside the user's tap, and it was being called after getUserMedia() resolved — by which point the user-activation context was gone, so iOS rejected it every time. It now runs synchronously as the first statement of the start handler, before the camera request.
Simplified the demo to one code path, as requested. WebXR, hit-test plane detection and depth-sensing occlusion are removed: they need ARCore-class hardware, never ran on iOS at all, and added the majority of the failure modes. What remains is camera feed plus gyroscope, with objects anchored in the air — place a crystal, turn away, turn back, find it again. Rotation readings are slerped toward rather than applied raw, which is what stops a gyro-only scene from feeling jittery. Objects render with a camera-facing glow sprite so they read clearly against a live camera picture.
Fallbacks are unchanged in spirit: no motion sensor degrades to drag-to-look with the camera still running, and no camera degrades to an animated 3D scene. The denied-permission path now tells iPhone users where the master switch is (Settings -> Apps -> Safari -> Motion & Orientation Access).
Verified against a shim that enforces the iOS gesture rule: permission is requested under user activation in all four scenarios (granted, denied, granted but silent hardware, no camera). Anchoring verified by pixel measurement — 12 degrees of yaw moves the object 83px then 84px, and returning to the original heading puts it back within 0px horizontally, matching the 48.5 degree horizontal field of view.
Also fixes two images that rendered stretched on mobile. The square event poster was drawn 350x1045 and the video poster 348x540, because the global
img { max-width: 100% }rule leaves the HTML height attribute in force once width is constrained. Adds the .yt-facade styles that were never copied over from news.html, which also restores the missing play button on the hide-and-seek video. Page copy, meta descriptions and llms.txt updated so they no longer claim plane detection or occlusion the demo does not do.Claude-Session: https://claude.ai/code/session_01G65FiJqW3AbKjyjgP9h4ku