Import models from Blender

Questions
, ,
1

Hello,

This is a very basic question, but I tried to find documentation on the proper workflow, and most of the tutorials I find online are not beginners friendly.
I started using Babylon today.

I am working on some 3D models of diamonds that need to appear realistic on an external service that uses Babylon as base.
They suggested me to experiment with Babylon to create a proper shader.
The problem is that I am not able to even import the base mesh to play with.
I have a ring with a diamond that I modelled in Blender. I tried to open the playground, but I cannot find an option to upload a model and from the editor I am not sure how to upload a mesh from my computer (should I first upload online on a website or webspace? Are the textures and materials automatically uploaded, or should I create from Babylon? Etc.)

Basically, I am trying to replicate in Babylon a node setup used in blender to generate a realistic diamond, and Iā€™m trying to find a good workflow that can bring me from creating the model in Blender to importing in Babylon.

I like the system and would like to use this as a way to upload my models also on my website, making them accessible as fully 3D meshes.

Do you know a good tutorial or course that can help me to understand how this works in a clear way?
If you have advices as well Iā€™m more than happy :blush:

Thank you!1!!1

2

Welcome to the forum !!!

@PirateJC will definitely be able to help here :slight_smile:

3

Thank you so much!
I am sure of thatā€¦ the community of Babylon seems as fun, passionate and good as the one of Blender!

1 Like
4

The doc about .babylonjs Blender exporter is outdated (but can help if youā€™re using the exporter developped by @JCPalmer ).

I use the .glTF format (which is not only specific for Blender or BabylonJS), here a quick docā€™ : Blender to BJS, using glTF | Babylon.js Documentation Basically : just export your gltf/glb.

For use in the playground, check this page Using External Assets In the Playground | Babylon.js Documentation

For more complex materials, like a very specific shader, you can create your own but itā€™s probably too soon if you just drop into BJS :slight_smile:

2 Likes
5

Hey @Madquake I definitely echo @sebavan comment here. Itā€™s so great to have you on our forumā€¦or as we like to sayā€¦ā€œWelcome to the Babylon Family!ā€

We can definitely help here!

First question though. It sounds like youā€™re using the Babylon editor is that right? If so, weā€™ll need to call in its creator @julien-moreau for assistance.

If you simply want to know how to take a model from Blender to the Babylon playground, thatā€™s really easy.

Using Blender 2.8 or above, with your model selected, youā€™ll want to use the built in .glb/.gltf exporter.

You can do this in the file menu here:

image

In a fresh playground: https://playground.babylonjs.com/

in the code editor, you can hit ā€˜CTRL+SPACEā€™ to bring up the intellisense menu. The first options you see are what we call playground templates. One of the options is how you can load a mesh from a url:

image

Youā€™ll want to look for ā€˜Import mesh with callbackā€™

The only thing youā€™ll need to do is host your 3D model somewhere that has CORS permissions.

Itā€™s really that easy.

Hereā€™s a very simple example:
https://playground.babylonjs.com/#S17YS0

Look at line 19.

Now for the more advanced question.

How do you recreate a node based shader from Blender in Babylon. Thatā€™s a trickier one, but definitely doable.

First you need to know that the only material type in blender thatā€™s supported in .gltf exporting is the Principled BSDF shader. So youā€™re correct in that youā€™ll have to recreate your material in Babylon.

Luckily, we have the Node Material Editor for this!

There are a LOT of resources out there on learning the Node Material Editor, but Iā€™d start here:

and at our youtube channel:

I Hope this helps set you in the right direction!

2 Likes
6

There is also a Blender to Babylon.js exporter Blender add-on that you can try.

Just download it and install it like any other Blender add-on. It will add a .babylon export option.

Both .bablyon and .gltf/.glb files should export the materials. You many need to include external files, like texture images.

7

Hello @PirateJC and @nmrugg
Thank you for your advicesā€¦ Apparently Iā€™m starting to grasp how it worksā€¦
I watched the intro series on Sandbox. I would love if they made something similar for the playground.

The explanation of @PirateJC was great and could easily be turned into a video tutorial.
I just have a question at this point.
You mention that the model needs to be hosted somewhere that has CORS permissions.
I have my own website that has an FTP. Even if the site was developed on WordPress I think I can create a folder via FTP and host models thereā€¦ is there a free host where to load models (even just temporarily) to test them on the Playground of Babylon?
Where do you usually upload the models in such a way you can use them?

Thank you so much and forgive me for the basic questionsā€¦
Would be great to find a very basic tutorials that literally starts from thereā€¦

8

I tried to load the model from a folder I made via FTP on my websiteā€¦
I tried to load the model using the web address, but nothingā€¦ the scene is emptyā€¦
What Iā€™m thinking is that my webspace doesnā€™t have CORS permissions (it is the only thing that comes to my mind).
To be honest, itā€™s the very first time I hear about CORS permissions (had to check what they are).

Is there a place where I can upload models and get a pace to ā€œparkā€ them? Alsoā€¦ where are models usually stored? I guess that not everyone has a website they can use for this.

Finallyā€¦ you mention the textures. Is there a way to prepare the file for the import?
Should I save the .glb file in a folder and then create in that same folder another with the textures? And if soā€¦ should I somehow link all the textures to the different materials?

Thanks guys

9

Yes CORS is related to security and safety on the web. You have to make sure you host your file in a place that has proper CORS access.

I usually use github when testing assets

Check out this page, it should help:

10

Hello @PirateJC
I have a GitHub accountā€¦
I donā€™t use it muchā€¦ do you know if there is a tutorial on how to use this function? I have no idea how and where to load my 3D modelsā€¦

Also, do you know if there is a way to keep them private? In some cases, I work for some clientsā€¦

11

Everything you really need is either on that doc page OR on our YouTube channel from my previous post.

This is a video from our channel that should help you:

12

Yes, I watched this video before watching the other seriesā€¦ it is fascinating!
It is just that I donā€™t understand a couple of things and I have no idea where to find the information to understand themā€¦

The first is about GitHubā€¦
I have a GitHub profile I didnā€™t use a lotā€¦ What I donā€™t understand is if I can use it to load the models or if it is a different portal (or side of the portal). I ask this as the URL doesnā€™t mention ā€œrawā€, but simply github.com/myNameā€¦

The second is about the materials.
In the video, you show how to load a diffuse that is a colourā€¦ what if I have different maps? Should I load them one by one? And if soā€¦ should I create a particular folder structure on GitHub?

13

@Madquake, the easiest way to use your github account is to enable GitHub pages. This will serve your github repo where you set up pages as a web server. You can then access any models on your repo through the github.io address:

GitHub Pages Documentation - GitHub Docs

This is the way I set up all of my demos since you donā€™t need to know the raw address and you are not using a work around to access your file. This is supported by github so they expect you to hit your repo files from any web page.

2 Likes
14

@Madquake, can you can post your .blend file?

15

Hello @nmrugg.
You mean here or on Babylon?

That file is not out yetā€¦ I need to load to Babylon to study a diamond shader as the client uses a system called Spiff to load on his website the modelsā€¦ and Spiff doesnā€™t have a diamond shader, but they suggested me to use Babylon as it is what they use for the system.

I can use different models thoughā€¦ I have a lot I made and after approaching Babylon I decided I want to work with it as it is realy cool!

16

Hello Guys!
It woked! Now I have a redepositary on my GitHub where I can Upload my modelsā€¦

This is the first experiement
https://playground.babylonjs.com/#HJS9BN#2

Seen that I am here, Iā€™d like to ask a couple more questions.
Do you know where I can find tutorials on single elements? For example, I found a piece of script that creates a camera that rotates around an elementā€¦ Time ago I made the chair you see here, and Iā€™d like to move the focus point of the camera up (as at the moment sits on the floor) but I cannot find tutorials that explain that.

I know there is documentation, but I am more a visual learner and reading long documents without much visual is not ideal for me.

17

The doc is full of visual and playground examples. @PirateJC is also covering it all in Videos and the forum search should be your best friend.

18

Hello @sebavan
I tried to follow the documentation, but something is not right with my process as I managed to load the model from my GitHub repository but when I try to load the .dds file for the sky everything disappears.
I tried to find also tutorials on the subject, but none of them show how to do it from GitHub.

This is what I managed to doā€¦ If you comment the environment code you will manage to see the model.
https://playground.babylonjs.com/#HJS9BN#8

I tried to follow the instructions on this page
https://doc.babylonjs.com/toolsAndResources/tools/playground/externalPGAssets
removing the /blob/ part and replacing the first part of the URL, but nothing works.

In the examples the URL is usually /textures/nameofthefile and this makes me think it is a directory internal to Babylonā€¦

What am I doing wrong?
Alsoā€¦ I tried to organize the files in folders (this is why the .dds file appears in the main folder and in the environment subfolder).

I also turned the main folder into a page, but I am not sure how this worksā€¦ tried to read the documentation but this is the point where I arrived.

19

Sorryā€¦ I made a bubuā€¦
Basically the dds file I used was corruptedā€¦
I tested with the file you have in the texture folderā€¦ I uploaded on my repository and with the new address it worksā€¦
I need to understand why the dds file I made was not workingā€¦ but otherwise the system is really smartā€¦ the dumb one was the one using it (me)