Canvas, Web Components, Polymer, HaXe?

Oh, My! The Future of ForeverScape Tech

Posted by Vance Feld on February 15, 2015
Beta for the Canvas version of foreverscape.com, using Canvas. Might try WebGL, too. Afterall, there's already a DirectX version running in vvvv.

After fussing with the beta explorer at staging.foreverscape.com, I’ve decided to quit the DOM altogether in favor of Canvas rendering. Absolute pixels are my old pal and friend anyway. We all know that the DOM is slow, but turns out it is horrendously slow for anything but opacity and transform. My hope for ForeverScape Core is that the main application can remain the same. Personally, I’m framework agnostic. I use angular because it’s familiar, but I’d switch to react if I had time to. This is a hobby project, I have no paid engineers, so I’m likely to not care what flavor-of-the-day the UI is written in.

The transition to Canvas could probably be done a weekend… watch the Github ForeverScape Core Repository for updates!

The biggest selling point is that the js runtime pauses during scrolling to increase performance by not letting js touch the DOM. The article, 60 FPS on the Mobile Web details the performance gains wraught by render-cycle drawing on Canvas. The foreverscape mobile explorer is all render-loop driven. I was hesitant at first, but now GPU acceleration for Canvas has become ubiquitous in mobile browsers.

The transition should be relatively smooth-- basically replace the geometry (which is fixed already because we assume a fixed pixel width of unloaded and loaded images at different resolutions). All entities are absolute relative to their container, which should translate well into an arbitrary scale ratio necessary for zooming and loading multiple resolutions for different LOD.

Web Components & Polymer

I see the potential for writing a concise Canvas widget that does three things very well. 1) Dynamically load tiles at correct resolutions. 2) Allow any direction fast scrolling and 3) drop waypoints and navigate to them. Perhaps features like commenting and “scavenger hunt” games could be built outside of the component, such that the component could serve a multiplicity of roles simply by binding to the node’s attributes. That would slick… totally doable, I just need some more engineering time!