WebGL
What is WebGL?
WebGL (Web Graphics Library) is an alternative rendering method to HTML5 Canvas. It delivers high performance rendering in compatible web browsers without using plug-ins. It's supported in leading browsers and many hardware platforms, including mobile devices, where it exploits the power of Graphics Processing Units (GPUs).
WebGL is designed and maintained by the non-profit Khronos Group.
How to check if your environment supports WebGL
To check if your device meets the minimum requirements for WebGL, run KeyLines.webGLSupport().
How to use WebGL in KeyLines
KeyLines 3.5 and later use WebGL by default. You'll need to enable hardware acceleration in your browser settings.
If WebGL is disabled, KeyLines uses Canvas instead. To switch off WebGL, before you create a chart, call KeyLines.mode("canvas").
Why use WebGL?
Performance. The faster the visualisation is updated, the more responsive and productive the experience is. Your users can analyse large charts and datasets more quickly.
In KeyLines 4.3 and later, there's an overview window in WebGL mode that lets users navigate large charts more easily.
You don't need knowledge of the WebGL API, and you don't need to change the JavaScript that integrates your application with KeyLines.
Supported Environments
| Browser | WebGL | Canvas |
|---|---|---|
| Firefox 43+ | ||
| Chrome 45+ (All Platforms) | ||
| Safari 9+ | ||
| iOS Safari 8.4+ | ||
| Edge |
Windows Laptops with dual graphics
For optimal performance with Windows, we recommend using a desktop with dedicated graphics cards. WebGL works with integrated graphics cards, but it can't use secondary GPUs in devices that have switchable graphics, such as Nvidia Optimus.
Security
WebGL brings the power of GPU accelerated 3D graphics to the web platform, but still conforms to platform security principles. For more information, see Khronos Security.
SVGs
To ensure the highest level of performance and stability, SVGs are converted to bitmaps when they're drawn. Like any image, we restrict them to a maximum of 256x256px, so you’ll lose sharpness if you zoom in any further than this. For more information about SVG support and recommendations, see Image Formats.
Recommendations
- Make sure your graphics card drivers are up to date.
- Use devices with a minimum of 1GB of RAM, for example, an iPad Air and above.
- Don't use more than two different fonts.
- Don't use more than two images at 512x512 resolution, after this they'll be downscaled to 256x256.
KeyLines can performantly display up to 900 distinct 256x256 images and font icons, limited only by the user's hardware. Using more than this is not recommended as it may affect chart rendering performance.
Limitations and Known Issues
- WebGL won't work if you run it from a file system. You must run KeyLines from a web server.
- Windows laptops with AMD switchable graphics may not be supported on Chrome.
- Virtual machines may not support WebGL because they have low quality driver support.
- Mobile devices may stop drawing or reload after switching tabs and may report that webgl has failed. This is normal. To fix this, reload the page.
- Compared with WebGL, emoji in Canvas appear slightly larger at every zoom level.
- Alignment of images differs in WebGL when compared to Canvas. You will need to specify different imageAlignment values based on the mode you are using.
- Emoji represented textually (such as by combining with the U+FE0E variation selector) will always appear black in WebGL but will appear as the same colour as the label font in Canvas.
- Some languages are not supported by the WebGL renderer. These include, but are not limited to, Bangla/Bengali, Burmese, Gujarati, Hindi, Kannada, Khmer, Lao, Malayalam, Marathi, Nepali, Odia, Punjabi, Sylheti, Tamil, Telugu, Thai and Urdu.
Support
Found a bug? Report it to [email protected].