WebGL2 Icon Node Demo
This demo shows how to display icons in nodes rendered with
WebGL2 using WebGL2IconNodeStyle.
The icons are pre-rendered and passed to the node style as
ImageData objects. This enables the developer to load icons from
This demo shows how to use icons from image files (SVG, PNG) and data URIs. Also, it's
demonstrated how to render an icon font (FontAwesome
in this case) and use it as a node icon.
The icons with fill color don't use the icon's original color, but are filled with the
"iconColor" specified in the node style. This allows creating icons with different
coloring from the same image.
Things to Try
- Select and resize the "Keep Aspect Ratio" nodes.
Select and resize one of the other nodes to see how the icon is stretched to the node
Select the "Large" sample to create a large graph with 100.000 nodes. Observe the
rendering performance by panning and zooming the graph with the mouse.
Take a look at the source code to see how the icons are rendered and passed to the node