How to draw an infinitely zoomable SVG file?

[westy]

I have a detailed SVG file, and I want to be able to zoom in and out of it in-game, by a large factor, in realtime, while still maintaining perfectly crisp antialiased edges.

From what I've gathered, PIXI's SVG support is limited to pre-rendering a raster texture on load, which wouldn't work here as the required resolution for the closest zoom level would create an unmanagably huge texture.

I don't need support for gradients etc, just simple colours and paths.

I could triangulate the SVG file using something like svg-mesh-3d and then render it out as a mesh, however that leaves the question of how to render out the colours properly - I'm not quite sure how a PIXI mesh object could be made to handle this. Perhaps some kind of shader? Also, the triangulation has the downside that smooth curves will have a limited 'resolution' depending on the number of triangles, but that's not a massive issue for my application.

Is there a better way I'm missing? If not, any guidance on how to handle the colour rendering on the mesh would be appreciated.

[ivan.popelyshev]

That's an interesting project. First, you have to learn how pixi deals with SVG. SVG is not first-class citizen so in most cases you're on your own there.

V4 SVG: https://github.com/pixijs/pixi.js/blob/dev/src/core/textures/BaseTexture.js

It'll be different in V5.

May be you can rasterize parts of SVG by changing it scale and asking pixi to upload that part into videomemory.

If you really want to make it in geometry, Mesh is the best candidate. If you want just color one element, its really easy - use PIXI.Texture.WHITE as texture and set "tint" of object to whatever color you need. It works both on Sprite and Mesh, and people use it. There's also Graphics approach.

If you want gradient colors, well, that'll be a problem, yuou have to make your own MeshRenderer that deals with colors, pixi default one doesnt have necessary attributes.

Give me more details and I'm sure we'll figure something out.

[westy]

@ivan.popelyshev Thank you for your reply!

Quote

May be you can rasterize parts of SVG by changing it scale and asking pixi to upload that part into videomemory.

The texture will be full screen and will need to update at 60fps, so pushing a brand new huge texture to the GPU each frame sounds like it would be too expensive.

Quote

If you want just color one element, its really easy - use PIXI.Texture.WHITE as texture and set "tint" of object to whatever color you need.

Sadly I'll need multiple colours (I guess I could use multiple meshes though!)

 

Thankfully I don't need gradients (well, what I really need is a signed distance field texture, but from what I've seen this can be generated at some cost in a fragment shader).

I'll give you some more details as to my intended application:

The game world is a large map composed of multiple provinces. The player can zoom in/out of this map to a big degree.

I want the map to have animated details, e.g. coastal waves, and fun textures etc. It strikes me that the best way to do this without loading in huge textures would be to generate the detail dynamically in a fragment shader.

My end goal is to have a full-screen fragment shader with access to the following information per pixel (besides simply x/y):

• Which province (or ocean, if no province)
• Distance from the border (Using a signed distance field technique, e.g. Jump Flooding)

My idea so far is to use an SVG image that would look like this:

 

And then, if PIXI is able to render it zoomed in at arbitrary resolution (this is where I'm stuck), that could be used as input for a fragment shader with the required information.

[ivan.popelyshev]

The only mechanism for that PIXI does have is Graphics.

It'll use earcut from mapbox lib to triangulate things and it'll work fine.

[westy]

Thanks Ivan! using PIXI SVG Graphics is giving me great results, cheers.