Jump to content


Recommended Posts


It is possible create similar like in playcanvas orange room example with babylon js?


it use box projected cubemap and pbr shader (fast static cubemap).

an other and similar example with three js (parallax-corrected environment mapping)


I found only in babylon js PBR dynamic texture reflection example but it use simple cubemap and not static so its slow.

Any example and suggestion welcome.




PBRMaterialReflection babylonjs.jpg

orange room playcanvas.jpg

Link to comment
Share on other sites

Hi Temechon,

The problem is when create a room with simple cubemap and use it as reflection map for example for a floor.The simple cube map not fit well, (see the first picture in post) and with box projected or parallax corrected cubemap is looks good (second picture) . In the video you see the problem too when the camera is moving.




and website and pdf paper about this techinc.



or i missed something your link ant possible solve this problem ?






Link to comment
Share on other sites

I'm an artist but can programming some limit so i can't decide this is hard or not  , but i can help with any graphics if need a room demo for this , like in playcanvas demo.

I found a full book for this (planar reflection cubemap:  gpu pro 4 book pdf):




Link to comment
Share on other sites

Well I first tried to make cube map reflections without parallax correcction, and it was not easy.
Not until I realized that I have to remove the reflectionTexture from materials when rendering with reflection probes.
Now it looks like a reflection :)
As long as I am 1 unit far from everything. 
I think I now understand the math but I  dont know how to do it with a shader.

If you look in the wall mirror, it shows the parallax error.
the reflection probe at the camera is not at the surface point.

Edited by BitOfGold
Link to comment
Share on other sites

  • 2 weeks later...


BitOfGold if i understand well you use parallax correction for cubemap? Look very nice! :)

In this three js examples the parallax correction shader is very fast and run well on old mobile phone (chrome/firefox) too.

secular material


with smooth material







Link to comment
Share on other sites

@shater No, sorry, It's fake :)
Only works because the camera is around the same distance from the floor as the size of the reflection probe's camera cube. Reflection probe is at the camera.
(so it is mathemagically parallax corrected :) )

We know the normal at the point of reflection, and need to get point where that normal crosses the reflection probe's cube.
PBR reflections are ony working now, because the reflection texture is infinite far away (like a hdr sky), or the reflection probe is in the middle of the object.

Thanks for the example!
That is the simplest one yet.

I hope I can work on this the next week.


I cannot wait until next week :)

I tried the parallax correction in the @shater 's example above. It works, bit it's far from perfect.
So it's not fake now, the reflectionprobe is in the middle of the room, the "cube size" is about the size of the room.
The reflection probe does not move with the camera now, just sits in the middle of the room.

But... the reflections are a bit "off". They are at the wrong place, and when the probe moves with the camera, they are only good when it is at the middle of the room.

Code (commit in my fork of babylon) is here:

I think I will try other correction methods too, now I have the template.
If someone knows a better function for this, please help :)

Link to comment
Share on other sites


Im not understand well all the code but, on git found the only parallaxCorrectNormal function and other is missing? Seem the remain codes calculate the relative camera position and other normalize the cubemap size?

remain code:

void main()  {
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    pos = vec3(modelMatrix * vec4( position, 1. ) );   
    vec3 correctedTangent = m3( modelMatrix ) * tangent.xyz;
    vec3 binormal = m3( modelMatrix ) * cross(normal, correctedTangent.xyz );
    vec3 normal = m3( modelMatrix ) * normal;  
    tbnMatrix = mat3( normalize( correctedTangent ), normalize( binormal ), normalize( normal ) );
    view = pos - cameraPosition;
    vUv = uv * repeatUV;


void main()  {
    vec3 vVec = normalize( view );   
    vec4 bumpNormal = texture2D( normalMap, vUv );   
    vec3 n = bumpNormal.rgb * 2.0 - 1.0;
    vec3 modifiedTangent = normalize( vec3( n.xy * bumpiness, sqrt( 1. - n.y * n.y - n.x * n.x ) ) );
    vec3 nVec = tbnMatrix * modifiedTangent;
    vec3 rVec = parallaxCorrectNormal( reflect( vVec, nVec ), cubeMapSize, cubeMapPos );
    vec3 env = textureCube( envMap, rVec ).rgb;
    vec3 diffuse = texture2D( diffuseMap, vUv ).rgb;
    vec3 specular = texture2D( specularMap, vUv ).rgb;
    vec3 dN = parallaxCorrectNormal( nVec, cubeMapSize, cubeMapPos ).rgb;
    vec4 diffuseColor = ( 2. / sqrt( length( dN ) ) ) *  textureCube( envMap, dN );
    gl_FragColor = vec4( diffuse * ( 0. * diffuseColor.rgb + 1.5 * env ), 1. );

Link to comment
Share on other sites

OK, but first I have to find a solution to correct the reflections.
I tried "spherical" parallax correction., but it was worse than this "box correction".
Still I cannot find better than this.

Playcanvas uses this same projection:
So I think it is the right correction, with some error :(

Link to comment
Share on other sites

  • 2 weeks later...

@shaterSorry, no better version than this.
It's working but not perfect.

Reflections are perfect in this example:

The room's scale is matching the parallax box size, and camera position can change from middle of the box, and reflections are still perfect.
In my code the only scale that works is when cube box size is 29x29x29m (room size is 17x3m)

So no progress, sorry.
I feel that I'm near and there is only one error...
I hope anyone else sees what is wrong, or can make a better correction.

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