Skip to content

gpuslider 1.2.0

Choose a tag to compare

@niklasp niklasp released this 07 Oct 11:58
· 27 commits to main since this release

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.