WebGL Fluid

Features

Hover to activate by default, can also be click
Control whether to generate configurable number of random splats at initialization and at intervals
Background image

Install

NPM

npm i webgl-fluid

CDN + ESM

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

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

      WebGLFluid(document.querySelector('canvas'), {
        // options
      })
    </script>
  </body>
</html>

CDN + IIFE

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <canvas style="width: 100vw; height: 100vh" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
      WebGLFluid(document.querySelector('canvas'), {
        // options
      })
    </script>
  </body>
</html>

Options

WebGLFluid(document.querySelector('canvas'), {
  TRIGGER: 'hover',
  IMMEDIATE: true,
  AUTO: false,
  INTERVAL: 3000,
  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,
  SPLAT_COUNT: Number.parseInt(Math.random() * 20) + 5,
  SHADING: true,
  COLORFUL: true,
  COLOR_UPDATE_SPEED: 10,
  PAUSED: false,
  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,
})

Trigger Mode

WebGLFluid(document.querySelector('canvas'), {
  TRIGGER: 'hover', // Can be change to 'click'
})

Auto Splating at Initialization

WebGLFluid(document.querySelector('canvas'), {
  IMMEDIATE: true,
})

Auto Splating at Intervals

WebGLFluid(document.querySelector('canvas'), {
  AUTO: true, // Whether to enable auto-splating
  INTERVAL: 3000, // The time (in milliseconds) the timer should delay in between auto-splating
})

Set the Splats' Count

WebGLFluid(document.querySelector('canvas'), {
  SPLAT_COUNT: Number.parseInt(Math.random() * 20) + 5,
})

Background Image

CSS

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

WebGLFluid(document.querySelector('canvas'), {
  TRANSPARENT: 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.

Example

Vue 3

<script setup>
import { onMounted, ref } from 'vue'
import WebGLFluid from 'webgl-fluid'

const canvas = ref()

onMounted(() => {
  WebGLFluid(canvas.value)
})
</script>

<template>
  <canvas ref="canvas" />
</template>

<style>
canvas {
  width: 100vw;
  height: 100vh;
}
</style>

Vue 2

<script>
import WebGLFluid from 'webgl-fluid'

export default {
  mounted() {
    WebGLFluid(this.$refs.canvas)
  }
}
</script>

<template>
  <canvas ref="canvas" />
</template>

<style>
canvas {
  width: 100vw;
  height: 100vh;
}
</style>

Vanilla JS or Any Other Framework

<!-- 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 WebGLFluid from 'webgl-fluid'

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

Changelog

Detailed changes for each release are documented in the release notes

cloydlau / webgl-fluid Goto Github PK

webgl-fluid's Introduction