Optional
pixelRatio?: numberThe 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
Optional
zIndex?: numberz-index
for the WebGL canvas.
This is useful if you want to place the canvas behind other DOM element, or vice versa.
Optional
autoplay?: booleanWhether 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()
.
Optional
scrollPadding?: number | [number, number] | falseOption 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
.
Optional
postEffect?: VFXPostEffectPost effect to be applied to the final output.
You can specify a custom fragment shader to process the entire canvas output.
Options to initialize
VFX
class.