3D Stereoscopic Mobile Fusion, Parallel Projection & Kinematics
1. Overview
Operating a true stereoscopic 3D application on a mobile smartphone requires a precise match between human binocular visual anatomy and the physical rendering pipeline. The human visual system creates depth perception (stereopsis) by processing retinal disparity $\delta = \theta_R - \theta_L$, the angular difference in horizontal position between objects seen by the left and right eyes. When viewing a split screen without specialized lenses, standard convergence causes the eyes to focus on two distinct planes, leading to double-vision unless optical alignment techniques or parallel-axis projections are introduced.
A frequent engineering pitfall in mobile WebGL stereoscopy is using toe-in camera rotation (pointing both cameras toward a single center target point). Toe-in cameras introduce vertical trapezoidal distortion (keystoning) across the periphery of the display, causing visual disorientation and preventing stereoscopic fusion. This simulator implements **off-axis parallel stereoscopic projection**, aligning the Zero-Parallax Plane directly with the player's spacecraft. As a result, the vessel appears stationary in depth relative to the screen glass, while celestial rings and space grids naturally project with comfortable negative and positive parallax.
2. How to Use & Fusion Workflows
Depending on your viewing equipment, configure the 3D optics as follows:
- With Mobile VR Goggles (Google Cardboard / VR Clip): Select
Side-by-Side (VR Goggles / Parallel). Insert your phone into the headset. Adjust the Eye Parallax Sep ($IPD$) slider to match the physical distance between your pupils (typically $55\text{ mm}$ to $68\text{ mm}$).
- Bare-Eye Free-Viewing (No Goggles): Select
Side-by-Side (Bare-Eye Cross-View 3D). Hold the phone approximately $30\text{ cm}$ away at eye level. Cross your eyes gently until the two amber calibration dots ($•\quad•$) at the top of the canvas overlap into three dots. Focus your attention on the middle merged dot, and the spaceship will snap into 3D.
- In-Game Convergence Tuning ($X_{\text{offset}}$): Tap the ◀ 3D - or + 3D ▶ buttons on the top HUD in fullscreen to shift the horizontal plane separation in increments of $\pm 5\text{ px}$. This allows you to match your screen diagonal and pupil baseline on the fly.
- Sensory Navigation: Authorize your phone gyroscope using the green button. Tilt your device forward/backward to pitch and rotate left/right to bank. Tap 🎯 Recenter at any point to lock your physical posture as neutral center.
3. Technical Details & Mathematical Foundations
True stereoscopic projection without vertical keystone distortion requires parallel optical axes. For interocular baseline $IPD$ and forward direction vector $\vec{F}$:
$$P_L = P_c - \frac{IPD}{2}\vec{R}, \quad P_R = P_c + \frac{IPD}{2}\vec{R}$$
Both optical channels share the exact same orientation quaternion $q_{\text{ship}}$:
$$\mathbf{R}_L = \mathbf{R}_R = \mathbf{R}_{\text{ship}}$$
To achieve binocular convergence at a focal distance $d_{\text{focus}}$ without rotating the cameras, an asymmetric horizontal projection shear or viewport offset $\Delta x$ is applied:
$$\Delta x = \frac{IPD \cdot f_{\text{lens}}}{2 \cdot d_{\text{focus}}}$$
In mobile WebGL pipelines with Device Pixel Ratio $DPR > 1$, viewport dimensions must be computed strictly in logical CSS space via renderer.getSize() before assigning WebGL scissor bounds. This prevents Three.js from applying secondary $DPR$ multiplications that offset the right-eye camera off-screen on high-density Retina displays.
4. Future Directions
Future releases will integrate WebXR stereo depth buffers for hardware-accelerated IPD calibration, real-time anaglyph red-cyan post-processing shaders, and dynamic gaze-tracked convergence adjustment based on the player's distance to upcoming orbital obstacles.
Thematic Cross-Links