[SOLVED] Textures not showing when code is run locally, no problems in the playground

Questions
1

The issue:
when I download any code that works in the playground (via the download button in the playground), unzip it and run the html, the textures don’t show up, but the physics and everything else works just fine. The image files are correctly downloaded and in the correct directory. I tried Chrome, Firefox, and Edge, but all of them showed the same thing. The console log shows no errors, except for the WEBGL_debug_renderer_info is deprecated in Firefox and will be removed. Please use RENDERER., which to my knowledge is safe to ignore because there is a fallback for it. What is causing the textures to not work?

Here is an example:
everything looks fine in the playground (https://playground.babylonjs.com/#20OAV9#15):

image
image1247×855 52.5 KB

yet when I download it and run it from my computer,

image
image1680×964 73.7 KB

Things I have tried to solve it:

  • I downloaded all the babylon js related script files and edited the html to link to those local files instead, but got the same results.

  • I googled “babylon.js textures not working” and other slight variations of that, but the results as far as I could see were about only some specific textures not working, or the textures not working in a certain platform, or offline. In my case, the textures don’t seem to be working no matter what.

  • I became the very definition of insanity by running the same code many times hoping that something would change, but alas.

I think there must be something obvious I’m not getting since I can’t find any other posts with the same issue. Apologies if this is one of those infuriating questons that gets asked every month by newbies. I am a newbie :')

2

Hey there. :slight_smile: So I’m guessing that you’re opening the index.html file with your browser but a web server is needed to serve the texture files. You could try running a simple server locally like this one for example. Also some editors can handle serving your project files for you to make testing easier - eg WebStorm has this feature and Visual Studio Code has extensions available for it.

3 Likes
3

That was what I was missing! I should have realised sooner. It’s working as intended now. Thank you!!

1 Like
4

This is worth a read

@PirateJC the restrictions on using the PG download are not mentioned in the docs at

Download zip: Allows you to download a zip file named sample.zip. Once downloaded and unzipped, you will see a file named index.html which contains everything necessary to run the code in your browser, including links to external babylon.js and other files.

Would you add the need for a server please?

3 Likes
5

In hindsight, I should’ve realised that the repeated use of phrases like “ready-to-host html” meant the docs were telling me a server was required to run the code locally! I didn’t pay any attention to that part when I first read that page since I was only concerned about writing code at that point.
I definitely should get in the habit of reviewing information more, even if I read it once before!

1 Like