[IPython-dev] WebGL example in IPython notebook based on three.js

[Andrew Payne]

> I recently managed to get 3D vector plots working in the IPython notebook,
> by statically producing three.js output. I thought I'd share it here in
> case this example is useful for anyone else, or if anyone has any
> suggestions as to how I could do things better.
>

Great work!  Thanks for sharing that.

Did you consider or explore using require.js to load the three.js library?
You can reference and load the library once, and then not have to inline it
within each cell.

Aside for folks fiddling with Javscript libraries & the Web notebook:   the
obvious approach of dropping a <script> reference in an HTML cell or result
isn't robust.  When the cell is reexecuted, the browser will load the
library again, overwriting the original library name space.  However, the
first instance of the library will likely still be there because of
lingering references.  So you'll have a variable "foo" of type X in the old
library instance, and you'll pass it into a function call (new library
instance) and things will fail in strange ways because all the type tests
in the new library instance fail.  And you will drive yourself crazy
because you'll be in the JS console and wonder why foo is clearly of type
"X", but "isinstance X" is giving False.

That's why David's JS code has this test:

https://github.com/DavidPowell/OpenModes/blob/master/openmodes/static/three_js_plot.js#L175

if ( camera instanceof THREE.Camera === false || !
document.body.contains(three_container)) {
            console.log("Animation loop failed: stopping");
            return;
        }

>
>
> The advantage of the static approach is that the output survives the
> nbconvert process, which you can see in this notebook here (which also
> compares with a couple of other unsatisfactory ways of visualising 3D
> vector plots).
>
>
> http://nbviewer.ipython.org/github/DavidPowell/openmodes-examples/blob/master/How%20to%20create%203D%20plots.ipynb
>
> Another example can be seen at:
>
>
> http://nbviewer.ipython.org/github/DavidPowell/openmodes-examples/blob/master/Using%20and%20creating%20geometric%20shapes.ipynb
>
> If you are interested to see how this works, you can check out the python
> source:
>
> https://github.com/DavidPowell/OpenModes/blob/master/openmodes/ipython.py
>
> As well as the javascript:
>
>
> https://github.com/DavidPowell/OpenModes/blob/master/openmodes/static/three_js_plot.js
>
> and finally the HTML:
>
>
> https://github.com/DavidPowell/OpenModes/blob/master/openmodes/templates/three_js_plot.html
>
> By the way, I am aware of the efforts to make a proper three.js IPython
> widget (https://github.com/jasongrout/pythreejs/), and will probably
> switch over to this once it is stable, and when the output can survive
> ipython's nbconvert process. Is this something we can expect for widgets in
> IPython 3.0?
>
> regards
> David
>
>
> _______________________________________________
> IPython-dev mailing list
> IPython-dev at scipy.org
> http://mail.scipy.org/mailman/listinfo/ipython-dev
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/ipython-dev/attachments/20150119/09199558/attachment.html>