Glossiness and roughness

[GameMonetize]

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:

http://www.babylonjs-playground.com/#RNBKQ#9

 

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):

http://www.babylonjs-playground.com/#RNBKQ#10

 

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

http://www.babylonjs-playground.com/#RNBKQ#8

 

(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?

 

[GameMonetize]

Better demo: http://www.babylonjs-playground.com/#VP3VZ#5

[Kesshi]

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.

[GameMonetize]

Yes this comes from WebGL itself.

 

There is an extension to remove the seams:GL_TEXTURE_CUBE_MAP_SEAMLESS

 

some interesting readings:

https://code.google.com/p/chromium/issues/detail?id=479753

http://stackoverflow.com/questions/8452809/seamless-cube-maps-on-opengl-es-2-0-using-ios/8453078#comment18872380_8453078

[Kesshi]

Ah ok.

Does Babylon.js support equirectangular maps? like this:

https://c1.staticflickr.com/7/6061/6053313212_1030f2bbc9_b.jpg

If not, is it a planned feature?

[GameMonetize]

It should work with reflection texture set to Spherical

[Kesshi]

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;

[JCPalmer]

Too bad roughness is only in Cycles, diffuse. AFAIKT

[Kesshi]

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.

[GameMonetize]

Roughness only works with cube map unfortunately

[Kesshi]

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

 

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.

[GameMonetize]

Actually I thought equirectangular was like spherical but this is not the case

 

SO can you use a spherical texture instead?

[Kesshi]

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.

[jessepmason]

I was in the same boat and I couldn't figure it out either.....doesn't help any but letting you know your not the only one

[GameMonetize]

ok let me try to understand what is not working I keep you posted

[GameMonetize]

Problem fixed: http://www.babylonjs-playground.com/#27FN5R#3

[jessepmason]

hmmm i imagened spherical mapping would work like this:

 

http://www.3dmax-tutorials.com/graphics/il_mod_uvw_map_spherical-2.jpg

 

with a equirectangular map? atleast I was hoping that way you get the full 360 lat lng image onto the sphere/object

[Kesshi]

Problem fixed: http://www.babylonjs-playground.com/#27FN5R#3

 

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)

[jessepmason]

gotchya!

awesome stuff

[GameMonetize]

@Kesshi: The initial ask was for spherical mapping support. So yes it is fixed

[GameMonetize]

And now adding support for equirectangular:

 

http://www.babylonjs-playground.com/#27FN5R#8

 

Tadammmm! ;D

[Kesshi]

awsome!

You are very fast

[GameMonetize]

Thanks

[jessepmason]

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:

http://www.babylonjs-playground.com/#27FN5R#9

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

[GameMonetize]

Hum this was a bug, now your PG works better:

http://www.babylonjs-playground.com/#27FN5R#9