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

[Andrew Payne]

[*clicked send accidentally, please ignore my previous incomplete email*]

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 "isinstanceof 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;
        }

See my example of using require.js for three.js, here:
http://nbviewer.ipython.org/github/payne92/notebooks/blob/master/00%20Javascript%20In%20Notebooks.ipynb


For the dev team, this raises the issue of:  what's the best idiom for JS
in a cell to access the output area?  (See SO question:
http://stackoverflow.com/questions/20019690/how-to-access-current-cell-output-area-with-javascript-in-ipython-web-notebook
)

On a "live" notebook, the Javascript *element *variable is fine.  But as
you can see with my notebook (above) vs David's, the element variable
approach doesn't survive nbconvert -- my Javascript examples break because
element doesn't exist in an nbconvert(ed) notebook.

David made things work by generating (effectively) a UID as part of his
HTML cell result that the corresponding Javascript can pick up.

As we see Javascript used more with the Web notebook, folks are going to
consistently run into this pattern.  I think the notebook could provide
some "standard" way to reference the output area for the cell, that
survives nbconvert.

What do you think?

-andy
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/ipython-dev/attachments/20150119/a0284f19/attachment.html>