Jump to content

glTF import with custom extensions

Recommended Posts

Hi everyone,

I'm quite new to babylon JS and need a small bump into the right direction ?

Hoping not to fall for the XY Problem here's what I want to do:

Going from a model created for Unity, that use special shaders, I want to export these to a WebGL solution. That way I can display these models on any supported browser (even mobile since Unity WebGL is not supported by most)

My Approach:

  • Create model in Unity3D with custom Shaders - done
  • Export model to glTF, adding a custom extension to the material that holds all relevant information (specular maps, UV mappings, custom material properties that exceed the standard shaders) - done, made a special extension for the Unity exporter that handles my materials
  • Import glTF to babylon and read out the custom material properties stored in the material extension - this is where I'm stuck
  • Adapt the special Unity shader to work with the WebGL environment of babylon JS
  • Display the model with custom shader and settings stored in glTF file

Can someone tell me how to read custom extensions from GLTF within babylon JS? From the documentation I know that for now only the standard extensions are supported (KHR_Materials, draco compression, MSFT_lod, ...). Where do I have to start if I want to add a custom plugin or behavior for the glTF importer that understands my custom material extension?


Thanks for your help :)

Link to comment
Share on other sites

Thanks for the follow-up :)

I already downloaded the Git repository from https://github.com/BabylonJS/Babylon.js. This should also include the implementation of the basic glTF loader (babylon.glTFFileLoader.ts if I'm right). But I can't find where extensions (like "EXT_texture_transform") are handled.

Also I think I'm somewhat confused with the naming of "extensions" and "plugins". Do I understand correctly that within babylon JS a "plugin" is something like the glTF loader itself or the physics engine? I think the name "extension" in the context of babylon JS has a different meaning from the "extension" in the glTF file format (which is rather a file extension like .jpg)?

In general I wouldn't mind doing a custom implementation just for my case - Which would be to read extra parameters stored in the glTF file (as custom extension property) and build up the scene in babylon using these parameters. I just don't quite understand where I would start or if there is already a mechanism that is intended for sort of a "plugin for the glTF loader".

Geez, I hope this isn't totally confusing :D

Thanks for your help

Link to comment
Share on other sites

Yeah, the naming is overloaded. I'll try to explain a bit.

There are SceneLoader plugins which support specific file extensions (such as obj, stl, and gltf/glb). The glTFLoader is one of these plugins which support the gltf/glb file extensions. The glTFLoader plugin has glTFLoader extensions that separate certain functionality of the loader into separate classes which helps with organization and maintenance of the code. Finally, there are glTF extensions which are extensions to the glTF format. All of these glTF format extensions have a corresponding glTFLoader extension (e.g. KHR_materials_pbrSpecularGlossiness, KHR_draco_mesh_compression, etc.) The glTFLoader currently does not have a public facing contract for adding glTFLoader extensions and mostly this is because the glTFLoader extensions interface is not very stable and I often have to change it to accommodate new extensions or fix issues. I will work on something that will help with this, but it will require some time.

Short-term, if you are okay with relying on interfaces that might change, you can use the extension mechanism that I'm doing with the glTFLoader using typescript. The other option is to use Babylon Toolkit until I can provide you something to extend the glTFLoader more easily.

Link to comment
Share on other sites

Thanks again for the information!

I wasn't even aware of the Babylon Toolkit :huh: - this might make the whole process even easier (since I'm not really skilled in JavaScripr / TypeScript yet :(). I'll have a look into it as well. 

But once I have some more practice, the native implementation would probably make the final solution a lot smaller in size. I can imagine going from Unity will add quite some overhead...

Link to comment
Share on other sites

  • 2 months later...

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...