Type Alias VFXOpts

Type declaration

• OptionalpixelRatio?: number

  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

• OptionalzIndex?: number

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

• Optionalautoplay?: boolean

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

• OptionalscrollPadding?: number | [number, number] | false

  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.

• OptionalpostEffect?: VFXPostEffect

  Post effect to be applied to the final output.
  You can specify a custom fragment shader to process the entire canvas output.