Improve mobile experience

[ShawnZhong]

See live site at https://shawnzhong.github.io/jenn3d/

• Mobile-friendly UI

  • Made the layout adjust to the screen size
  • Added drag behavior control so users can directly choose which drag mode they want
  • Implemented pinch-to-zoom on touch devices
  • Changed the aspect ratio of the canvas on smaller devices

• Reorganized the menu. Feel free to change the order or wording if you have a better one.

  • Added section headers within the submenus

  • Added quick actions

  • Added drawing->back, drawing->forward, and drawing->toggle_grid to the menu. I found them from the keyboard shortcuts, but they were not on the menu for some reason.

  • Implemented curved style. It improves the framerate a lot, especially on lower-end devices. I found the web app somewhat slow on integrated GPUs when I tested it on a friend's laptop. Surprisingly, it works quite well on my iPhone and another Android phone.

• Changed the Vertex destructor using an iterative approach. I used to think that delete next; could be optimized by the compiler with tail recursion optimization, but it's not. For large models, the recursive approach exceeds the maximum call stack size on mobile devices because of stricter constraints.

@fritzo It might help if you hide white space changes when viewing the diff.

[fritzo]

Nice! I noticed the "camera" menu is missing but the "blur" functionality is still accessible via "b". Is this because webgl doesn't support an accumulation buffer?

[fritzo]

Looks great on my phone!

[ShawnZhong]

Nice! I noticed the "camera" menu is missing but the "blur" functionality is still accessible via "b". Is this because webgl doesn't support an accumulation buffer?

Yes. Accumulation buffer is not available on WebGL. The call to glAccum and glClearAccum are ignored as defined below.

https://github.com/fritzo/jenn3d/blob/ba61b4de06879b9ce5f0d4c120ed482f2ab81734/glut_wasm.h#L10-L13