efxlab

export to DDS file for babylonjs environment

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by efxlab

Share this post


Link to post
Share on other sites
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 !!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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"

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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"

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.