Multiple downloads of a-sky image

mattsavarino commented 7 years ago

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.

<a-scene>
    <a-assets>
        <img id="sky" crossorigin="anonymous" src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg">
    </a-assets>
    <a-sky src="#sky"></a-sky>
</a-scene>

aframe-network1 aframe-network2

ngokevin commented 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.

mattsavarino commented 7 years ago

I'm still seeing 3 GETS when using <a-asset-item>

jbreckmckye commented 7 years ago

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.

ngokevin commented 7 years ago

Fix under review https://github.com/aframevr/aframe/pull/2544

pasdoy commented 7 years ago

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.

ngokevin commented 7 years ago

Try to set crossorigin="anonymous" on the images

pasdoy commented 7 years ago

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.

ngokevin commented 7 years ago

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>

pasdoy commented 7 years ago

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.

pasdoy commented 7 years ago

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

jbreckmckye commented 7 years ago

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.

ngokevin commented 7 years ago

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.

jbreckmckye commented 7 years ago

Works for me!

aframevr / aframe

Multiple downloads of a-sky image #2472