Add SVG support (hardware accelerated in WebGL).

We can take pixi.js, and one of the following existing SVG-to-pixi tools in the community, and add a feature to infamous where we can place <svg> elements (and all the child drawing elements like <line>, <path>, <circle>, etc) inside of a <motor-node> element, and infamous can render it in WebGL (not just DOM+CSS3D like currently) for super fast performance.

For example, we can write HTML like:

<!-- Make a 3D scene with WebGL rendering enabled. -->
<motor-scene webgl="true">

    <!-- Make a 3D object that can be rotated, translated, etc. -->
    <motor-node position="20 30 40" rotation="45 45 45">

        <!-- Render this SVG element in WebGL instead of DOM. If set to
            "false", will render in DOM (mixed mode, with other WebGL objects). -->
        <svg webgl="true" ...>

            <!-- Draw a circle (accelerated in WebGL!) -->
            <circle cx="100" cy="100" r="100"></circle>

        </svg>

    </motor-node>

</motor-scene>

(This may not be the actual final API, it isn’t implemented yet)

We can leverage one of the following (or make our own based on the techniques they use):

• https://github.com/bigtimebuddy/pixi-svg
• https://github.com/saschagehlich/pixi-svg-graphics
• https://github.com/jonobr1/two.js
• https://github.com/mattdesl/svg-mesh-3d

[gg4u]

Joe, congratulation!

After this post https://github.com/pocketsvg/PocketSVG/issues/94#issuecomment-315638684 I ve seen examples of your passion-project - WOW! 👍 🥇

I came to your work and this thread because I am looking for ways to accelerate SVG graphics.

I am also curating a passion-project - it is a discovery engine: a platform to search for connections in between of things, to help brainstorm / learn about the context of things that we don’t know yet.

I wonder if Infamous can be of help the browser to speed up rendering composition of SVG: from what you write in this thread, it seems so.

Conceptually, could you help understanding how does Infamous work for handling rendering of DOM elements as webGL? = HOW this idea crossed your mind ? 😃

My use case is like this:

I am expanding a network layout on demand - I click on a node, the graph layout fetch new nodes (represented as SVG groups) and place them on the DOM. Coordinates are moved around with translate properties, but when there are many elements, things get sloow. I would like to delegate the render of SVG elements to webGL engine, but possibly keeping the SVG elements and all their CSS styling.

I also tested a network layout using PIXI.js, and it is nice; however I believe that readability (SVG fonts are always crispy) and possibilities to directly interact with SVG elements would let a lot a lot of open opportunities for applications that are not games, but could be flavoured with a spice of “gamification” yet with content typical of a normal web page document. I mean, instead of making an app with canvas with nice look and feel, once can leverage an HTML web page for utility purpose and with outstandingly engaging look and feel and responsiveness.

I see a lot of potential for data-driven things… for “public audiences”… :]

The interest in using SVG is also because I invested a lot in tuning UX and parameters for displaying and lay-outing elements - moving around SVG elements gets slooow quite quickly, especially on mobile handsets, if we could leverage the browser to move around SVG elements fst (so fast that the ‘a’ disappear) we could combine utility of web + blazing experiences of webGL (typically for games purpose).

Would you be interested in taking a look to my use case, tell if using Infamous to render the SVG could be appropriate and help in estimating performance and complexity to delegate rendering of SVG to webGL ?

The layout structure I animate makes large use of groups like the one below, to represent a node of a connected graph. I would like to speed up the rendering and layout responsiveness when moving elements around.

<g id="data-3bGJprg6D4eROBYv" transform="translate(-5789,-3116)">
// move the node according to force-directed layout or other layout engines
<title>Bottlenose dolphin</title>
<circle fill="white" r="120" cx="0" cy="30" stroke-width="30" stroke="lime" id="3bGJprg6D4eROBYv" fill-opacity="1"></circle
<ellipse fill="#ffffff" rx="128" ry="128" cx="0" cy="32" stroke-width="20px" stroke="#ffc107" fill-opacity="0" class="currentNodeMarker"></ellipse>
<text xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" x="0" y="0" text-anchor="middle" id="text-3bGJprg6D4eROBYv">
<tspan>Bottlenose dolphin</tspan></text>
<clipPath id="image-3bGJprg6D4eROBYv">
<circle fill="#ffffff" r="120" cx="0" cy="30"></circle></clipPath>
<image id="296994" clip-path="url(#image-3bGJprg6D4eROBYv)" width="480" height="480" x="-240" y="-194.4" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Tursiops_truncatus_01.jpg/100px-Tursiops_truncatus_01.jpg"></image>
</g>

[trusktr]

Here’s a simple example of that, placing an SVG inside of an i-node element and rotating it in 3D space: https://codepen.io/trusktr/pen/EObVZj

In the future, the WebGL rendering will work as I’ve shown in that demo, with almost the same markup (but instead of with i-node it may be with i-svg-node in order to opt-in to the WebGL rendering instead of DOM rendering of the SVG content).