[API] Generating textures with alpha

Simon · February 2, 2021, 12:15pm

Hi there,

we are developing an app with multi language support. So we are swapping some textures depending on the selected language. We are generating the textures on the fly by writing text to canvas elements, and then we generate the image textures. Works perfectly. But now we have a text which should have a transparent background. Generating the image works as expected, but when we generate a texture from the image, the background is black when we put it in an element. So I investigated the textures with transparency exported by shapespark and saw, that those textures seem to work with cutouts. So using simply createTextureFromHtmlImage won’t work here I guess.

Is there any way to generate textures from PNGs with alpha on the fly?

wojtek · February 3, 2021, 4:00pm

Right. The viewer API assumes the textures are opaque. Could you check if setting

texture.format = GLC.RGBA;
texture.hasAlpha = true;
texture.needsUpdate = true;

on the texture object returned by createTextureFromHtmlImage makes the transparency information transferred to the viewer?

Simon · February 3, 2021, 4:46pm

var texture = viewer.createTextureFromHtmlImage(MY_IMAGE);
texture.format = GLC.RGBA;
texture.needsUpdate = true;

I tried this code above, but no success.

wojtek · February 4, 2021, 9:05am

@Simon, I’ve updated the code in my previous post by adding one more statement: texture.hasAlpha = true;. This should work now.

In the next release we’ll add an additional argument to createTextureFromHtmlImage specifying whether the image has an alpha channel.

Simon · February 4, 2021, 9:39am

It works perfectly, thanks a lot!

heung_aile · October 13, 2023, 2:56am

Has anything changed about
“texture.format = GLC.RGBA;
texture.hasAlpha = true;
texture.needsUpdate = true;” recently?

An error occurred in the texture image conversion.

kamil · October 13, 2023, 6:33am

Hi @heung_aile

We have refactored our code and removed some functions visibility. GLC is now made private.

Official API for creating texture is Viewer.createTextureFromHTMLImage(image, hasAlpha=false), where setting ‘hasAlpha’ to true will set proper texture format.

I would recommend to use official API functions where possible.
However, if you would prefer to not change your code, you could replace “GLC.RGBA” directly with value for this property which is “0x1908”,

texture.format = 0x1908

heung_aile · October 13, 2023, 8:46am

origin

Using the existing grammar using api changes the image, but the transparent part of the png file is broken and exposed

kamil · October 13, 2023, 9:54am

Hi

Have you set “hasAlpha” to true?

The function call should like this:

Viewer.createTextureFromHTMLImage(image, true)

heung_aile · October 16, 2023, 1:14am

var textureElement = document.getElementById(textureElementId);
      texture = viewer.createTextureFromHtmlImage(textureElement, ture);

Do i understand correctly??

Simon · October 16, 2023, 7:14am

This should work, but you have a typo. true not ture

heung_aile · October 16, 2023, 8:45am

I solved it. Thank you.

heung_aile · November 14, 2023, 9:52am

-Before-

texture = viewer.createTextureFromHtmlImage(textureElement);
texture.format = 0x1908;
texture.hasAlpha = true;
texture.needsUpdate = true;

-After-

“same code”

kamil · November 14, 2023, 12:36pm

Hi!

How are you creating your textureElement?

Maybe your textureElement is missing property: textureElement.crossOrigin = "anonymous"?