I spent most of my weekend hammering out a major issue with XB PointStream which the folks at Arius3D pointed out.
The problem was WebGL would not render point clouds on Chrome/Chromium or Webkit when I tried to stream a PSI file over a network. However, after the page loaded and I hit refresh, everything worked.
Additionally, there were no issues on Firefox and when I streamed PSI files locally, all browsers rendered the point cloud without a problem.
I started debugging by checking drawArrays() and getError(), both of which had no issues. I kept trying to look for reasons why the point cloud would not render, but I couldn’t find any evidence of rendering problems.
The Color and the Shape
I made my first breakthrough when I changed the background color. That’s when I saw a single point in the middle of the browser window. I called pointSize() to better see the what it was. It turned out all the points appeared to be clustered together at (0,0,0) with a single black point occluding all the others. This is why it appeared no rendering was taking place. All the points were small, covered by a black point which blended in with the background color.
XHR Browser Differences
This helped me better understand the real issue. I continued debugging, trying to figure out why the vertices were all at the origin. After hours of digging through the PSI parser, I found the crux of the bug. I was reminded there are differences between how Firefox and how Chrome/Chromium/Webkit XHR files. Firefox makes fewer requests but reads larger portions of data. The other browsers make more requests, but read smaller portions of data.
I learned the PSI parser assumed it would read tags such as <Min> and <Max> (which contain important bounding box data) in the first XHR request. These tags do appear near the beginning of PSI files, but assuming we’ll have read that far in the first request just won’t work. In that first request, firstLoad() is called which sets up necessary variables used when parsing the vertices. If <Min> and <Max> aren’t encountered at that time, certain variables aren’t set and the vertices eventually get multiplied by zero placing them at the origin.
F5
So why did refreshing work? Since the file was sitting in cache, it appeared to the PSI parser to download in one XHR request. This allowed it to read those crucial Min and Max tags and load properly.
Fixing and Filing
I added extra logic which forces the PSI parser to wait until necessary tags are read before attempting to parse any vertices. While I added the fix I noticed the parser is in some desperate need of cleaning and restructuring, so I’ll need to file a bug on Lighthouse for that.
Lessons Learned
The core of this entire ordeal boils down to lack of testing. Before doing releases, I run all demos and ref tests—locally. This is why I didn’t catch the bug and why it slipped into the 0.7 release. Since then I uploaded Sundae.js (the ref tester) to a server so I can run all tests over a network as well as locally.
The Demo
If you want to see the running demo, it’s here.