Scroll linked effects in a WebGL context

In response to  
https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects

I am using the following scroll linked effects in a WebGL context:

1. 3D Parallax Eye Position linked to Scroll
A WebGL based 3D scene on the page changes its virtual eye position
linked to scrolling. This automatically leads to a parallax scrolling
effect. Described in http://www.taccgl.org/blog/parallax-scrolling.html
and used on http://www.taccgl.org/


2. (WebGL) Canvas Size Optimization
The size of an HTML canvas element is reduced (and position adapted)  
so that the
remaining smaller canvas only covers visible parts of the original canvas.

Note that the size (in device pixels) of a WebGL canvas is for practical
applications limited by GPU performance. Because WebGL recalculates each pixel
anew per frame, the number of device pixels of the canvas is crucial.
I would like to use a canvas that covers a complete HTML document, which can
be many screens long and much too big for WebGL. However, also by zooming into
a fixed size (in CSS pixels) canvas it can grow very large measured in  
device pixels.
Yet it can be displayed nicely with WebGL if only the visible pixels
of the canvas are effectively rendered.

Ideally the user just sees a 3D scene scrolling just like normal  
content, while
internally the position of the canvas on the document changes and WebGL
renders a different part of the 3D scene reflecting the scroll operation.

This means that on scroll (as well as on window resize, zoom, pinch  
zoom and panning)
position and possibly size of the canvas element changes and that the  
rendered WebGL
content on the canvas also changes to show the then visible part of
the 3D scene. It is important that changes of canvas position/size and
of the canvas content take effect simultaneously on the next frame.

Examples are http://taccgl.org/blog/HTMLpages-with-3D-objects.html  
(without parallax
scrolling) and http://www.taccgl.org/ (with additional parallax scrolling).



On my desktop computer, scrolling looks fine in Chrome, on slower mobile
devices it becomes jumpy. On FF the webgl content seems to lag behind  
on scroll,

Measurements show, that even on a desktop, there are dropped frames on a
scroll, i.e. requestAnimationFrame is not called in time to maintain 60fps
during the scroll operation. I use the onscroll handler to inform the WebGL
about the scroll operation, so if this is called late,
the WebGL content lags behind on scroll as it might be the case in FF.



Helmut



-
-------------------------------------------------------------------------
     H.E.I. Informationssysteme GmbH | Wimpfenerstraße 23  68259 Mannheim
Germany, Tel: +49 621-795141 | Fax: +49 621-795161 | mailto:emmel@taccgl.org
   Geschäftsführer: Dr.Helmut Emmelmann, StNr.37001/32880,UstId DE185233091
              Handelsregister: HRB 7273 | Amtsgericht Mannheim
     http://www.taccgl.org   http://www.taccgl.de  http://www.hei.de
-------------------------------------------------------------------------





----------------------------------------------------------------
This message was sent using IMP, the Internet Messaging Program.

Received on Friday, 3 June 2016 20:31:55 UTC