webgl-fluid-offscreen

v0.1.5

Published

5 months ago

ES Module support for https://github.com/PavelDoGreat/WebGL-Fluid-Simulation. With OffScreenCanvas fix

Downloads

0High
0Medium
0Low

arjunsdev

webgl fluid offscreen background

Features

Hover to activate by default, can also be Click
Background image
Control whether to trigger multiple random splats initially
Single color possible
GUI can be hidden

Install

NPM

npm i webgl-fluid-custom

CDN + ESM

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body id="canvasParent">
  <canvas style="width: 100vw; height: 100vh;" />
  <script type="importmap">
    {
      "imports": {
        "webgl-fluid-custom": "https://cdn.jsdelivr.net/npm/webgl-fluid-custom/dist/webgl-fluid-custom.mjs"
      }
    }
  </script>
  <script type="module">
    import WebGLFluidCustom from 'webgl-fluid-custom'

    WebGLFluidCustom(document.querySelector('canvas'), {
      // options
    },document.querySelector("#canvasParent"))
  </script>
</body>

</html>

CDN + IIFE

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body id="canvasParent">
  <canvas style="width: 100vw; height: 100vh;" />
  <script src="https://cdn.jsdelivr.net/npm/webgl-fluid-custom"></script>
  <script>
   WebGLFluidCustom(document.querySelector('canvas'), {
      // options
    },document.querySelector("#canvasParent"))
  </script>
</body>

</html>

Options

WebGLFluidCustom(document.querySelector('canvas'), {
  IMMEDIATE: true, // Whether to trigger multiple random splats when initialized
  TRIGGER: 'hover', // Can be change to 'click'
  SIM_RESOLUTION: 128,
  DYE_RESOLUTION: 1024,
  CAPTURE_RESOLUTION: 512,
  DENSITY_DISSIPATION: 1,
  VELOCITY_DISSIPATION: 0.3,
  PRESSURE: 0.8,
  PRESSURE_ITERATIONS: 20,
  CURL: 30,
  SPLAT_RADIUS: 0.35,
  SPLAT_FORCE: 6000,
  SHADING: true,
  COLORFUL: true,
  COLOR_UPDATE_SPEED: 10,
  PAUSED: false,
  UNIQUE_COLOR: true, // If you want a unique color
  COLOR: { r: 1, g: 1, b: 1 }, //Set the unique color
  BACK_COLOR: { r: 0, g: 0, b: 0 },
  TRANSPARENT: false,
  BLOOM: true,
  BLOOM_ITERATIONS: 8,
  BLOOM_RESOLUTION: 256,
  BLOOM_INTENSITY: 0.8,
  BLOOM_THRESHOLD: 0.6,
  BLOOM_SOFT_KNEE: 0.7,
  SUNRAYS: true,
  SUNRAYS_RESOLUTION: 196,
  SUNRAYS_WEIGHT: 1.0,
  GUI: true,
})

Background Color

Background color will be whitened by 13 on each RGB color values when options.BLOOM is true. Set it to false to get pure color.

Background Image

CSS

canvas {
  width: 100vw;
  height: 100vh;
  background-image: url("xxx.png");
  background-size: 100% 100%;
}

WebGLFluidCustom(document.querySelector('canvas'), {
  TRANSPARENT: true
})

Example

Vanilla

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <canvas style="width: 100vw; height: 100vh;" />
  <script src="src/index.js"></script>
</body>

</html>

// src/index.js

import WebGLFluidCustom from 'webgl-fluid-custom'

WebGLFluidCustom(document.querySelector('canvas'), {
  // options
})

Changelog

Detailed changes for each release are documented in the release notes.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme