Jump to content

BabylonJS in-browser Material Editor


Recommended Posts

Somehow I can't get the multi-materials work with your editor as I want to. I tried to make a cube with 6 different colored sides. Therefore I added 6 sub meshes with 6 vertices each. I can now color one side if I use the material index, but when I want to switch to the next side it doesn't seem to switch. The next material index is selected but I still the color of the first side on the diffuse panel. If I change that color again I only change one side of the cube. So I can't get to the other 5 sides. Am I doing something wrong here or could that be a bug?


By the way, in the console I get: "GET http://materialeditor.raananweber.com/application.min.js.map 404 (Not Found)", could that be related somehow?

Link to comment
Share on other sites

What forgetting a small variable can do to the entire application :-)

Fixed, I am deploying the new version right now. The problem was in the index.html. All works now :-)


Regarding the missing map file - the chrome console is trying to download a map file for each .js file it is trying to debug. The file is not there, since it is for dev reasons. Shouldn't be a problem :-)

Link to comment
Share on other sites

Sweet, thanks! Seems to work pretty good and easy now.


One question by the way: When I divide the mesh (the cube) into 6 sub meshes and rotate the camera around, sometimes single sides of the mesh disappear. I think it happens as soon as one fo the other objects is partially in front of the camera. Why does that happen?

Link to comment
Share on other sites

  • 5 months later...

Hi Raanan... thanks for all your work on the Material Editor, and for donating it to the BJS team.  Very cool!

Iceman currently has an issue in a new thread... that could use the ME, and I decided to visit it again and see if I could use it to test Ice's issue.

But, ever since the first day... I've had problems getting textures into the editor.  I have never gotten a successful texture drag'n'drop with IE or FF.

Here is a CORS-clear image I once used in a playground: https://upload.wikimedia.org/wikipedia/commons/5/51/Army-officer-icon.png

Here is the playground that I used it in:  http://playground.babylonjs.com/#1215MA

In FF, I put the image in a 'restored' (small) window.  I have the ME in a window alongside.  Then I drag the image over the 'Drop Image Here' area, and I get a unique box icon before the drop, and then I do the drop, and nothing happens.

In IE, it's exactly the same, except when I do the drop, IE shows ONLY the image in the entire window, overwriting the ME page.

Would you have any words of enlightenment for me?  Is there some documentation that would fix me?  Thanks!


Maybe later, adding a link or search field... to a Google image search for labeled-for-reuse images... that opens the results in a new window... might be handy for the ME. 


Lots of parameters in that URL... sorry.  Ideally, though, this Google image search field or button feature for ME.... would ONLY return CORS-cleared (labeled for reuse) images.  I don't know if it's possible, but being able to find CORS-clear images... quick and easy... seems like a nice feature for the ME.  There may be other search engines that can do this, too.  I do not mean to single-out or promote Google search... it's just the one I use.

Thanks again for your ME work, and for thinking about my issue, and for considering the Google re-usable image search feature.  And thanks for all the other excellent things you do for the forum and framework.  Nice job!  Be well.

Link to comment
Share on other sites

Hi WIngnut,


I just checked with both FF and IE - I could drag and drop the image just fine. But that doesn't mean it is working. It means it is working for me (which is the number 2 reply to "your code doesn't work". Number one would be "oh, that's odd!").

It is possible that something is wrong with the UX. It sounds to me like you are dropping the image in the wrong place, or that some JavaScript/CSS doesn't load/run correctly. 


I have to say - I had big plans on updating the editor. I still do, I just can't seem to find the time to do it.

I wanted to completely redo the UI, add procedural textures, make loading and saving a bit better, allowing image selection and not only drag-and-drop. Adding some interface to the google image search would actually be an amazing feature. You search, get the image you need and - tada! I wanted to do it with filter forge. I actually did something similar in a commercial product I have been working on, I'll see how easy it is to open source it  :D


It's on my todo list! If you or anyone else have other suggestions to the material editor, please let me know. I will soon find some time to revamp the thing. 

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