AlphaBlendModeTest.gltf does not pass test

[cx20]

Model : https://cx20.github.io/gltf-test/tutorialModels/AlphaBlendModeTest/glTF/AlphaBlendModeTest.gltf

Rn.VERSION "version: 0.1.5-326-g5607-mod branch: master"

┆Issue is synchronized with this Wrike Item

[KaYaF]

Only the "Cutoff Default" pattern is incorrect on the Rhodonite of version: 0.2.3-499-g4cc1-mod branch: master.

[cx20]

I tried this model again with the latest version of Rhodonite. However, Test results seem to be different depending on the setting of glTF Load Option.

@KaYaF Is this usage correct?

Rn.VERSION "version: 0.2.3-530-gc6e74-mod branch: master"

[KaYaF]

@cx20 Yes, the usage is correct. When the autoResizeTexture is true, the Rhodonite resizes the texture if the long side of the input rectangular texture is longer than Config.maximizeLimitOfNonCompressedTexture. This option supports png format.

I confirmed the same bug on the Rhodonite "version: 0.2.3-539-g46f8-mod branch: master". I will check the detail later.

[KaYaF]

memo: The cause may be drawImage method in __getResizedCanvas method at Texture.ts. This method translates the resolution of the image.

Both of the above images are RGB colour. The alpha is ignored. The left image is the original image(before applying drawImage). The right one is the png image of a canvas to which drawImage is applied. Part of the image is missing.

[cx20]

@KaYaF Thank you for telling me what the problem is. I was wondering why there are two check marks on the left side of the image, but the Inspector feature in Babylon.js helped me understand a little better. If I ignore transparency, a second check mark seems to appear.

R	G	B	A

[cx20]

I also tried it with BIMP. This was more colorful and easier to understand.

disabled alpha	enabled alpha

R	G	B	A

[KaYaF]

@cx20 Good. My images are created with the same software. The resolution of my right image is low because I applied to the resize process.

The lower checkmark(transparent one) is used at the right of 'Opaque' in the following image. The alpha mode is opaque. Since the opaque mode ignores the alpha value, we can see the checkmark although it's transparent. Otherwise, the higher checkmark(opaque one) is used at the right of 'Blend'.

If the autoResizeTexture is true in the Rhodonite, the engine draws an image to a canvas element by using CanvasRenderingContext2D.drawImage to resize the image file. Then the canvas is used as a texture. I think that the lower checkmark is lost in this transformation process(the reason is in my comment). So we need to check the specification of the drawImage method(I will check it later).

[KaYaF]

I couldn't find the description for the alpha in the specification and several web sites. And I couldn't find a parameter of CanvasRenderingContext2D to solve this problem.

To solve the problem, we should take a different approach as required, I think. For example,

1. Getting the original pixel data by the getImageData
2. Create a resized pixel data
3. Draw the resized pixel data by the putImageData method

[cx20]

@KaYaF Here is a link to an article about a similar issue for your reference. https://zenn.dev/yoya/articles/d874880e1820a5

[KaYaF]

@cx20 Thank you for the reference! The reference fits perfectly with the problem of this issue.

I think it would be better to use a decoder such as PNG.js instead of the getImageData method.

[emadurandal]

@cx20

The WebGL2 version seems to have passed; the WebGPU version is close.

[cx20]

I've confirmed that it displays perfectly in WebGL2. https://cx20.github.io/gltf-test/examples/rhodonite/index.html?category=tutorialModels&model=AlphaBlendModeTest&scale=0.5&type=glTF

This issue will be closed when the WebGPU version passes testing.