Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
webgl-fluid
Advanced tools
webgl-fluid - npm Package Compare versions
Comparing version 0.3.1 to 0.3.2
| { | ||
| "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" | ||
| } | ||
| } |
133
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 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by207.36%
546141
- Dev dependency count
- decreased by-33.33%
6
- Number of package files
- increased by40%
7
- Lines of code
- increased by0.08%
2505
- Number of lines in readme file
- increased by16.13%
252
No dependency changes