View360: WebGL Panorama Viewer with Motion Control
Case Study #1: Sensor Fusion & Telemetry
Implementing 360° camera control in mobile browsers using DeviceMotion and DeviceOrientation APIs.
Problem
The high-level orientation API bundled magnetometer data, causing the viewport to drift when nearby electronics moved. On certain devices, gyroscope drift accumulated silently — the image kept rotating even with the phone held still.
Magnetometer noise: nearby electronics cause random drift
Gyro drift: image keeps rotating on a stationary device
Solution
Built a custom sensor fusion pipeline: split raw accelerometer and gyroscope streams, applied a complementary filter, and used the high-level API solely for stillness detection to correct drift offset. Added a telemetry dashboard to monitor orientation, drift, and corrections in real time.
Complementary filter fusing gyro (short-term) and accelerometer (long-term)
Telemetry dashboard: real-time orientation, drift, and correction monitoring
Result
Stabilized motion control across Galaxy S6–S8, covering the majority of mobile users. Adopted by four NAVER services.
Adopted by NAVER Blog, TV, V Live, and Real Estate
Case Study #2: Enterprise-grade WebGL Rendering Compatibility
Problem
Rendering 360° images via WebGL produced inconsistent results across mobile browsers, each with different levels of WebGL support. New devices hitting the market could introduce regressions with no fast way to catch them.
Solution
Automated visual regression testing by diffing canvas-rendered images across browser/device stacks. Implemented CSS cubemap rendering as a fallback for browsers with broken or missing WebGL support.
Result — Enterprise Adoption
Adopted for enterprise showroom pages by Amazon and Hyundai. Achieved cross-browser coverage surpassing commercial libraries — IE11, iOS 9+, Android 5.0+, Galaxy S5+.
Open Source & Advocacy
Demo & Documentation
Interactive demo with equirectangular, cubemap, and partial panorama examples
Interactive demo site with live examples for equirectangular, cubemap, and partial panorama projections. Full API reference auto-generated from JSDoc. Live demo →
Conference Talk
Presenting "360° Viewer from Scratch" at DEVIEW 2017, Oct 16
DEVIEW 2017 — NAVER's flagship developer conference, 200+ attendees. Covered the full stack: WebGL rendering pipeline, sensor fusion, and gyroscope calibration. Press coverage →
Slide deck: "360° Viewer from Scratch" (English translation)