SVGs Do Not Work with webGPU?

Questions
1

Just discovered this:

{A013C357-6566-4324-AD18-6018F75CC2B9}
{A013C357-6566-4324-AD18-6018F75CC2B9}2437Ă—864 165 KB

{7AC12BEC-589E-4241-A59F-53F59ECF7649}
{7AC12BEC-589E-4241-A59F-53F59ECF7649}2500Ă—960 260 KB

SVG textures apparently do not work in webGPU.

Not sure if this is a bug, or there is something special I need to do to support them.

2

cc @Evgeni_Popov

3

Does that fix it?

4

Ill try the work around, but I think more ideally a fix to get svgs working with webGPU should be in order. ^_^!

Would that mean implementing this “work around” into something we control?

5

I don’t know how we could integrate it into the engine, because asynchronicity of createImageBitmap would be a breaking change. In fact, I’m not sure we could even implement it, because constructors can’t be asynchronous…

6

Could we make a support function in the texture class like Texture.LoadAsync or something?

7

So Im kind of confused. I can get this working no problem in the playground, but the second I try to do it on my real project it always returns a black image with the dimensions 1200x1880 No matter what I feed the svgString.

Here is my method of it:

export const SvgBitmapConvert = async (
  url: string,
  onDone: (bitmap: ImageBitmap) => void,
) => {
  const svg = await fetch(url);
  const svgText = await svg.text();
  const svgUrl = URL.createObjectURL(
    new Blob([svgText], { type: "image/svg+xml" }),
  );
  const image = new Image();
  image.onload = () => {
    createImageBitmap(image).then((bitmap: ImageBitmap) => {
      URL.revokeObjectURL(svgUrl);
      onDone(bitmap);
    });
  };
  image.onerror = (err) => {
    console.error("Error loading SVG:", err);
    URL.revokeObjectURL(svgUrl);
  };
  image.src = svgUrl;
};

Ive tried hard coded svgStrings and its always the same results, Im not getting any errors and here is my call to it:

{183A6068-0B50-4270-B631-52E633B6EBE9}
{183A6068-0B50-4270-B631-52E633B6EBE9}821Ă—274 29.3 KB

Can you see anything that might be causing this to not work like in the PG?

8

Hard to tell…

Does your code work in WebGL?

Regarding a support function like LoadAsync, I think it would be nice indeed, if you are willing to create a PR for it.

9

Yeah I can do that when I get some free time.

And yeah I’ll test on webGL after my surgery today.

10

Interesting, it does not work with webGL or webGPU in our setup but works 100% no problem doing the exact same code in a PG.

I setup the code to be exactly like this in our environment, but no matter what I do it still tries to create a 1200x1880 solid black texture.

11

But then I found a work around that does work in our environment. This is kind of trippy…

Would there be any detriment that you can think of doing it this way?

12

The only down is the extra memory + copies.

Also you should adapt the size to your need on the output: https://playground.babylonjs.com/#6KISFI#2

1 Like
13

Good call!