Resource loading timeouts

Timeouts are inevitable, but here’s one that doesn’t get caught and therefore brings down the process. I haven’t been able to repro; this is courtesy of @shaneharris.

A-Frame Version: 0.7.0 (Date 2018-02-05, Commit #39daf67)
three Version: github:dmarcos/three.js#r89fix
WebVR Polyfill Version: ^0.9.40
core:schema:warn Default value `0 1 0` does not match type `vec3` in component `teleport-controls` 
THREE.WebGLRenderer 89
A-PAINTER Version: 1.2
core:a-assets:warn Cross-origin element (e.g., <img>) was requested without `crossorigin` set. A-Frame will re-request the asset with `crossorigin` attribute set. Please set `crossorigin` on the element (e.g., <img crossorigin="anonymous">)  https://cdn.aframe.io/a-painter/sounds/ui_click0.ogg
core:a-assets:warn Cross-origin element (e.g., <img>) was requested without `crossorigin` set. A-Frame will re-request the asset with `crossorigin` attribute set. Please set `crossorigin` on the element (e.g., <img crossorigin="anonymous">)  https://cdn.aframe.io/a-painter/sounds/ui_click1.ogg
core:a-assets:warn Cross-origin element (e.g., <img>) was requested without `crossorigin` set. A-Frame will re-request the asset with `crossorigin` attribute set. Please set `crossorigin` on the element (e.g., <img crossorigin="anonymous">)  https://cdn.aframe.io/a-painter/sounds/ui_menu.ogg
core:a-assets:warn Cross-origin element (e.g., <img>) was requested without `crossorigin` set. A-Frame will re-request the asset with `crossorigin` attribute set. Please set `crossorigin` on the element (e.g., <img crossorigin="anonymous">)  https://cdn.aframe.io/a-painter/sounds/ui_undo.ogg
core:a-assets:warn Cross-origin element (e.g., <img>) was requested without `crossorigin` set. A-Frame will re-request the asset with `crossorigin` attribute set. Please set `crossorigin` on the element (e.g., <img crossorigin="anonymous">)  https://cdn.aframe.io/a-painter/sounds/ui_tick.ogg
core:a-assets:warn Cross-origin element (e.g., <img>) was requested without `crossorigin` set. A-Frame will re-request the asset with `crossorigin` attribute set. Please set `crossorigin` on the element (e.g., <img crossorigin="anonymous">)  https://cdn.aframe.io/a-painter/sounds/ui_paint.ogg
core:schema:warn Unknown property `button` for component/system `teleport-controls`. 
core:schema:warn Unknown property `ground` for component/system `teleport-controls`. 
core:schema:warn Unknown property `button` for component/system `teleport-controls`. 
core:schema:warn Unknown property `ground` for component/system `teleport-controls`. 
THREE.WebGLRenderer: image is not power of two (3584x2944). Resized to 2048x2048 <img src="assets/images/brush_atlas.png"/>
OBJLoader: 18.011ms
OBJLoader: 1.882ms
OBJLoader: 24.747ms
OBJLoader: 14.948ms
OBJLoader: 3.132ms
{ Error: connect ETIMEDOUT 104.25.104.6:443
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1163:14)
  errno: 'ETIMEDOUT',
  code: 'ETIMEDOUT',
  syscall: 'connect',
  address: '104.25.104.6',
  port: 443 }

[avaer]

That seems pretty close to the ideal solution to me, which is queuing resources to limit extreme concurrency to a request cap rather than a time guess.

From this data it looks like there are simply too many things downloading at once.

I’ll try to get in a fix that covers all resource types without any setTimeout, but rather a concurrency-buffered fifo. Hopefully that covers even more cases where this problem would arise.

[sidequestlegend]

OK so I wrapped the inner fetch in the constructor of HTMLImageElement in a setTimeout(()=>{},20*count) and it got around the issue. It seems its a system bottleneck as I was also logging the response statusCode in window-fetch and it was always 200.

Interestingly the sweet spot for the timeout was 30ms, 20ms and it still choked, 40ms and i hit some other timeout.