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.
One issue with Chrome is how it deals with "Cross Origin Resource Sharing," which is a question of how it deals with internet security. At the moment (Nov 2020) we still don't know how to work around this problem in Chrome. So considering using Firefox or Safari.
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:
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
Here is the animation.
%%html
<iframe src="webgl-demo.html" width="500" height=500></iframe>
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>
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');
....
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"),
...