StandardMaterial gloss maps and reflections

[Aranda]

Is it likely that there will be a gloss map added to the standard material? We're prototyping a move from Unity5 Standard pbr shader (Specular workflow) to BJS and in Unity we put the "glossiness" map in the Specular texture's alpha channel. This glossiness controls the specular power per pixel but also is used as a mip bias when sampling the reflection texture (giving a lovely blurred reflection look). It'd be great to see these features in BJS!

 

While on the topic of reflections... if I load a cube map for the sky reflections, presumably I can go through all StandardMaterial in the scene and set it as the reflectionTexture?

 

Does BJS have a concept of Reflection Probes? That's another feature in Unity that would be nice in BJS!

[jahow]

Hi,

 

BJS uses what is called a MirrorTexture to simulate reflections. The concept is somewhat similar to reflection probes, as this texture is a rendering of the scene from a different point of view and with lower resolution. Although if I understand correctIy, a ReflectionProbe is able to produce a CubeMap of its surrounding, which the MirrorTexture is not yet able to do. I can't tell you much more though, as I haven't actually used it myself.

 

Documentation is here: http://doc.babylonjs.com/page.php?p=22161

 

As for the gloss map, there is already an active suggestion that may encapsulate this feature: http://babylonjs.uservoice.com/forums/267546-general/suggestions/7331198-metallic-workflow-pbr

 

Or you can add another one

[jerome]

and don't forget his cool tool by Raanan : http://materialeditor.raananweber.com/

[Wingnut]

http://playground.babylonjs.com/#SBTYP#1  purrrrdy

Oh, we're talking mirrors?  http://playground.babylonjs.com/#2EP7UB

Mirror mirror on the wall, who makes the goofiest playgrounds of all?  http://playground.babylonjs.com/#QSFNK#1

(Just some stuff to play with, as wanted) 

[GameMonetize]

I'm totally open to add glossiness support. How do you think you can use it like having another texture? or forcing the user to use specular map (which we have) alpha channel?

 

Describe me your wish

 

 

what is reflection probe?

[jahow]

I think using the alpha channel of the specular map (A) is a great solution and simple to implement. Although adding an optional glossTexture parameter (B ) in the StandardMaterial might be a nice addition too, since people may already have separate reflection and gloss maps for their meshes and may not want/know how to combine the two.

 

So for me adding (A) is the priority, and (B ) can be made by the community

 

A reflection probe in Unity is a specific type of camera that renders what's around it in 6 textures forming a cubemap. This cubemap can then be used for reflections on meshes, just like the reflectionTexture of the StandardMaterial. The cubemap can be refreshed dynamically or baked at edit time.

[NasimiAsl]

i have  idea for material .it fix all problem . but i cant share it right now. i try to make some framework for this .i dont know how can i marge it with babylonjs class but it work fine with babylonjs.

 

how can tell this idea and have copyright .

 

in this way you have 

 

color replace material

range material

effect  

marge 

light

frensel  bump and all we needed

 

i called eash: easy shader

 

http://eash.space/preview?glass_alpha.0.00003#debug

 

is a glass with reflect

[jahow]

Hey NasimiAsl,

 

Since JS code is open source by nature, publishing your website means sharing! On the other hand, you have quite a lot of code in your scene.

[NasimiAsl]

Dear jahow

 

i know about that ,this code for  more reason (one is  material) and is unbeautifully code for this sample( need refactor) but i want publish it in  Open source license.

it maybe change babylonjs material structure.

 

so i think  i can release the Js version Like Eashjs and Import  it in to Babylon js Like cannonjs but i dont know how can i presentation this product for babylonjs.

 

believe me after have this anyone  can material anything in a min without any tools and just write short code.

[GameMonetize]

You can create your own material object  but when it comes to copyright protection it will be tough as you will have to give .js to users

[GameMonetize]

Back to the topic:

- Glossimap as specular level will be done soon

- I like the reflection probe idea..I added it to the roadmap

[GameMonetize]

BOOM: StandardMaterial.useGlossinessFromSpecularMapAlpha to use specular map alpha as glossiness level (In the next commit)

 

This glossiness value controls the specular level of every pixel

[GameMonetize]

Can I ask you if you have a specular map with glossiness in it? I would like to test if I can use it to control the mip bias of the reflection texture

[Aranda]

BOOM: StandardMaterial.useGlossinessFromSpecularMapAlpha to use specular map alpha as glossiness level (In the next commit)

 

This glossiness value controls the specular level of every pixel

 

Wow, that is awesomely responsive. Thank you!.

 

Did you also do anything with the mip bias when sampling the cube map? This is a pretty nifty feature of Unity's shader, although to get it to look right you really need properly filtered cube maps to avoid edge seams in the mipmaps (like what ATI's Cubemapgen does, and Unity does with it's reflection probes).

 

 

I think using the alpha channel of the specular map (A) is a great solution and simple to implement. Although adding an optional glossTexture parameter (B ) in the StandardMaterial might be a nice addition too, since people may already have separate reflection and gloss maps for their meshes and may not want/know how to combine the two.

 

So for me adding (A) is the priority, and (B ) can be made by the community

 

A reflection probe in Unity is a specific type of camera that renders what's around it in 6 textures forming a cubemap. This cubemap can then be used for reflections on meshes, just like the reflectionTexture of the StandardMaterial. The cubemap can be refreshed dynamically or baked at edit time.

 

Agree on all points. To add to that, the reflection probes also define a box shaped region of influence. Unity's MeshRenderer component has a mode for how it selects which cubemap(s) it uses. These modes include "Blend sky + probes", "Blend probes" and "Simple", which I think just grabs the closest reflection probe. I've only used the pre-baked probes for specific reflections on static shiny objects so far.

 

Unfortunately I can't provide you with a texture that has specular colour + glossiness in the alpha channel as my employer would not allow it.

[iiceman]

That sounds pretty cool but I can't really imaigne how it will look yet. Can't wait for a playground to see the glossiness in action

[RaananW]

BOOM: StandardMaterial.useGlossinessFromSpecularMapAlpha to use specular map alpha as glossiness level (In the next commit)

 

This glossiness value controls the specular level of every pixel

 

Boom! :-) If only new features could always be added with a bang...

[GameMonetize]

For the mip bias I need a sample texture. Do you have that?

[GameMonetize]

I'm not a graphist But if you provide me a sepcular map with glossiness info in alpha channel, I'll try to make the mip bias work for reflection

[Aranda]

Hey, sorry for the delay! I've attached some textures (diffuse, normal, spec/gloss and ao as well as a cubemap with mip edges fixed.

 

You should be able to see in the spec map alpha channel that there is a fairly bright section near the top right, which should show up as "shinier" than other areas, or with a less blurred reflection.

BabylonJSTestTextures.zip

[GameMonetize]

But there is no alpha in your specular map (it is a bmp file )

[Aranda]

It's a 32 bit BMP file - they can have alpha channels too! Notice that it is 33% larger than the other BMP files. I've attached a PNG version in any case.

[Aranda]

It's a 32 bit BMP file - they can have alpha channels too! Notice that it is 33% larger than the other BMP files. I've attached a PNG version in any case.

[Aranda]

Oops - that last PNG had no alpha! (damn I hate the way Photoshop handles PNG files). Try this one instead.

[GameMonetize]

Perfect! thanks!

[ozRocker]

I'm trying to make a car with glossy material but I can't get it working.  Can someone help me out here?

I'm using a texture which is just white and 70% opaque, saved as .PNG.  I read that the alpha controls the glossiness level.

 

This is my code:

meshChassis.material.subMaterials[1].specularTexture = new BABYLON.Texture("assets/trans.png", scene);meshChassis.material.subMaterials[1].useGlossinessFromSpecularMapAlpha = true;

My red car still appears with a matte texture though.  The mesh, material and submaterial is all correct 'cos I've used that elsewhere to change the diffuse colour.

 

Edit: I tried the PNG that Aranda posted above.  I can see it loaded and makes part of the car more shiny, so loading spec texture and applying it does work.  I just don't see any glossiness