Texture from svg - bitmap sampling

Questions
1

Hi all!

I am experimenting with textures using a svg file as basis. The main rational is that the svg’s are generated from polygons on a back-end and sent to the client. I want to have the files for the textures in a cache and have small size if possible.

From the examples I did, I understand the svg is transformed to a bitmap in Babylon for rendering. Hence the scalability of svg is not maintained. That should not be a problem for my usage as limited scalability is requried.

But for now, I am not able to control the resolution of the sampling from the svg to the bitmap.

As an example, you can see the pixelization effect in this PG: https://playground.babylonjs.com/#4LZRS#77

Would you know where I have to look at to increase the sampling?

Any other advise on how to proceed? Would you rather use another file format with resolution being set at the file encoding (accepting the increase in file size)?

1 Like
2

We use a canvas to convert the svg into a bitmap. But you can do it by yourself beforehand actually. So this way you can control the texture size (I recommend using a DynamicTexture)

3

It seems the width/height of the texture that is created comes from the width/height declared inside the .svg file: try to change the values in the file and see if that helps.

4

Indeed playing with the svg declared width and height helps! Thanks for the tip.
Actually, it works up to a given limit. I increased the wdith/height by a factor 4 and it renders better but when I increase further, I got a black canvas.

5

I will dig further into this topic. I guess I can use the drawImage method on the 2D context to do so.
Do you know if it accepts a string instead of a path file?

6

Both should work (base64)

1 Like