canvas3d_lib.js + Pre3d does shaded surfaces and works on iPhone, IE

[Peter]

Hi,

Thanks to the pointer to Pre3d it is now possible to do shaded
surfaces (and lines and curves) on canvas in JavaScript. The
performance is not quite like jmol, but it is far better than I would
have expected (especially with Chrome), and it has the advantage of
working on the iPhone (and perhaps Android -- can someone with an
Android phone please check?). The surfaces display in IE, but mouse-
tracking is erratic at the moment. Texture mapping is also possible,
but not yet exposed to Sage.

See http://math.chapman.edu/~jipsen/canvas/pre3d/demos/sage2pre3d.html
for a standalone html version,

or http://sage.chapman.edu:8001/home/pub/5/ for (lots of) surfaces
produced by Sage

(try putting that many jmol applets on one html page :-)

I have modified the Pre3d .js files to be a drop-in replacement of
canvas3d_lib.js. Basically this meant combining them into a single
file called canvas3d_lib.js, adding code to parse Sage json files,
extending Sage and Pre3d to handle lines, opacity, and tweaking Pre3d
to shade both sides of the surface etc.

In order to be efficient, Pre3d takes some shortcuts that imply
certain limitations. E.g. intersecting faces do not get split
automatically into subfaces, so intersections of surfaces are jagged.
Also lines are drawn on top of surfaces (so no hidden line removal).

There are two patches that need to be applied to Sage-4.1.2.rc0 to
make this viewer="canvas3d" option work:

http://math.chapman.edu/~jipsen/canvas/pre3d/demos/canvas3dmods.patch
and

http://math.chapman.edu/~jipsen/canvas/pre3d/demos/canvas3d_libmods1.patch

The changes to files in sage/plot/plot3d are just a couple of lines
and should be easy to review (if this is to be put on some trac
ticket).

Any feedback is appreciated. I'm interested in a good format for
adding translational and rotational velocities to 3d shapes so that
the .js renderer can do animations.

-- Peter

[William Stein]

On Sat, Oct 3, 2009 at 4:04 PM, Peter <peter....@gmail.com> wrote:
>
> Hi,
>
> Thanks to the pointer to Pre3d it is now possible to do shaded
> surfaces (and lines and curves) on canvas in JavaScript. The
> performance is not quite like jmol, but it is far better than I would
> have expected (especially with Chrome), and it has the advantage of
> working on the iPhone (and perhaps Android

Oh my god!! This

http://sage.chapman.edu:8001/home/pub/5/

is amazing. I had no idea this was possible. WOW. We have to get
this into sage ASAP. I think with some more work this should someday
be the default (!), given how much trouble people have showing 3d jmol
plots with sage -- I ran several workshops this summer, and 3d plots
were by far the flakiest part of each workshop.

Many thanks for working on this!

William

>. -- can someone with an

--
William Stein
Associate Professor of Mathematics
University of Washington
http://wstein.org

[Jaap Spies]

Peter wrote:
> Hi,
>
> Thanks to the pointer to Pre3d it is now possible to do shaded
> surfaces (and lines and curves) on canvas in JavaScript. The
> performance is not quite like jmol, but it is far better than I would
> have expected (especially with Chrome), and it has the advantage of
> working on the iPhone (and perhaps Android -- can someone with an
> Android phone please check?). The surfaces display in IE, but mouse-
> tracking is erratic at the moment. Texture mapping is also possible,
> but not yet exposed to Sage.
>

I can confirm this displays on android HTC Smartphone, but I have troubles.
The pictures don't fit on the screen and I cannot zoom or so.

Jaap

[William Cauchois]

Thank you for your excellent work on canvas3d! I never imagined
canvas3d finding a place on smartphones, but this is really exciting.
Maybe someday Sage could be an iPhone app!

We should figure out how to incorporate this code into Sage. Is is
legal for us to use a modified version of Pre3d? Peter, in your
opinion what kind of work remains to be done on this code for it to be
ready? You mentioned two issues:

- Mouse movement is erratic (I noticed that rotation would continue
to follow my mouse even after I released the button). I see that
you're using Pre3d's autoCamera(), which seems to work in the demos on
the Pre3d website. What's going wrong here?

- Lines aren't depth sorted. I don't know that much about computer
graphics, so I don't know how hard this problem would be to solve.

We might also want to create a Trac ticket to incorporate your other
improvements to canvas3d -- namely, a json_repr() for line objects and
support for touch gestures on the iPhone -- separately.

I would be happy to help with this.

-- Bill

On Oct 3, 4:04 pm, Peter <peter.jip...@gmail.com> wrote:
> Hi,
>
> Thanks to the pointer to Pre3d it is now possible to do shaded
> surfaces (and lines and curves) on canvas in JavaScript. The
> performance is not quite like jmol, but it is far better than I would
> have expected (especially with Chrome), and it has the advantage of
> working on the iPhone (and perhaps Android -- can someone with an
> Android phone please check?). The surfaces display in IE, but mouse-
> tracking is erratic at the moment. Texture mapping is also possible,
> but not yet exposed to Sage.
>

> Seehttp://math.chapman.edu/~jipsen/canvas/pre3d/demos/sage2pre3d.html

> for a standalone html version,
>

> orhttp://sage.chapman.edu:8001/home/pub/5/for (lots of) surfaces

> produced by Sage
>
> (try putting that many jmol applets on one html page :-)
>
> I have modified the Pre3d .js files to be a drop-in replacement of
> canvas3d_lib.js. Basically this meant combining them into a single
> file called canvas3d_lib.js, adding code to parse Sage json files,
> extending Sage and Pre3d to handle lines, opacity, and tweaking Pre3d
> to shade both sides of  the surface etc.
>
> In order to be efficient, Pre3d takes some shortcuts that imply
> certain limitations. E.g. intersecting faces do not get split
> automatically into subfaces, so intersections of surfaces are jagged.
> Also lines are drawn on top of surfaces (so no hidden line removal).
>
> There are two patches that need to be applied to Sage-4.1.2.rc0 to
> make this viewer="canvas3d" option work:
>
> http://math.chapman.edu/~jipsen/canvas/pre3d/demos/canvas3dmods.patch
> and
>

> http://math.chapman.edu/~jipsen/canvas/pre3d/demos/canvas3d_libmods1....

[Simon King]

Hi!

On Oct 7, 5:18 am, William Cauchois <wcauch...@gmail.com> wrote:
[...]

>  - Mouse movement is erratic (I noticed that rotation would continue
> to follow my mouse even after I released the button).

One remark: It seems to me that it is intended behaviour.

I just noticed
- If you hover over an image for the first time, it starts to follow
the mouse movements.
- If you click on it, it stops moving.
- If you click on it again, it resumes motion.

Actually, I find this a little more comfortable than keeping the mouse
button pressed while rotating.

Cheers
Simon