# Properly load textures on a deployed project

**URL:** <https://forum.babylonjs.com/t/properly-load-textures-on-a-deployed-project/8203>\
**Category:** Questions\
**Tags:** material\
**Created:** [January 23, 2020, 9:08am UTC](https://forum.babylonjs.com/t/properly-load-textures-on-a-deployed-project/8203 "2020-01-23T09:08:26Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stephen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/stephen/32/7585_2.png) [@Stephen](https://forum.babylonjs.com/u/Stephen)\
**Post date:** [January 23, 2020, 9:08am UTC](https://forum.babylonjs.com/t/properly-load-textures-on-a-deployed-project/8203/1 "2020-01-23T09:08:26Z")

</div>

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.

 ![TextureIssue](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/d6f5b1b4179708288b6afad74792fc8e9b1cf0fc.png)

The project is live here: [https://babylon-test-complex.herokuapp.com/](https://babylon-test-complex.herokuapp.com/)

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.

---

<div class="post-metadata">

**Author:** ![JFerret](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jferret/32/5541_2.png) [@JFerret](https://forum.babylonjs.com/u/JFerret)\
**Post date:** [January 23, 2020, 10:49am UTC](https://forum.babylonjs.com/t/properly-load-textures-on-a-deployed-project/8203/2 "2020-01-23T10:49:51Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [January 23, 2020, 5:49pm UTC](https://forum.babylonjs.com/t/properly-load-textures-on-a-deployed-project/8203/3 "2020-01-23T17:49:05Z")

</div>

Welcome to the forums!

> [@Stephen](#):
>
> 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.

Once you have a texture object, you can set the [samplingMode](https://doc.babylonjs.com/api/classes/babylon.texture#samplingmode) to [NEAREST\_NEAREST](https://doc.babylonjs.com/api/classes/babylon.texture#nearest_nearest) to disable all filtering.

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [January 23, 2020, 5:56pm UTC](https://forum.babylonjs.com/t/properly-load-textures-on-a-deployed-project/8203/4 "2020-01-23T17:56:09Z")

</div>

> [@Stephen](#):
>
> error message in the dev tools saying that the textures

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, [https://babylon-test-complex.herokuapp.com/scene/Arthur.png](https://babylon-test-complex.herokuapp.com/scene/Arthur.png) returns 404 not found.

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/stephen/32/7585_2.png) [@Stephen](https://forum.babylonjs.com/u/Stephen)\
**Post date:** [January 24, 2020, 3:44am UTC](https://forum.babylonjs.com/t/properly-load-textures-on-a-deployed-project/8203/5 "2020-01-24T03:44:37Z")

</div>

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.

 ![キャプチャ](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/da3b945b8029b74ee4cd39d21b24633232c783dd.png)

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/stephen/32/7585_2.png) [@Stephen](https://forum.babylonjs.com/u/Stephen)\
**Post date:** [January 24, 2020, 3:52am UTC](https://forum.babylonjs.com/t/properly-load-textures-on-a-deployed-project/8203/6 "2020-01-24T03:52:49Z")

</div>

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.

 ![キャプチャ](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/fe22bb1450bd1a6b1e3b5dbf797cfd7c6496d17c.png)

When I simply use **./character\_zombie\_attackkick.png** it doesn’t load in any case

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [January 24, 2020, 3:59am UTC](https://forum.babylonjs.com/t/properly-load-textures-on-a-deployed-project/8203/7 "2020-01-24T03:59:50Z")

</div>

> [@Stephen](#):
>
> There is no way to directly set this on the texture in the editor, correct?

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

---

<div class="post-metadata">

**Author:** ![julien-moreau](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/julien-moreau/32/12070_2.png) [@julien-moreau](https://forum.babylonjs.com/u/julien-moreau)\
**Post date:** [January 24, 2020, 10:42pm UTC](https://forum.babylonjs.com/t/properly-load-textures-on-a-deployed-project/8203/8 "2020-01-24T22:42:44Z")

</div>

Hey @Stephen!  
Welcome!

When you say:

> [@Stephen](#):
>
> 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.

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 🙂

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/stephen/32/7585_2.png) [@Stephen](https://forum.babylonjs.com/u/Stephen)\
**Post date:** [January 30, 2020, 10:07am UTC](https://forum.babylonjs.com/t/properly-load-textures-on-a-deployed-project/8203/9 "2020-01-30T10:07:19Z")

</div>

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.
