🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
webgl-fluid-enhanced
Advanced tools
webgl-fluid-enhanced - npm Package Compare versions
Comparing version 0.6.1 to 0.7.0
| { | ||
| "name": "webgl-fluid-enhanced", | ||
| "version": "0.6.1", | ||
| "version": "0.7.0", | ||
| "description": "WebGL Fluid Simulation for modern webpages (works even on mobile)", | ||
| "keywords": [ | ||
| "webgl", | ||
| "background", | ||
| "navier-strokes", | ||
| "fluid-simulation", | ||
| "es-module" | ||
| ], | ||
| "author": "Michael Brusegard", | ||
| "license": "MIT", | ||
| "type": "module", | ||
| "main": "./build/index.js", | ||
| "module": "./build/index.js", | ||
| "types": "./build/index.d.ts", | ||
| "types": "./dist/index.d.ts", | ||
| "main": "./dist/index.umd.js", | ||
| "module": "./dist/index.es.js", | ||
| "files": [ | ||
| "./build" | ||
| "./dist" | ||
| ], | ||
| "exports": { | ||
| ".": { | ||
| "types": "./build/index.d.ts", | ||
| "import": "./build/index.js" | ||
| "types": "./dist/index.d.ts", | ||
| "require": "./dist/index.umd.js", | ||
| "import": "./dist/index.es.js" | ||
| } | ||
| }, | ||
| "scripts": { | ||
| "build": "tsc --project tsconfig.build.json && bun build ./src/index.ts --outdir ./build --minify", | ||
| "dev": "bun run --hot server.ts", | ||
| "watch": "tsc --watch --project tsconfig.build.json --emitDeclarationOnly false", | ||
| "lint": "eslint --ext '**/*.ts}" | ||
| "build": "vite build", | ||
| "dev": "vite --host", | ||
| "lint": "prettier --write . && eslint --fix .", | ||
| "start": "vite serve", | ||
| "docs:build": "cd docs && bunx next build && mkdir -p .next/standalone/public .next/standalone/.next/static && cp -r public/* .next/standalone/public && cp -r .next/static/* .next/standalone/.next/static", | ||
| "docs:dev": "cd docs && bunx next dev", | ||
| "docs:start": "cd docs && bun run .next/standalone/server.js" | ||
| }, | ||
@@ -37,2 +48,3 @@ "repository": { | ||
| "@semantic-release/git": "^10.0.1", | ||
| "@trivago/prettier-plugin-sort-imports": "^4.3.0", | ||
| "@types/eslint": "^8.56.2", | ||
@@ -43,7 +55,8 @@ "@typescript-eslint/eslint-plugin": "^6.19.1", | ||
| "eslint-config-prettier": "^9.1.0", | ||
| "eslint-plugin-prettier": "^5.1.3", | ||
| "hono": "^3.12.8", | ||
| "prettier": "^3.2.4", | ||
| "prettier-plugin-tailwindcss": "^0.6.5", | ||
| "semantic-release": "^23.0.0", | ||
| "typescript": "^5.3.3" | ||
| "typescript": "^5.5.3", | ||
| "vite": "^5.3.3", | ||
| "vite-plugin-dts": "^3.9.1" | ||
| }, | ||
@@ -50,0 +63,0 @@ "release": { |
@@ -9,15 +9,18 @@ # [WebGL Fluid Enhanced](https://www.npmjs.com/package/webgl-fluid-enhanced) | ||
| I wanted to use Pavel Dobryakov's [WebGL Fluid Simulation](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation) for [my personal website](https://www.michaelbrusegard.com) ([see code](https://github.com/michaelbrusegard/personal-website)), but I couldn't find a way to use it with Next.js. So I decided to add ES Module Support. I also added Typescript and some extra config options so I can personally customise it how I like. I removed the config GUI and other boilerplate and minimized the package. I hope you find it useful! | ||
| > [!IMPORTANT] | ||
| > The new documentation and playground can be found [here](https://webgl-fluid-enhanced.michaelbrusegard.com). | ||
| #### [Preview here!](https://michaelbrusegard.github.io/WebGL-Fluid-Enhanced/) | ||
| ## Table of Contents | ||
| ## Screenshots | ||
| 1. [WebGL Fluid Enhanced](#webgl-fluid-enhanced) | ||
| 2. [Documentation for Outdated Version (v0.6.1 and Prior)](#documentation-for-outdated-version-v061-and-prior) | ||
| 3. [Want to contribute](#want-to-contribute) | ||
| 4. [References](#references) | ||
| 5. [License](#license) | ||
|  | ||
|  | ||
|  | ||
|  | ||
| ## Install | ||
| ## Documentation for Outdated Version (v0.6.1 and Prior) | ||
| ### Install | ||
| ```bash | ||
@@ -27,3 +30,3 @@ npm install webgl-fluid-enhanced | ||
| ## New Features | ||
| ### New Features | ||
@@ -43,3 +46,3 @@ - Ability to change config after simulation has started | ||
| ## Config options | ||
| ### Config options | ||
@@ -81,5 +84,5 @@ ```js | ||
| ## General info | ||
| ### General info | ||
| ### Usage | ||
| #### Usage | ||
@@ -142,13 +145,13 @@ Initialise: | ||
| ### Set background image | ||
| #### Set background image | ||
| To set background image make sure the `TRANSPARENT` option is set to `true`, and in the CSS you can set `background-image: url('<PHOTO-URL>');` and `background-size: 100% 100%;` to fill the whole canvas. | ||
| ### Background color | ||
| #### Background color | ||
| When using the `BACK_COLOR` option, the color you provided will be whitened when the `BLOOM` option is set to `true`. | ||
| ## Examples | ||
| ### Examples | ||
| ### HTML | ||
| #### HTML | ||
@@ -163,3 +166,3 @@ ```html | ||
| "imports": { | ||
| "webgl-fluid-enhanced": "https://unpkg.com/webgl-fluid-enhanced@latest" | ||
| "webgl-fluid-enhanced": "https://esm.run/webgl-fluid-enhanced@latest" | ||
| } | ||
@@ -183,3 +186,3 @@ } | ||
| ### React | ||
| #### React | ||
@@ -208,6 +211,7 @@ ```js | ||
| ### Next.js (tailwindcss) | ||
| #### Next.js (tailwindcss) | ||
| ```tsx | ||
| 'use client'; | ||
| import { useEffect, useRef } from 'react'; | ||
@@ -230,3 +234,3 @@ import webGLFluidEnhanced from 'webgl-fluid-enhanced'; | ||
| return <canvas ref={canvasRef} className="w-screen h-screen" />; | ||
| return <canvas ref={canvasRef} className='h-screen w-screen' />; | ||
| }; | ||
@@ -237,3 +241,3 @@ | ||
| ### Vue.js | ||
| #### Vue.js | ||
@@ -269,3 +273,3 @@ ```vue | ||
| ### Angular | ||
| #### Angular | ||
@@ -296,3 +300,3 @@ ```ts | ||
| ### Svelte | ||
| #### Svelte | ||
@@ -320,8 +324,10 @@ ```svelte | ||
| ## Want to contribute? | ||
| ## Want to contribute | ||
| Feel free to open an issue or a pull request! I'm always open to suggestions and improvements, and I have tried to make the development environment as good as possible. Right now I have only added typescript definitions to the package API because I am not that familiar with all the internal code of Pavel Dobryakov's work. | ||
| Feel free to open an issue or a pull request! I'm always open to suggestions and improvements, and I have tried to make the development environment as good as possible with a descriptive file structure and TypeScript definitions. | ||
| ## References | ||
| https://github.com/PavelDoGreat/WebGL-Fluid-Simulation | ||
| https://developer.nvidia.com/gpugems/gpugems/part-vi-beyond-triangles/chapter-38-fast-fluid-dynamics-simulation-gpu | ||
@@ -328,0 +334,0 @@ |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
135861
150.06%- Number of package files
6
20%- Lines of code
2293
340.12%- Number of lines in readme file
329
1.86%Worsened metrics
- Dev dependency count
14
16.67%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes