Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

webgl-fluid

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

webgl-fluid

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

0.3.0
Source
npm

Version published: 2 years ago

Maintainers: 1

Created: 4 years ago

Source

WebGL Fluid

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

🕹 Online Playground

Features

Hover to activate by default, can also be Click
Background image
Control whether to trigger multiple random splats initially

Install

NPM

import WebGLFluid from 'webgl-fluid'

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

CDN

Using the ESM Build

<!DOCTYPE html>
<html lang="en">
<body>
<canvas style="width: 100vw; height: 100vh;" />
<script type="importmap">
  {
    "imports": {
      "webgl-fluid": "https://unpkg.com/webgl-fluid@0.3/dist/webgl-fluid.mjs"
    }
  }
</script>
<script type="module">
import WebGLFluid from 'webgl-fluid'

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

Using the Global Build

<!DOCTYPE html>
<html lang="en">
<body>
<canvas style="width: 100vw; height: 100vh;" />
<script src="https://unpkg.com/webgl-fluid@0.3"></script>
<script>
WebGLFluid(document.querySelector('canvas'), {
  // options
})
</script>
</body>
</html>

Options

WebGLFluid(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,
  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,
})

Background Image

CSS

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

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

Example

Vanilla

See CDN.

Vue 3

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

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

const canvas = ref()

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

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

Vue 2

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

<script>
import WebGLFluid from 'webgl-fluid'

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

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

Changelog

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

FAQs

What is webgl-fluid?

Is webgl-fluid well maintained?

Package last updated on 27 Nov 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install