solved Render color outside [0..1] range

[PeapBoy]

Hello BJS community ! 

I just began to understand HDR textures, gamma correction and so on in order to learn how to do IBL.
In this process, I used BABYLON.HDRCubeTexture to convert my equirectangular HDR texture to a usable environment HDR cubemap, as explained here.
Then, I need to apply a convolution on this cubemap to obtain my final irradiance cubemap that I will sample during IBL.

To compute my irradiance cubemap from the environment cubemap, I use a RenderTargetTexture.
Until there, everything works fine !

In the above tutorial link, the guy uses OpenGL and doesn't matter about having output color exceeding [0..1] range. It's useful to keep HDR textures until the last step where he will tone map its result.
I learned the hard way that it's not as simple with WebGL.

When I store color outside [0..1] range and then sample this result in another shader, result has been clamped between [0..1] range.
This stackoverflow question taught me that not only I need to use a floating point texture but also I have to render to a floating point frame buffer. Or something like that, I never dived into pure WebGL code.
To render to a floating point frame buffer, I need to enable the EXT_color_buffer_float extension (only available with WebGL 2), but it doesn't seem to be enough. I think I also need to configure the framebuffer with pure WebGL code.

So, my question is:
Is is yet possible to render color outside [0..1] range using BabylonJS at this time ? How ?

If this not ready yet, I'll normalize and denormalize data at each step of course. But I would love to know if doing it in the ideal way is possible.

Thank you a lot in advance ! 

[Guest]

Good news: it is supported ;D

https://github.com/BabylonJS/Babylon.js/blob/master/src/Engine/babylon.engine.ts#L5458

You can just ask bjs to create a float rendertargettexture like this:

var tex = new BABYLON.RenderTargetTexture("depthMap", { width: 256, height:256 }, scene, false, true, BABYLON.Engine.TEXTURETYPE_FLOAT);

 

[Pryme8]

Oh my, I have needed to know this forever and just never thought to ask... wow thanks @PeapBoy

[PeapBoy]

Thanks for quick answer as always ^^

Well I'm quite sure that's what I did.

And that's exactly why I was wondering about this range question !

Because when I sample this renderTargetTexture in the next shader, it has been mysteriously clamped to [0..1] !

But I'll confirm this tomorrow morning when I'll get my computer back.

[Guest]

Let me know

Also you should try Spector.js to debug your webgl shaders: http://spector.babylonjs.com/

[PeapBoy]

Hi !

That's my code:

_this._irradianceMap = new BABYLON.RenderTargetTexture(name, _this._mapSize, _this._scene, false, true, BABYLON.Engine.TEXTURETYPE_FLOAT, true);

I always use floating point textures when it's possible. I thought it was enough but the above link says I also need to configure the frame buffer to expect floating point values or it will clamp the values to [0..1] even if the texture is a floating point texture.
I always thought that the frame buffer data and the final texture were quite the same thing, so I'm confused.

Though, this playground shows you're right for 2D textures ! HDR values are not clamped ! I'll try to make another PG with cube textures and see if I can reproduce my issue  
Final BLUE color means values have been clamped. Final GREEN value means values haven't been clamped.

I already installed Spector.js extension for a while but I didn't manage to make it work in my apps, I should use it directly in code. (It works great in playground though ^^)

[EDIT]

Here is the playground for cube textures !

It's a bit difficult to understand as I copy paste a prototype of my app without removing what is useles for this PG. The only thing to look here is the shaders above which store big values and try to get them back.
Final BLUE color means values have been clamped. Final GREEN value means values haven't been clamped.
And this time, it's blue. 

I'm pretty sure I do something wrong but I don't know what.

[EDIT 2]

I just found that my final cube texture has a textureType UNSIGNED_INT instead of FLOAT, even if I specify BABYLON.Engine.TEXTURETYPE_FLOAT in the RenderTargetTexture. I think that's why my values are clamped.

[EDIT 3]

It seems to work when I replace gl.UNSIGNED_BYTE by gl.FLOAT in the BABYLON.Engine.CreateRenderTargetCubeTexture() function. Any reason for having hard coded UNSIGNED_BYTE for cube textures ?

[Guest]

No good reason

Please do a PR to fix that  (based on the same model as regular renderTexture)

 

Thanks for the investigation

[PeapBoy]

I would love to but I can't compile Babylonjs anymore, I have an error every time I run "gulp typescript"... Even when I didn't make any change.
So it'll will take a little bit longer.

[EDIT]
Actually, I don't understand why I can't compile BJS, maybe you'll have any idea?
I opened a question here.

[PeapBoy]

Done 

https://github.com/BabylonJS/Babylon.js/pull/3715

[Guest]

just a tiny update and I'll merge

thanks a lot!