WebGL and JS basis transcoder - can't read the basis file correctly compressed with -separate_rg_to_color_alpha flag

[evanwong]

I am testing a .basis file we compressed/encoded from a png file and we are using webgl and the js transcoder. ./basisu -normal_map -mipmap -mip_smallest 4 -separate_rg_to_color_alpha desk.png

The document mentions

The internal texture format that Basis Universal uses (ETC1S) doesn't handle tangent space normal maps encoded into RGB well. You need to separate the channels and recover Z in the pixel shader using z=sqrt(1-x^2-y^2).

I am not able to find an example of how to do this part. I am running the webgl example server from this repository and it looks like the basis file is not the same as loading the png. And I suspect it is because missing the last part "You need to separate the channels and recover Z in the pixel shader using z=sqrt(1-x^2-y^2)".

From the webgl "/texture" page, if I put in the basis file, it will show the texture without background color in "Alpha Blend" mode and a grey background with texture color in "RGB" and "Alpha" mode. If I compare with the png file using the "/encode_test" page, the png file will show the purple background in "Alpha Blend" and "RGB" mode with the texture. But not showing anything at all in the "Alpha" mode.

It looks like I have the right output data already just not sure how to do the last part to "separate the channels and recover Z".

Png file we are testing: https://storage.googleapis.com/publictesting/desk.png Basis file we are testng: https://storage.googleapis.com/publictesting/desk.basis

Any help is appreciated! Thanks!

[richgel999]

"It looks like I have the right output data already just not sure how to do the last part to "separate the channels and recover Z".

OK - first I'll validate that your texture is compressing/transcoding correctly. I will find you an example on how to recover Z.

[evanwong]

That will be great! Thank you!