solved export to DDS file for babylonjs environment

[efxlab]

Hey !

What is software for convert my hdr or exr images environment from substance painter to DDS for babylon ? any idea ? Iam on macOS.

thanks

[JCPalmer]

While DDS may work for an intel based MacBookPro, conversion tools may not.  First double check what extensions are supported for your environment.  You might also run this to see what compressed format gets picked for your machine.

Remember, this is the web.  What will work on one computer, will not on another.  DDS for sure will not work on Android, iOS.  DDS is also very old.

While you may explicitly use DDS with BabylonJS, using ktx containers will allow your page to pick the appropriate compressed texture format.  The doc is here, although I seem to remember a previous topic which had a problem with conversion tools on OSX.

[efxlab]

Thanks JCPalmer, like BabylonJS are using DDS format for environment in their examples, I though the only way. Iam surprised that these babylonJS (like the viewer) are based yet on DDS ?

[efxlab]

its maybe more compatible to use 6 jpg skybox images instead ? Iam trying to implement in viewer here the post : 

 

[Xav]

Look at this https://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-dds-environment-file-from-an-hdr-image  at the end and

https://github.com/derkreature/IBLBaker .

[efxlab]

Hey Xav, thanks for your post, Can you confirm that dds environment file  is not a problem for multiplateforme viewing experience ? same for android and iOS phone ?

 

[efxlab]

I tried to export a DDS environment file for babylonis viewer with cmftStudio (an multiplateforme equivalent to IBLBaker),

but I got an codec error I think: Unsupported FourCC code: "DX10"

it would like welcome to have more info about DDS file and BabylonJS

[efxlab]

I found ! I go with a tool called cmft, any unix commande line:

https://github.com/dariomanesku/cmft

Its too tricky to do with GUI app cmftStudio.

I used PVRTexToolGUI.app from by PowerVR for inspect the babylonjs dds file used in demos.

Finally this a batch type for convert HDR image for babylonjs viewer in dds: 

#!/bin/bash

# 8bits 256x256
cmft \
--input ~/Desktop/cmft_osx64/bonifacio_aragon_stairs.hdr \
--dstFaceSize 256 \
--output0params dds,BGRA8,cubemap \
--generateMipChain true \
--output0 ~/Desktop/cmft_osx64/bonifacio_aragon_stairs

# 16 bits 256x256
cmft \
--input ~/Desktop/cmft_osx64/bonifacio_aragon_stairs.hdr \
--dstFaceSize 256 \
--output0params dds,rgba16f,cubemap \
--generateMipChain true \
--output0 ~/Desktop/cmft_osx64/bonifacio_aragon_stairs

# 16 bits 512x512
cmft \
--input ~/Desktop/cmft_osx64/bonifacio_aragon_stairs.hdr \
--dstFaceSize 512 \
--output0params dds,rgba16f,cubemap \
--generateMipChain true \
--output0 ~/Desktop/cmft_osx64/bonifacio_aragon_stairs

Edited January 21, 2018 by efxlab

[Xav]

Yes they work for me !

Try with these link:

http://studio-ramble3d.com/robot

or  https://www.babylonjs.com/demos/pbrglossy/ 

it both uses an environment with a .dds texture.

 

[BohuTohu]

On 20 janvier 2018 at 10:48 PM, efxlab said:

I found ! I go with a tool called cmft, any unix commande line:

https://github.com/dariomanesku/cmft

Hello Efxlab…

Sorry ! I'm “like a chicken who found a knife” but how do you use cmft when downloaded on MacOS and your command lines.

I learnt many things about BabylonJs for last months but converting HDR to DDS is a too big challenge for me and my Mac environment !!

[efxlab]

You run from mac terminal, you can drag and drop the cmft exe file, and copy the text above for setup your image for exemple :

# for create a 16 bits 512x512 :
path/to/your/cmft \
--input path/to/your/hdr/bonifacio_aragon_stairs.hdr \
--dstFaceSize 512 \
--output0params dds,rgba16f,cubemap \
--generateMipChain true \
--output0 export/to/bonifacio_aragon_stairs

 

change lines : path/to/your/, path/to/your/hdr/, export/to/ to your own path

[olsibob]

@efxlab thanks for posting about cmft, that's a great find.

One issue I have though, is that when I try to use the sandbox to convert the dds file to a BabylonJS env file using the converter here https://sandbox.babylonjs.com/?assetUrl=https://models.babylonjs.com/PBR_Spheres.glb , I get an error  "The cube texture should allow HDR (Full Float or Half Float)." even though I've selected rgba16f as the output format for cmtf. Looking at the source for the tool https://github.com/BabylonJS/Babylon.js/blob/9d6f4db1e205c72ad58dc8168dda72ccda2ac3e3/src/Tools/babylon.environmentTextureTools.ts#L144 , it seems it thinks the pixel format is uint, rather than float.

[Sebavan]

yup it would mean the dds does not contain half or full float. Could you share the dds file with me ? (I can check what is inside)

 

[olsibob]

Hi @Sebavan this is the dds file. It was created with the settings 

--dstFaceSize 256 --output0params dds,rgba16f,cubemap --generateMipChain true

It could be a bug in cmft of course

Mono_Lake_B_Ref.dds

[Sebavan]

You need to use a browser supporting Half or full float which does not sound to be the case.

Here is your converted file from the sandbox:

mono_lake.env

[olsibob]

@Sebavan lol, that will teach me to use Safari! The conversion works fine for me in Chrome. (it's weird though that in Safari, the dds did display correctly in the spheres' reflections) Thank you for doing the conversion for me and troubleshooting the issue.

[olsibob]

I can't seem to get the .env file working in BabylonJS though. The DDS file works fine using 

sky.reflectionTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("assets/textures/Mono_Lake_B_Ref.dds", scene);

It also works on iOS Safari (I think I read somewhere that dds files didn't work on iOS?)

But when I try the same code with the .env file, no texture loads and I get the console log "Cannot load cubemap because files were not defined"

[Sebavan]

DDS files uncompressed work evrywhere as we are parsing them in js, but it is true that compressed DDS do not have support cross platform.

About your .env, you should be able to load them with sky.reflectionTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("assets/textures/Mono_Lake.env", scene);

[olsibob]

1 hour ago, Sebavan said:

DDS files uncompressed work evrywhere as we are parsing them in js, but it is true that compressed DDS do not have support cross platform.

About your .env, you should be able to load them with sky.reflectionTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("assets/textures/Mono_Lake.env", scene);

Yeah, when I try that I get "Cannot load cubemap because files were not defined"

[Sebavan]

You can see a working version here: https://www.babylonjs-playground.com/#09R6ZA#1

Are you sure your server is authorizing .env to be served ?

[olsibob]

2 minutes ago, Sebavan said:

You can see a working version here: https://www.babylonjs-playground.com/#09R6ZA#1

Are you sure your server is authorizing .env to be served ?

Oh, maybe not. My dev environment is webpack-dev-server --> localhost. Is the authorizing process documented anywhere?

Thanks for the playground link, looks good in Chrome, but the gamma seems to be off in Safari.

[Sebavan]

Ohhh I ll check ASAP

[Sebavan]

I can repro the issue on Safari I will fix it ASAP. Thanks for reporting.

[Sebavan]

This is because you are using a standard material and not pbr material. (only pbr supports env format).

The second parameter of the skybox helper has been added for this:

https://www.babylonjs-playground.com/#09R6ZA#3

[olsibob]

The skybox looks a lot better in safari with that second playground you posted.

When you said

Quote

Are you sure your server is authorizing .env to be served

Does this mean I need to supply a mimeMap for .env? Currently I'm building my babylonJS app as a static site using webpack. I'll experiment with using a package like https://www.npmjs.com/package/mime to add a mapping for .env. Any pointers you could give me on this would be very much appreciated.