Jump to content

how do I use materials that are from files?


Recommended Posts

when I tried using .babylon it seemed to want external .jpg files that I put in the right place but then they stayed at 0 0 0  and never moved the position or rotation correctly. But a small part of my mesh seemed to move correctly but out of 6 texture files I'm not sure what was working with it and what went wrong with it. when I tried .obj files with .mtl I have no idea how to load the .mtl file correctly. .stl works but I don't think it uses material files. only material code that specifies colors. And I had no luck getting gltf files to work. Am I stuck with using .stl files and only having solid colors for the meshes? I'd like to have materials from the files and if it isn't coded yet I think it might be something to focus on soon. Anyone more familiar with what's going on with development.... I wouldn't mind knowing what the roadmap is. I'm not that familiar with nodejs otherwise I'd try to help with development in that area if I knew what to do.

Link to comment
Share on other sites

Hi Neuro, welcome to the forum.  Sorry to hear you are having problems.

10 hours ago, neuromage said:

but then they stayed at 0 0 0  and never moved the position or rotation correctly.

"they" == scene mesh, right? 

A lack of mesh movement/animations... often indicates something failed during the import of .babylon.

What went wrong?  Did you view js console and look for errors?  Were any reported?

Are you using Blender to create .babylon files?

It is best to start very simple.  SIMPLE blender scene, no animation, 1/2 textures, then export to .babylon.  Then, use BJS Sandbox app, and/or view the simple .babylon file with online JSON file viewer.

How does that look?  If it fails to import properly into playground scene... show us the playground URL which fails.  We LOVE playground scenes... they are easy for us to troubleshoot. 

You must publish your jpg/gif/png textures in a CORS-approved place.  I like using my free github account, which ANYONE can create.  It can store .babylon files and textures... and then be used in the playground or sandbox.

This playground search for 'Wingnutt' shows that I used my free github 33 times, so far... loading all sorts of strange junk... all usable in playgrounds.

It all seems difficult now, eh?  *nod*.  Soon you will have it mastered, so don't be discouraged.  Learn to watch your JS console... it will tell you about failures.

After making simple .blend file, then export to simple .babylon file... then test in sandbox and playground (and view in json viewer)... and if still problems... try to publish/post your .blend and .babylon files... where all forum helpers can download them.  That helps us find problems.

Consider getting a free github account and using it with playgrounds... just like I did.  Try to use the BabylonJS AssetsManager system... to do your loading... it is cool and modern.

Read about CORS on the web.  Your textures could be failing to load... BECAUSE of that.

As a reminder... a mesh has a SINGLE .material object (but there are various kinds of BJS.Material objects).  The most common is a BJS StandardMaterial.

A single BJS StandardMaterial has lots of BJS Texture opportunities, and they can be combined.  There can be a BJS Texture in mesh.material.diffuseTexture, and/or .emissiveTexture, and/or .specularTexture, and/or .opacityTexture... and MORE.  You must be careful when you use the term "material" because all forum helpers... use "material" term... to think about...

mesh.material = new BABYLON.StandardMaterial("matname", scene).  <-- this, a BJS StandardMaterial object.

In other words, often, the mesh.material is fine, but the Textures for that .material... are failing to load.

mesh.material.diffuseTexture = new BABYLON.Texture("some_CORS_clear_URL", scene);  <- fails to find the texture somewhere on the web.

Again, try to stay simple, at first.  Try exporting .babylon file with NO materials/textures, just mesh.  Work ok? 

Try exporting single mesh with material that uses a diffuseTexture.  Did that load good?  Watch console.  Make sure you have your browser f12 dev tools area (where you can see JS console)... set to show ALL errors, including network failures (CORS blockades and FILE NOT FOUND errors for your jpg/png textures). 

BabylonJS has FULL POWER materials with textures, as you can see by the many fantastic scenes at  https://www.babylonjs.com/ .  Right now, you have a little more learning to do.  Keeping your Blender scenes very simple... examining .babylon file with web-based JSON viewers... learning about CORS blockades... using the playground and sandbox... opening a free github account used like I did... these things will help you learn much quicker.

And, when you tell us about problems, try to give us some "white space" in your message, please.   

Let's try to get .babylon files to load, first.  Then we'll move to .obj and others.  Small steps.  :)

Try to examine some of the assetsManager loading that others have done in playgrounds... http://doc.babylonjs.com/playground/?code=assetsManager

The playground app... makes life easier for you and for us forum helpers.  But it starts with CORS-approved places to publish .babylon and .jpg/.gif/.png.

Okay, per the information you have provided, these are SOME of the issues that can cause problems, and SOME things to check.  I hope I have been helpful.  Stay in touch... show us playgrounds, .blend files, and .babylon files... that also helps us find problems.  Thanks!

Link to comment
Share on other sites

Thanks for your post. I'll try and get back to this thread when I've tried some of your suggestions.


I wrote that fairly quickly without putting much thought to white space, sorry for that.


I hope to figure babylon.js out to where its usable for me. Your help is very much appreciated.

Link to comment
Share on other sites

I tried making a playground version of my problem. but I can't seem to get the file to load from github... any help on what to do? I'm sure its something to do with CORS but I'm not sure what to do about it.


my github


The  heart .babylon file was exported using blender.

Link to comment
Share on other sites

Hi N.  I saw some problems in your playground.  JS console reported failing to load .babylon.

But, I adjusted the URLs to be "rawgit".  Suddenly, boom, there's a big heart in front of me.  :)  Cool!


someMeshes[0] thru someMeshes[5]... 6 pieces of heart.  YAY!  A good-lookin' model, for sure.

Looks like materials/textures are being 'reffed-in' via the .babylon file, so, no need to add/change the .materials on someMeshes[0] thru someMeshes[5]. 

No need to add/change any material.diffuseTexture either, but you could, if you wanted-to.  Maybe we'll try it... further down. ;)

In lines 48-71 area... you could have lots of fun... with things like...

someMeshes[1].material.diffuseTexture = new BABYLON.Texture("https://cdn.rawgit.com/bluemage/babylon-personal/master/Human_heart_Arteritas_DIFFUSE.jpg", scene);

... or similar fun.  (changing textures, goofin' around, practicing)

cdn.rawgit.com... a handy tool.  It's our friend.  :)

Did you know that you can find CORS-clear images with Google Image Search... and setting Tools->UsageRights->Labeled-for-re-use?  Let's try an image search for 'pattern'...


Oooh, that brick pattern looks nice...  https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Tiled_brick_pattern.jpg/480px-Tiled_brick_pattern.jpg

NOW, let's go back into our playground... to play...


Wow!  :) Look at lines 73-79.  We have "over-written" the .diffuseTexture... for Blender-export-installed materials... someMeshes[4].material & someMeshes[5].material.

In other words, we didn't create a new Babylon.StandardMaterial for someMeshes[4] and someMeshes[5].  But we DID replace the .diffuseTextures on both of those materials.  One of the textures is from your git folders.  The other... is our bricks pattern... gotten from our TinyUrl above. 

Are ya "feelin' it", blue mage?   Look how far you have come!   You're cookin'!   Playgrounds, exporting from Blender, github, importing to BJS scene, then changing textures if you wish, even from CORs cleared textures gotten from web image search.

The most-common "texture channel" used on BJS materials... is .diffuseTexture.  .emissiveTexture is probably #2 (mesh self-illumination without needing lights).  There's lots more channels on a StandardMaterial.  MANY channels can be used at the same time... and are often "mixed" to make novel and unique mesh-looks.  The BJS StandardMaterial is amazing.

And, there's a little secret knob... .level.  EVERY BJS texture... has a .level property.  It defaults to 1, but set it to 2 for brighter/stronger textures, and .5 for dimmer/weaker textures. 

And, you can spin, tile, and slide-around the position... of a texture... UPON the mesh.  We'll talk about that... on another day.  :) I hope this helps.

Link to comment
Share on other sites

still analyzing a bit what you did with the code. But it doesn't solve the problem that if I try to change position, rotation, or scaling it only reacts on a small part of the mesh.not the whole thing a good chunk stays a 0,0,0.

I don't know if this is an issue with the exporter or some piece of code that I'm missing. Also when I did the export I didn't see controls for it in blender.

I am feeling it but it'll be sweeter when I understand what's wrong with it.

Link to comment
Share on other sites


If you're having problems with .obj textures and materials, there is a very simple solution. Edit you .obj file and remove the reference to the .mtl file completely. Then the .obj will default to a standard material file allowing you to then manually assign additional material values. I run into this all of the time and often remove all references to the .mtl file as this file is not necessary.


Edit - I didn't fully read through the post yet, but if you're having problems with the texture mapping, then make sure the texture is unwrapped and that your mesh's transforms are all reset for scaling, transformation, and orientation - which will allow you to have complete confidence that there is no attribute of your mesh which affects the textures as well.

Link to comment
Share on other sites

I figured out how to apply position to the whole array. YAY! I'm very happy I think I can use this framework for sure now! 

I updated the example and it all moved. I almost feel kinda dumb for not realizing how it worked. But I'm not sure its terribly well documented with all the struggle I put into it.


Link to comment
Share on other sites

so when I add Human_heart.babylon to the sandbox theres a section I can see that isn't there with the .jpeg images added.

Was there a problem with the blender rendering? I wasn't able to see any properties in the program using babylon.js ver 5.6.2

I haven't tried Tower of Babel ver 5.3 beta yet. But I clicked on it and also no properties.

edit * I rerendered the heart file. nothing new. This may be a blender issue but I'm not sure I don't have enough experience to know for sure.

Am I missing something with exporting?

Link to comment
Share on other sites

9 hours ago, neuromage said:

if I try to change position, rotation, or scaling it only reacts on a small part of the mesh.not the whole thing

Hi N.  This is because someMeshes[0] thru someMeshes[5] have no common parent, and/or they haven't been merged with each other.


I tried a merge in line 51, but I got an error at the console.

So, lines 53-59... parent each piece... to a master object.  Master can be invisible or tiny, as needed.

After that, we can do all our .position, .rotation, and .scaling... on the master parent.  Lines 64-67... animated position, rotation, and scaling... on master.

I think you can make a master-parent within Blender, too, and it will export and import.  I think it is sometimes called a root, but perhaps that is only for skeletons/bones.

I'm not very experienced with Blender, sorry.

Link to comment
Share on other sites

when you add it to the createbox or master the full heart renders! :)

I think I need to look more into blender rendering to get another .jpeg file baked in to my mesh if I want to be able to take it apart and show different pieces in different places.

Wingnut you've been tremendously helpful. Thanks.

It's off to watch blender videos for now though. I'm definitely excited about Babylon now.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...