Including WebGL animations¶
WebGL is used for 3D animation, making good use of any graphics acceleration and hardware available to the computer. WebGL is based on OpenGL, a rich graphics language for high performance visualizations.
A WebGL-compatible web browser is required, such as FireFox or Safari. As of January 2020, Google Chrome is unfortunately not compatible.
This notebook, is not meant to be an introduction to WebGL. All we do is show how to use it in a Jupyter notebook.
The key is to use HTML magic and iframes to include the notebook.
In this example, we need three files to get this to work:
webgl-demo.html (the file that iframe will load)
webgl-demo.js (the javascript that creates the animation)
gl-matrix.js (some helper code for 3D work)
These are all loaded in this repo.
The key piece of code to display the animation looks like this:
%%html
<iframe src="webgl-demo.html" width="500" height=500></iframe>
I’ll run it just below. And further below, I will show you the code in the 3 files.
Note this code is based on the examples in this repo: https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial
Example 1¶
Here is the animation.
%%html
<iframe src="webgl-demo.html" width="500" height=500></iframe>
Html file¶
Here is the content of the file “webgl-demo.html”
Note to edit this file in the Jupyter hub, you will need to change the file type to “.txt”, edit it and save, then rename as a “.html” file. Not sure why, but it is a useful hack for editing special files.
<head>
<meta charset="utf-8">
<title>WebGL Demo</title>
</head>
<body>
<canvas id="glcanvas" width="640" height="480"></canvas>
</body>
<script src="gl-matrix.js"></script>
<script src="webgl-demo.js"></script>
Webgl Javascript file¶
Here is the start of the content of the file Webgl-demo.js, which is a bunch of javascript to set up the animation. It’s pretty long and complex, so you would need to learn to write in Webgl, or borrow someone else’s code.
var squareRotation = 0.0;
main();
//
// Start here
//
function main() {
const canvas = document.querySelector('#glcanvas');
const gl = canvas.getContext('webgl');
....
gl-matrix.js helper file¶
Finally, here is the start of the content of the file gl-matrix.js, which is a bunch of javascript to facilitate animation. It’s pretty long and complex. Note the copyright notice, it comes from Brandon Jones and Colin MacKenzie.
/**
* @fileoverview gl-matrix - High performance matrix and vector operations
* @author Brandon Jones
* @author Colin MacKenzie IV
* @version 2.4.0
*/
/* Copyright (c) 2015, Brandon Jones, Colin MacKenzie IV.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"),
...
