Webgl-boom-js is a library for particle explosions that simply “blow up DOM elements”. Here is a simple example of “exploding” the DOM element when clicked:

The principle of

As the name implies, the core of WebGL-boom-JS is implemented using WebGL (which means it must run on webGL-compatible browsers). In short, the DOM element is converted into an image, and then the image is rendered in WebGL to “explode” effect. Thanks to webGL’s excellent rendering performance, We can easily achieve 60fps.

The specific scheme involves more webGL knowledge:

  1. Insert a full-screen canvas on the page to get the WebGL context

  2. Record the location and size information of DOM elements, and convert DOM elements into pictures. Here we use HTML2Canvas (github.com/niklasvh/ht…)

  3. To generate particle grid, we need to calculate the central point position of each particle and the size of each particle, which is achieved by USING JS

  4. Write particle mesh data and image texture data to vertex buffer and texture buffer respectively

  5. Write vertex shader code that generates a random direction for each particle and calculates the particle’s current position based on initial position, initial velocity, acceleration, and time t

  6. Write chip shader code, here only need to read the image texture data rendering

  7. The requestAnimationFrame loop modifies the value of time t and rerenders the Canvas

use

The installation

npm i webgl-boom-js
Copy the code

use

import boomJS from "webgl-boom-js";
document.body.addEventListener("click".(e) = > {
  const ele = e.target as HTMLElement;
  boomJS(ele, {
    speed: 0.001.duration: 3000.onStart: () = > {
      ele.style.opacity = "0";
    },
    onEnd: () = > {
      ele.style.opacity = "1"; }}); });Copy the code

function

  • Supports configuration of particle number
  • Supports configuration of initial blast velocity, drag acceleration, and blast duration
  • Support for animation start and end callbacks

The characteristics of

  • Based on webGL, it has good performance and can achieve large-scale particle explosion effect
  • Lightweight, only 14KB in size (not included)html2canvas)
  • Support for animation start and end callbacks
  • Supporting Promise

Github

Webgl – boom – js: – github.com/junqiuzhang…

In the meantime, AMway takes a look at my other Github projects:

  • Minecraft for the Web: github.com/junqiuzhang…
  • Drag library: github.com/junqiuzhang…
  • React Virtual Rendering: github.com/junqiuzhang…