Properly load textures on a deployed project

Hello, I just started out using babylon.js today and I’ve mainly been using the desktop application.

I have a very simple scene with a few primitive meshes and attached a material to them which has a diffuse made from a png I imported.
In the editor, when using run and debug and running a server on localhost the texture displays just fine and there are no issues.
However when I push the project up to heroku with a simple node.js web server the textures don’t display and there’s a placeholder checkerboard instead.
I also get an error message in the dev tools saying that the textures cannot be found.

The project is live here:

I’ve had a really hard time finding any information on how to properly host a babylon project, so I assume the issue is somehow related to my folder structure.
I basically just added express to the package.json and made a simple express server.
In the Protoc file I make sure to first run npm install, npm run build and only then start up the server.
When I build the game there is no materials/ folder, but the pictures are correctly located in scene/, so the issue might also be related to that.

Any help would be greatly appreciated!

I also have an additional question regarding the way textures are displayed.
In engines I used to you can select point(no filter) or nearest for texture filtering to properly display pixel art. I haven’t found an option in babylon though for that and pixel art is being displayed really blurry.

Can you give an example of the path you use to load a texture?

This should work,
“./your texture.png”

1 Like

Welcome to the forums!

Once you have a texture object, you can set the samplingMode to NEAREST_NEAREST to disable all filtering.

1 Like

Your scene.babylon is referencing images Arthur.png and character_zombie_attackKick.png which needs to be sitting next to the scene.babylon file if you want them to be found by the loader.

Currently, returns 404 not found.

1 Like

Thank you for the reply and hospitality.

There is no way to directly set this on the texture in the editor, correct?

I now created a material and mesh in code and used updateSampleMode(8) on the texture to set it to NEAREST_NEAREST.

The sampling mode seems to update on the texture correctly when I print out the object, but in the scene it still doesn’t look any crisper than before.

Thank you for the reply!

On my try yesterday I didn’t specify a path or anything. I simply imported my png in the babylon.js desktop app, attached it to the material and build the game out like that.
In the end the file would be located in the /scene folder together with the scene.babylon file.

Today I tried loading a texture from code and specifying the location myself.
When I set it as /scene/character_zombie_attackkick.png it doesn’t load up in the editor at all since it tries to go to some weird path in %appdata% to look for the file.
When I build out the project and run it on localhost it does load the picture!.
But when I push it up to heroku it does not load even though the folder structure is the same on my remote.

When I simply use ./character_zombie_attackkick.png it doesn’t load in any case

I don’t know much about the editor. @julien-moreau?

Hey @Stephen!

When you say:

Do you mean that you try to load the texture in a script written in the editor ?

If it works on localhost, it should work on a real server as well.
When you load the scene, can you try to set the baseUrl as « ./scene » instead of « /scene » ? For now this is the only idea I have. I’m digging right now :slight_smile:

Hey @julien-moreau

Thank you for the reply.
Also sorry for my late reply, I wanted to dive deeper into the documentation before I ask any further.

I decided to abandon using the desktop editor and decided to just do it raw instead, simply using a html file and importing the babylon library.

I was then able to fix all the issues by following the awesome documentation.
I am still a bit confused about the best workflow when it comes to Babylon.js though and where the editor would become useful.
I’m currently jumping around between between the playground and my local file.