Convert SVG to X3D using X_ITE, to display SVG as geometry in Castle Game Engine

Posted on by michalis

Zrzut ekranu z 2023-02-25 00-59-48
Zrzut ekranu z 2023-02-25 00-59-28
Zrzut ekranu z 2023-02-25 00-59-58
Zrzut ekranu z 2023-02-25 01-00-15

X_ITE is an open-source JavaScript library to display X3D (and a number of other formats) in a web browser, using WebGL. It was recently extended to import additional formats, and render them straight away or convert to X3D. The supported formats are now: X3D, VRML, glTF (GLB), OBJ, STL, and SVG.

There is an accompanying online converter to X3D and a command-line converter x3d-tidy that perform the conversion using X_ITE underneath.

In a way, this is similar to what we do in Castle Game Engine, where we also load everything (like glTF) to X3D nodes, give you an online converter and a command-line and GUI converter.

But there’s also a big added value: X_ITE supports SVG. SVG (scalable graphics, create it e.g. in Inkscape) gets converted into proper geometry in X3D, so it remains scalable and can be used as part of your 2D or 3D game in CGE! This is what I enjoy about being part of an ecosystem and open formats like X3D — we get new features “for free” thanks to cooperation with others.

Note that in the generated X3D file, all objects will be placed at the same depth, Z = 0, at least right now. You may have to fix it to avoid Z-fighting in case SVG layers overlap. For simple cases, it is possible to do this by just manually editing the X3D file in any text editor. Assigning meaningful names to your objects in SVG, e.g. using Inkscape “Object Properties”, also helps. I have done it with a non-trivial SVG file (our engine logo) and the manual effort was ~easy 🙂

See the result of my play in demo-models/svg. It shows how to fix Z, I also add a shader effect to discard pixels outside of a circle in the middle, to “cut off” stuff that should not be visible in a circular engine logo.

I encourage you to test the converter and explore X_ITE in general. Many thanks go to Holger Seelig for an amazing work on this!

Notable Replies

  1. Hi.

    SVG support is great :+1:. I guess its clear, to use it inside the UI. But i think you can use it also
    for Level-Design. As i saw in the picture, the bezier-curves will be converted into many points flat polygons. right ?

    Does it generate automatically some kind of collision shape ? Maybe you do such stuff directly inside CGE Editor!?

    I didnt know the JS library X_ite. Beside the feature for CGE, does it mean i could export objects from CGE (as *.x3d) and load them with X_ite into the browser? Sounds like a win-win situation :slightly_smiling_face:

  2. Indeed. Although X3D has NURBS nodes (and CGE supports them), so in principle the conversion could also preserve curves in X3D (and then leave to CGE to decide how to triangulate them).

    But this converter SVG → X3D generates ready meshes (i.e. triangle sets).

    You can indeed add colliders easily yourself in CGE editor. Just add some TXxxCollider component, and let it have (this is default) AutoSize=true. See Physics | Manual | Castle Game Engine .

    The X_ITE converter SVG->X3D doesn’t store any special collision information in the resulting X3D. Although X3D has a physics component, it isn’t widely used from what I can tell, and e.g. CGE doesn’t use it, and X_ITE converter doesn’t generate the related nodes too.

    Indeed, to some extent :slight_smile: You can save any TCastleScene content from CGE as X3D, and then load it in X_ITE. (Be sure to set CastleX3dExtensions=true in CGE before exporting, to maximize the compatibility of X3D files generated by CGE.)

    This “export from CGE” is right now limited to a TCastleScene. You cannot export larger things, like a composition of scenes, a hierarchy of TCastleTransform etc. There are multiple ideas for extending here – maybe we will enable to export whole hierarchy of TCastleTransform at some point, maybe we will add export to glTF too etc.

    That is indeed a nice thing about using standard formats, we have various other open-source tools exploring this area and we can connect :slight_smile:

  3. Oh, sounds like this X3D format is very powerful. It can handle NURBS natively ! So i could use all my creations from my CAD designs :heart_eyes:

    Collider:
    Just add some TXxxCollider component inside CGE. Sounds also easy.

    EXPORT to X_ite:
    Awesome if it works also this way around. Much more possibilities for the web audience. :sunglasses:

Continue the discussion at Castle Game Engine Forum

Participants

Avatar for michalis Avatar for sledge