Jump to content

BabylonJS in-browser Material Editor


Recommended Posts

Hello guys,


I have been playing with materials quite a lot lately. After spending quite some time pressing the "run" button in the babylon playground, I have decided I want a simple tool that will show me the changes I am making in real-time.

And here it is - 



This is just a very first 0.001 alpha version. UI can be improved! But, I think people can benefit from such a tool.


I am planning on uploading it to my github soon after I clean it up a bit.


I hope you guys find it as helpful as I do. If you have any questions, let me know. It is pretty intuitive.


Future plans:

  • Image upload to a server
  • Material generation for a babylon scene
  • UI Improvements
  • Change to babylon 2.0 (when it is out of alpha)
  • Upload your own object
  • Change Light properties

If you have any suggestions, with pleasure!


Have a good one!

Link to comment
Share on other sites

Oh wow... wasn't expecting that reaction. Thanks! :-)


@Deltakosh, thanks for the tweet! Maybe a reason to finally use my empty twitter account... If you think the UI is good enough, you can of course put it on the homepage. 


I will anyhow work on adding the source to my github tonight or tomorrow and keep you posted. I am also working on the other features and will update about them here probably.

Link to comment
Share on other sites

I just deployed a new version.

New features -

  • all meshes are now shown and can be selected. Each material can be edited separately. Meshes selected using the select box or with right clicking on them.
  • light can be configured (diffuse, specular, type)
  • UI is now much better...
  • Using babylon 2
  • no longer using dynamic textures. Now creating textures from the images dropped.
  • Enable/Disable for all parameters works much much better.
  • Mirror Texture is now supported
  • Exporting the material to babylon code (beta :-) )

More to come... When I have the time :-)

Link to comment
Share on other sites

Hey there, that tool is really cool and helpful, good job!


Is it already possible to use multi-materials with it? I wanted to play around with it a bit but didn't have time to set things up and try it out so I hoped it might be possible with your editor. I didn't see a button for that yet, maybe it would be a nice feature to add?

Link to comment
Share on other sites

Hi iiceman,

I have already started working on multi-material support yesterday night, I think I'll finish tomorrow. The main problem would probably be the UI to create sub meshes.

@Deltakosh, thanks! Only using your wonderful engine :-) . To add support to cube textures I had to extend the engine (since the engine requires extensions and doesn't support data urls). I don't see a lot of cases where this is needed. I can still add this to the engine at github. Think it'll be a nice addition?

Link to comment
Share on other sites

Ok, took me much less time than expected!

http://my-cac.com/materialEditor/ (and the github) now has two new features:

  • Reflection cube texturing with drag and drop (choose "reflection", enable the texture and press "cube")
  • SubMeshes and SubMaterials. SubMeshes are completly validated so there shouldn't be any calculation mistake. By pressing a button a new SubMesh is added, indexStart is calculated and set. 

SubMaterials are also correctly exported as javascript objects.


As this application is getting bigger and bigger, it is also getting prone to bugs. If any of you find something, please do let me know. 

Next features are add your own mesh and store on server. 

Link to comment
Share on other sites

With pleasure, just let me know how and what you need me to provide. I think the current version is quite what i wanted it to be, apart from storing the material.


I am currently looking into hosting it somewhere else as I am writing a nodejs server application for storing the materials and the current server doesn't really play ball. I have quite some experience with AWS, maybe I should try using Azure for the first time :-) When this is done, I will have a satisfactory "version 1.0".

Link to comment
Share on other sites

Code is commited : https://github.com/BabylonJS/Extensions/tree/master/MaterialEditor

Version 1.0 (beta)  is at http://materialeditor.raananweber.com/ (DNS entry was just changed, so it might take a few hours till it's available)

It is now possible to store materials on the server and share them using the material ID given after it is stored. 

It is also possible to load a zip file containing .babylon scene and textures (I tested with scenes from the examples branch, they work) and then edit the materials of all meshes.


Quirks :

  • Only single texture can be uploaded, no cube texture (for reflection).

Again, if you find a bug, please let me know!

@DK - This is the final link of the editor, you can use it on babylon's page.

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