Jump to content

Glossiness and roughness


Recommended Posts

Hey team!


I've just checked in new toys :)


First we now support roughness on StandardMaterial: this parameter (between 0 and 8 or so) controls the sharpness of the reflection texture:



try to play with values from 0 to 3 as the cube texture is not enough precise to support more.


Then, we have support for glossiness map (inside the specular map alpha channel):



And then, you can mix glossiness and roughness to create wonderful rendering:



(My only problem here is that my textures suck :))


As you can see in this example, the sphere reflection is sharper where specular is more powerful. Cool isn't it?


Link to comment
Share on other sites

  • 1 month later...

I was playing around with it a bit. This is a very nice feature.

But i have a problem. On my desktop system i can see a pixelated border between the cube map images.

With bigger roughness values it gets more visible. Adding a bump map to the material makes the pixelation problem even worse.

Here a screenshot from your demo:



On my IPad with the Safari browser the borders are not pixelated but also clearly visible:




Maybe it would be better to use a single image as reflection map. An equirectangular map for example.

Link to comment
Share on other sites

Yes this comes from WebGL itself.


There is an extension to remove the seams:GL_TEXTURE_CUBE_MAP_SEAMLESS


some interesting readings:



Link to comment
Share on other sites

It should work with reflection texture set to Spherical


Doesn't seem to work. The mapping is not correct and the roughness parameter has no effect anymore.

It always looks like roughness = 0;

I load the texture like this:


var tTexture = new BABYLON.Texture("content/env/1.jpg", scene);

tTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE;

Link to comment
Share on other sites

Too bad roughness is only in Cycles, diffuse. AFAIKT


I don't understand what you mean with Cycles. (the Blender renderer?)


The roughness is working with a CubeTexture at the moment but not with a normal Texture.

Here you can see the 2 issue: http://www.babylonjs-playground.com/#TKOGW

Roughness is not working and the mapping doesn't look like spherical mapping at all.

Link to comment
Share on other sites

Roughness only works with cube map unfortunately :(


:(  maybe i can pre-filter the map my self somehow.


What about the spherical mapping? Is it a bug or is it the intended behavior?

It doesn't look spherical at all to me at the moment :huh:


I would prefer to use a single reflection texture.

Requesting one texture from the server is more efficient than requesting 6 for a cube map.

Link to comment
Share on other sites

The only other common way i now to represent a full 360° view are angular maps like this:




But if i use this with the Texture.SPHERICAL_MODE i get this:




I really have now idea how to realize a  full 360° reflection with the Texture.SPHERICAL_MODE. :(

Link to comment
Share on other sites


Hmm not really. :)

While rotating the view, the reflection on the sphere is not changing.

So, Babylon.js supports simple spherical mappings at the moment. With this you can create thing like this:

http://www.clicktorelease.com/code/spherical-normal-mapping/#   (takes a while to load sometimes)

I think this will be ok for my use case. ... thanks for the fix :)

But what is still missing are full 360° reflections. This would be a new coordinate mode i think.

Equirectangular maps (and angular maps) are both full 360° views. The result should be the same like using a cube map.

Look at this example: http://threejs.org/examples/#webgl_materials_envmaps  (click on Equirectangular in the top right)

Link to comment
Share on other sites

god damm, now to use it :)


something just came to mind... (hopefully this makes sense)

if my scene had two rooms in it and i wanted to set a reflection texture for each room

is it possible to change the position in space where the coordinates mode generates the coordinates?


for example:


what if i wanted the center to be on a different torus instead of the one in the middle... can i change that?

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