VFXOpts

Whether VFX-JS should start playing animations automatically (Default: true).

If false, you have to call VFX.play() manually to start animation, or render frames only when it's necessary by calling VFX.render().

The pixelRatio of the WebGL rendering context.

VFX-JS renders the output with window.devicePixelRatio by default. This means the resolution of the WebGL canvas gets larger in high-DPI display devices (e.g. iPhone).

However, you might find VFX-JS not being rendered smoothly, especially in low-end devices. In such case, you can pass lower values to pixelRatio so VFX-JS can render in lower resolutions.

For example, if pixelRatio is 0.5, VFX-JS renders in the half resolution of the native resolution.

ref. https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

Post effect to be applied to the final output. You can specify a custom fragment shader to process the entire canvas output. You can also pass VFXPass[] for a multipass post-effect chain.

Keep the WebGL drawing buffer across frames (Default: false).

Enable this to read the canvas (via VFX.canvas) outside the frame it was rendered in — e.g. to composite the output into another canvas. It can slightly raise memory and GPU cost, so leave it off unless you need it.

This is a context-creation flag, so it is fixed for the life of the VFX instance and cannot be changed at runtime.

Option to control the dynamic scroll technique to reduce scroll jank (Default: 0.1).

If a number is given, VFX-JS will use the number as the padding ratio. For example, if 0.2 is given, VFX-JS will add 20% of padding to the canvas. (= the canvas width & height will be 140% of the window width & height)

If [number, number] is given, VFX-JS will use the numbers as the horizontal & vertical padding ratio. For example, if [0, 0.2] is given, VFX-JS will only add the vertical padding with 20% height.

If you prefer not using the scroll jank technique, specify false.

Playback rate of the animation clock that drives the time uniform (Default: 1).

1 is realtime, 0.5 is half speed, 2 is double speed, 0 pauses the animation (frames still render, so scroll / mouse stay live), and negative values run time backwards.

Can be changed at runtime via VFX.timeScale, and the clock can be pinned to an exact value with VFX.setTime (useful for scrubbing or deterministic snapshots).

A wrapper element to append the WebGL canvas to instead of document.body. Prevents scroll overflow caused by the canvas extending beyond the page.

The wrapper must have position: relative and overflow: hidden, and should be at the page origin (0, 0) containing all page content.

z-index for the WebGL canvas. This is useful if you want to place the canvas behind other DOM element, or vice versa.