The Babylon.js Materials Library

[Luaacro 177]

Hey hello the community !

 

It's time to present the materials library of Babylon.js !

Deltakosh created a tool that allows us to create and test our own materials !

 

The materials library can be found in the Github repository here: https://github.com/BabylonJS/Babylon.js/tree/master/materialsLibrary

It explains the build process and provides a template of code for your materials.

 

The goal is to provide extra materials that you can include in your projects, only by including the related JS file. Indeed, the JS file also contains the shader's code 

 

The library already contains 2 materials:

- Fire material

- Water material

 

The water material playground : http://www.babylonjs-playground.com/#1SLLOJ#6

The fire material playground : http://www.babylonjs-playground.com/#21IIM9

 

By hoping some of the community will fill the library with awesome materials, have fun !

 

Luaacro

[davrous 503]

Awesome work little Padawan. We're proud of you.

[gryff 522]

Love that fire/flame material

 

cheers, gryff

[iiceman 314]

That's crazy cool! Both the flame and the water (even with waves!!) look awesome. have to make something to try that out myself... not sure what yet, but the ideas are already coming So, good job as usual! Can't wait to see what other materials might be created soon.

[jerome 1734]

Überkiff (c'est la semaine !)

 

Fantastic feature... still in the motto : simple and powerful. 

2 LOC and you've got some flowing water... just amazing !

[JohnK 991]

Wow terrific. Will carry on having a play around with shaders and see what happens.

[Luaacro 177]

We are really happy that you like it !!! Can't wait to see the future materials !

Another water demo more realistic : http://www.babylonjs-playground.com/#1SLLOJ#10

[iiceman 314]

Is there a way to set the speed with which the waves move?

[davrous 503]

Great you're loving it guys! I hope it will bring you some ideas of new effects

I'm convinced this new toy has a lot of potential!

[Luaacro 177]

@iiceman, just added the feature. Thanks a lot for the feedback !

Waves are now influenced by the windForce and the WindDirection

[EJanuszewski 4]

That water is so realistic it makes me seasick 

[iiceman 314]

Sooo... if I want to make a star gate like portal using the water material... I tried something like this: http://www.babylonjs-playground.com/#1SLLOJ#13

 

Thats pretty cool and it is pretty much what I want... but is it now possible to set the specular color of the water material instead of having to set it for the light? I tried setting specularColor but it didn't seem to have any effect on the material.

[jerome 1734]

do you know CreateDisc() instead of CreateSphere() scaled at y = 0.01 

[iiceman 314]

Yeah, I remember that... learnt that not too long ago tho... but I want the surface to be a bit curved I think (good excuse, eh? )

[jerome 1734]

arff

I think the uvs won't fit your need with the Disc anyway

[Luaacro 177]

Hey @iiceman,

 

Going to add specular color to the material 

[david028 1]

What would be the best way to use materials like this with a Blender scene export workflow?

[Luaacro 177]

Specular color was added to the water material

 

david028, you should name your objects in your Blender scene and write in your code :

// Lava material for examplevar lavaMaterial = new BABYLON.LavaMaterial("lava", scene);// For examplevar ground = scene.getMeshByName("groundLava");ground.material = lavaMaterial;

[iiceman 314]

How come the lava material is not available in the playground? Am I doing something wrong here: http://www.babylonjs-playground.com/#MY1SZ ?

[Temechon 677]

Only fire and water material are currently embedded in the playground. We will have to wait for DK next update to access lava and normal material.

[iiceman 314]

okily dokily

[Deltakosh 4315]

Nope:) there were an issue with your playground:

http://www.babylonjs-playground.com/#MY1SZ#1

 

all materials from library are available in the PG

[Deltakosh 4315]

But we need doc for new materials (@temechon )

[Temechon 677]

The doc is ready, I just need to push it

[Deltakosh 4315]

Sounds like a good news