jdurrant

Problem loading a texture on Firefox or Android

Recommended Posts

I'm having an odd problem loading a texture on Firefox for Android. It seems to work on every other browser I've tested. Here's a url with an example of the problem:  https://durrantlab.bio.pitt.edu/tmp/minimal_test_firefox_mobile_prob/

Here's the complete html code of that example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Test</title>
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        
        <link rel="manifest" href="./manifest.json">
                
        <style>
            html, body, #renderCanvas {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                /* width: 100%;
                height: 100%; */
                touch-action: none;
            }
        </style>
    </head>

    <body>
        <canvas id="renderCanvas" touch-action="none"></canvas>

        <script src="js/babylon.max.js"></script>

        <script>
            // Basic setup
            var canvas = document.getElementById("renderCanvas");
            var engine = new BABYLON.Engine(canvas, true);
            var scene = new BABYLON.Scene(engine);
            var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -10), scene);

            // Make a material
            var material = new BABYLON.StandardMaterial("mat", scene);
            material.diffuseColor = new BABYLON.Color3(0, 0, 0);
            material.specularColor = new BABYLON.Color3(0, 0, 0);
            material.diffuseTexture = null;
            material.emissiveTexture = new BABYLON.Texture("skybox.png", scene);

            // Make a box with that material
            var box = BABYLON.Mesh.CreateBox("box", 2, scene);
            box.rotation.x = -0.2;
            box.rotation.y = -0.4;
            box.material = material;

            // Resize the engine
            engine.resize();
                        
            // Start the render loop
            engine.runRenderLoop(() => { 
                scene.render(); 
            });

            // Watch for browser/canvas resize events
            window.addEventListener("resize", () => {
                engie.resize();
            });
        </script>
    </body>

</html>

This is what it looks like in most browsers (in this case Chrome for Android):

image.thumb.png.5ffe61feda47f171349d31eb2d0ff6de.png

But here is Firefox for Android:

image.thumb.png.1a58f58ae4b3934b099761ab8d4d76f2.png

Has anyone else encountered this problem? Any suggestions re. how to fix it? Thanks!

Share this post


Link to post
Share on other sites

Hi all. I fixed the "engie" error and changed to the full url: 

https://durrantlab.bio.pitt.edu/tmp/minimal_test_firefox_mobile_prob2/skybox.png

The error persists in Firefox on Android, though. Here's an updated version of the code that still causes the same error: https://durrantlab.bio.pitt.edu/tmp/minimal_test_firefox_mobile_prob2/

Thanks,

Jacob

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.