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">

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <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">
            html, body, #renderCanvas {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;

            #renderCanvas {
                /* width: 100%;
                height: 100%; */
                touch-action: none;

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

        <script src="js/babylon.max.js"></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
            // Start the render loop
            engine.runRenderLoop(() => { 

            // Watch for browser/canvas resize events
            window.addEventListener("resize", () => {


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


But here is Firefox for Android:


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: 


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/



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.