preface

Sometimes we do an ordinary background site, not bother to disturb the UI, just want to make a passable login background, of course, the best cool point.

1. WebGL fluid simulation

Official demo link

Making a link

However, the official one does not support ES Import, only supports mouse click trigger effects, does not support setting background images, and transparency is not really transparent.

After wandering around the issue area, there are a lot of people who reflect the needs of hover trigger and background image, so I made an out-of-the-box version to solve all the above problems:

features

  • √ ES modular
  • √ Configurable: fluid density, velocity diffusion range, pressure, splash radius, light and shadow effect, etc. (official)
  • √ Configures whether to render random splashes during initialization
  • Square root zero depends on
  • √ Default hover trigger effect, can also be set to click
  • √ Custom background image

Quick learning

$ yarn add webgl-fluid
Copy the code
import WebglFluid from 'webgl-fluid'

WebglFluid(document.querySelector('canvas'))
Copy the code

Modifying Default Configurations

WebglFluid(document.querySelector('canvas'), {
  IMMEDIATE: true.// Whether to render random splashes during initialization
  TRIGGER: 'hover'.// Can be changed to 'click'
  SIM_RESOLUTION: 128.DYE_RESOLUTION: 1024.CAPTURE_RESOLUTION: 512.DENSITY_DISSIPATION: 1.VELOCITY_DISSIPATION: 0.2.PRESSURE: 0.8.PRESSURE_ITERATIONS: 20.CURL: 30.SPLAT_RADIUS: 0.25.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,})Copy the code

Used in Vue

<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>
Copy the code

Custom background image

css

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

js

WebglFluid(document.querySelector('canvas'), {
  TRANSPARENT: true
})
Copy the code

2. Random particles (interactive)

Making a link

Used in Vue

// Particles. Json is available in the official readme.md
import particlesJSConfig from '.. /.. /assets/particles.json'

export default {
  mounted() {
  	  require('particles.js')
      window.particlesJS('particles-js', particlesJSConfig, () = > {
      console.log('callback - particles.js config loaded')}}}Copy the code

3. Random triangles

Github Link (GPL certificate)

Visual adjustment export image