Type Alias VFXOpts

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

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

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().

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.

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.

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.