Import models from Blender

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

Welcome to the forum !!!

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

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

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:

1 Like

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

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.

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…

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

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:

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…

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:

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?

@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

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

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!

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.

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.

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.

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)