Rasterizing SVGs?

Hey, has anyone implemented svg rasterisation into their project?

Sometimes you don’t know how detailed you need your textures to be, until much later, so being able to work with SVGs would be a potential workflow. Could something like this also be a solution to combat screen pixel density?

Looking at svg-to-image (https://github.com/Jam3/svg-to-image), for instance. Could you determine the resolution based on the distance of texture to the camera, for instance? Might not be a realistic solution for runtime processing, or would it?

Is this a fool’s errand and is it even possible/feasible? I’m not talking about a full game-size project with millions of textures, more like simple AR/VR/something that level and maybe only a few selected textures.

It would be possible but you wouldn’t be able to take advantage of texture compression (unless you also do that at runtime)

You could do it based on the distance and bounding box of the model the texture is attached to.

How high resolution textures textures are you thinking of? Perhaps you could consider having a low and high resolution version of the textures where the high only loads if you need to (a LODing system for textures).

Good point, it might be much simpler just to implement a LOD system for textures. I might have to investigate this. Any tips?

It can be a bit tricky as you would mappings to materials and textures. Not sure if @Leonidas would have any tried and tested systems in place.

Personally, I would consider some naming scheme and tags that would allow me to either process the mapping at runtime or be able to create a JSON file mapping file from the Editor project.

1 Like

Hmm, could you elaborate on this? What would you be changing, based on the tags/json, if not materials and textures? Or are you saying using tags/json to do this, rather than building a whole custom LOD system?

If this is only few textures you’re talking about, you could:
create an LOD script, which would enable one of the children, and disable the rest, of the entity, based on some lod value (distance from camera or similar).

Then you could modify the scene. If you have a mesh (for example a picture on the wall), that you want to go higher res when close-by, you could create a new parent entity with lod script, add that picture to it as a child. Clone it, to have another child … and swap material and assign high res texture to it.

That lod script could also just have an array of texture, and load / unload them + swap them on materials of the children.

2 Likes

I think @Saad_Haider has worked with a similar system, resizing textures/images on runtime based on the device specs.

I haven’t done something similar for textures, but I think what @mvaligursky proposes should work relatively easily.

1 Like

Yes, the problem I was facing was:

Loading and displaying images (can be 4k) from an API in Playcanvas, this crashed iOS devices pretty easily since their were a lot of images, what I did was, make a new canvas (lets say size 1024x1024, can calculate aspect ratio and downsize accordingly as well), draw the image on a new canvas, save that using “canvas.toDataURL” and display it on a Playcanvas texture, tested with 33 high res images and without the script enabled, it crashes my iphone but doing the above, it doesn’t.

Test project:
https://playcanvas.com/editor/scene/1134102

4 Likes

Ah, excellent. Thanks everyone, and thanks @Saad_Haider for the project, will have a look.

1 Like