WebGL Image Node Demo
This demo shows how to display images in nodes rendered with
WebGL using WebGLImageNodeStyle.
The images are pre-rendered and passed to the node style as
ImageData objects. This enables the developer to load images from
arbitrary sources.
This demo shows how to use images from files (SVG, PNG) and data URIs. Also, it is
demonstrated how to render an icon font (FontAwesome
in this case) and use it as a node image.
The images with fill color don't use the image's original color, but are filled with the
"imageColor" 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 image is stretched to the node
layout.
-
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 images are rendered and passed to the node
style.