Launch Week Day 5: Introducing Reachability for PHP.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

webgl-fluid

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

webgl-fluid - npm Package Compare versions

Comparing version
0.3.1
 to
0.3.2
dist/webgl-fluid.mjs.map

Sorry, the diff of this file is too big to display

dist/webgl-fluid.umd.js.map

Sorry, the diff of this file is too big to display

+8
-11
package.json
{
"name": "webgl-fluid",
"pascalCasedName": "WebGLFluid",
"version": "0.3.1",
"version": "0.3.2",
"private": false,

@@ -9,2 +9,7 @@ "description": "ES Module support for https://github.com/PavelDoGreat/WebGL-Fluid-Simulation.",

"repository": "https://github.com/cloydlau/webgl-fluid",
"keywords": [
"webgl",
"fluid",
"background"
],
"exports": {

@@ -30,23 +35,15 @@ ".": {

"doc": "vitepress dev --open /README",
"release": "npx case-police --ignore ./src --fix && npx lint-staged && pnpm build && cl release"
"release": "npx case-police --ignore ./src --fix && pnpm build && cl release"
},
"devDependencies": {
"@antfu/eslint-config": "latest",
"@commitlint/cli": "latest",
"@commitlint/config-conventional": "latest",
"case-police": "latest",
"eslint": "latest",
"husky": "latest",
"lint-staged": "latest",
"vite": "latest",
"vitepress": "latest"
},
"lint-staged": {
"{src,__tests__}/**.*": [
"eslint --fix"
]
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
"registry": "https://registry.npmjs.org"
}
}
+84
-49
README.md

@@ -1,18 +0,20 @@

# WebGL Fluid <sup>[![Version Badge][npm-version-svg]][package-url]</sup>
<h1 align="center">
<a href="https://npmjs.com/package/webgl-fluid" target="_blank" rel="noopener noreferrer">
WebGL Fluid <sup><img alt="version" src="https://versionbadg.es/cloydlau/webgl-fluid.svg"></sup>
</a>
</h1>
[npm-version-svg]: https://versionbadg.es/cloydlau/webgl-fluid.svg
[package-url]: https://npmjs.com/package/webgl-fluid
<p align="center">
ES Module support for <a href="https://github.com/PavelDoGreat/WebGL-Fluid-Simulation">WebGL-Fluid-Simulation</a>
<br>
🕹 <a href="https://cloydlau.github.io/demo/webgl-fluid.html">Playground</a>
</p>
<p align="left">
<p align="center">
<a href="https://www.npmjs.com/package/webgl-fluid?activeTab=dependencies"><img alt="zero dependencies" src="https://img.shields.io/badge/dependencies-0-green.svg"></a>
<a href="https://bundlephobia.com/package/webgl-fluid"><img alt="minzipped size" src="https://img.shields.io/bundlephobia/minzip/webgl-fluid"></a>
<a href="https://npmcharts.com/compare/webgl-fluid"><img alt="downloads" src="https://img.shields.io/npm/dt/webgl-fluid"></a>
<a href="https://eslint.org"><img alt="code style" src="https://img.shields.io/badge/code_style-ESLint-4B32C3.svg?logo=eslint"></a>
<a href="https://conventionalcommits.org"><img alt="conventional commits" src="https://img.shields.io/badge/commits-Conventional-FE5196.svg?logo=conventionalcommits&logoColor=white"></a>
</p>
> ES Module support for https://github.com/PavelDoGreat/WebGL-Fluid-Simulation.
🕹 [Online Playground](https://cloydlau.github.io/demo/webgl-fluid.html)
<br>

@@ -32,42 +34,40 @@

```ts
import WebGLFluid from 'webgl-fluid'
WebGLFluid(document.querySelector('canvas'), {
// options
})
```shell
npm add webgl-fluid
```
<br>
<a name="CDN"></a>
### CDN
### CDN + ESM
#### Using the ESM Build
```html
<!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://unpkg.com/webgl-fluid@0.3/dist/webgl-fluid.mjs"
<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'
</script>
<script type="module">
import WebGLFluid from 'webgl-fluid'
WebGLFluid(document.querySelector('canvas'), {
// options
})
</script>
WebGLFluid(document.querySelector('canvas'), {
// options
})
</script>
</body>
</html>
```
#### Using the Global Build
### CDN + UMD

@@ -77,11 +77,17 @@ ```html

<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas style="width: 100vw; height: 100vh;" />
<script src="https://unpkg.com/webgl-fluid@0.3"></script>
<script>
WebGLFluid(document.querySelector('canvas'), {
// options
})
</script>
<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>

@@ -128,2 +134,9 @@ ```

## 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.
<br>
## Background Image

@@ -135,6 +148,6 @@

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

@@ -157,6 +170,30 @@ ```

See [CDN](#CDN).
```html
<!-- index.html -->
<br>
<!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>
```
```ts
// src/index.js
import WebGLFluid from 'webgl-fluid'
WebGLFluid(document.querySelector('canvas'), {
// options
})
```
### Vue 3

@@ -188,4 +225,2 @@

<br>
### Vue 2

@@ -192,0 +227,0 @@ 

dist/webgl-fluid.mjs

Sorry, the diff of this file is too big to display

dist/webgl-fluid.umd.js

Sorry, the diff of this file is too big to display