Skip to content

Releases: niklasp/gpuslider

gpuslider 1.2.1

Choose a tag to compare

@niklasp niklasp released this 07 Oct 16:40

Fixed

  • A browser whose WebGPU does not answer (requestAdapter() that never settles, as Chrome's GPU process sometimes does) is drawn by WebGL after two seconds. Before, the slider waited and never drew its canvas. In canvas() and in auto.js.

gpuslider 1.2.0

Choose a tag to compare

@niklasp niklasp released this 07 Oct 11:58

New

  • canvas( { stage } ): an element around the slider that the canvas covers. Covers, fans and piles are drawn past the edge of the slider instead of cut.
  • A post pass, and loupe(): effects over the whole canvas, after all slides are drawn, across the gaps and the borders of the slides. loupe() is a lens with a rim of glass. The pass (2.3 KB with WebGL, 2.8 KB with WebGPU) is loaded only when an effect has a post hook; write your own with post: '…' and scene( uv ).
  • quality(): when frames come late during a move, the canvas draws fewer pixels (1, then 0.75 device pixels per px) and stays so; on a low battery that is not charging, at once. quality:lower says so.
  • Textures of far slides are let go: a slider keeps the textures of the 16 pictures it drew last. A gallery of hundreds no longer holds all of them on the GPU.
  • A ticker with dots: marquee() tells change for every slide it passes, so dots and thumbnails follow it. shift() does so for every plugin that moves the slider.
  • Transforms on slides are yours: the slider moves slides with translate, so transform, scale and rotate of a slide stay the page's, also when a loop sets a slide down on the other side; a scaled slide is measured as it is laid out.
  • view.still: whether the visitor asks for less motion, for plugins.

Fixed

  • Effects under the pointer stay still for visitors who ask for less motion, as speed effects did.
  • Autoplay, videos and marquee() wait until the slider is seen: far down the page nothing starts for a frame.
  • A slider that goes down is measured again when only its height changes (perView: 'auto').

Note

  • The track is moved by style.translate, not style.transform. Code that read the track's transform finds it empty.

Tests

  • Exact shader tests: what the vertex of every effect that lays out gives is what its place() gives in JS, to a hundredth of a pixel, in WebGL and WebGPU (tests/exact.spec.js). npm run test:node runs the WebGPU half in Node through Dawn.

Closes #2, #3, #4.