Closed mattsavarino closed 7 years ago
I'm looking how we can cache <img>
elements so that it's downloaded once and stored in the three.js Cache. But a workaround is to use <a-asset-item>
instead of <img>
for images.
I'm still seeing 3 GETS when using <a-asset-item>
One consequence of this is that even with <a-asset-item>
resources, it's difficult to reliably reason about download progress due to the abundance of non-meaningful XHR progress events.
Fix under review https://github.com/aframevr/aframe/pull/2544
Thanks for the fix I was eager to try it. When I switch to current aframe-master.min I get:
three.js:19131 DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.
Switching back to 0.5.0 fixes it. What is strange is not all images are affected. The assets are dynamically appended to <a-assets>
. I am trying to build a simple demo of the issue.
Try to set crossorigin="anonymous"
on the images
Thanks for the quick reply. If you run this locally once and browser refresh it will raise this error.
Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg
If you switch back to 0.5.0 there is no exception. I assumed it was related to a change in caching system.
<html>
<head>
<script src="/libs/aframe-master.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.min.js"></script>-->
</head>
<body>
<a-scene>
<a-assets></a-assets>
<a-sky id="sky"></a-sky>
</a-scene>
<script>
var assets = document.querySelector('a-assets')
var asset = document.createElement('img');
asset.setAttribute('id', 'source');
asset.setAttribute('src', 'https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg');
asset.setAttribute('crossorigin', 'anonymous');
assets.appendChild(asset);
document.querySelector('a-sky').setAttribute('src', '#source');
</script>
</body>
</html>
I had pasted the wrong one above, fixed as you said by adding crossorigin
in the original project.
Works for me: https://glitch.com/~aframe-2472
P.S., there's not much point in adding to a-assets dynamically. That's for preloading and blocking. You can set the material src inline without creating an <img>
Ok might be my browser then. I go to https://aframe-2472.glitch.me/, refresh and get Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at
. Thanks for your help.
I know I'm pushing but I asked some friends to test, it's def a bug found only in Chrome and yes it happens to all users. There is no issue on Firefox tho. Simply open your demo https://aframe-2472.glitch.me/, in chrome, and refresh. The result will be a dark screen and a console error Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at ...
.
Here's a recording of the steps above, running on most recent Chrome version using your demo. To trigger the dark screen I just refreshed cmd+r
.
http://recordit.co/qbmzxjwtlt
I can confirm the behaviour @pasdoy reports on Chrome/Windows. The cross-origin image cannot be loaded as a texture when it is fetched from the disk cache.
I've updated it to be more correct. https://aframe-2472.glitch.me/
The problem is setting an image with <img>
before its loaded. The original Glitch/GitHub issue was trying to dynamically append an <img>
to <a-assets>
so I was trying to work within those parameters. If you are using <img>
, we must wait for it to fully load first, which <a-assets>
does.
If you want to set dynamically, set inline URL on the src and texture loader will load the image first before setting.
Works for me!
Looking at the network console (in FF Nightly & Canary), the boilerplate example for panorama downloads the a-sky source image twice.
It appears this SO may be related: http://stackoverflow.com/questions/38978890/mozilla-a-frame-loads-images-twice
When using a-assets instead, I'm seeing a 3rd download of the same image.