test: add vitest & playwright tests

Author: GyeongHoKim

.github/workflows/ci.yml

@@ -22,3 +22,12 @@ jobs:
       - run: npm run lint
       - run: npm run type-check
       - run: npm run build
+
+      - name: Run unit tests
+        run: npm run test:unit
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run e2e tests
+        run: npm run test:e2e

.gitignore

@@ -28,6 +28,8 @@ yarn-error.log*
 # Testing
 coverage/
 .nyc_output/
+playwright-report
+test-results
 
 # Misc
 .cache/

README.md

@@ -1,16 +1,16 @@
 # fisheye.js
 
-> Modern fisheye dewarping library for the web, using **General Purpose GPU**
+> Modern fisheye dewarping library for the web using **WebGPU** (general-purpose GPU compute)
 
-fisheye.js is a javascript library for drawing VideoFrame to the canvas with [simple radial lens distortion](<https://en.wikipedia.org/wiki/Distortion_(optics)>) using **GPGPU** WebGPU(WebGL if your browser does not support WebGPU).
+fisheye.js processes [VideoFrame](https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame)s with **WebGPU compute shaders**—no canvas 2D—and corrects fisheye lens distortion using the **OpenCV fisheye camera model** (polynomial in angle θ with coefficients k1–k4), not a simple radial model.
 
 ## Features
 
-- ESM support: You can just `import { Fisheye } from @gyeonghokim/fisheye.js;` in your WebAPP
-- TypeGPU: WebGPU backend with type-safe shader programing(with [typegpu](https://www.npmjs.com/package/typegpu))
-- GPGPU: we do not use canvas element, read from GPU buffer directly(efficient more than other libraries)
-- WebCodecs API: Modern Video processing with WebCodecs' [VideoFrame](https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame)
-- Installation from modern package managers(npm)
+- **WebGPU GPGPU**: Compute-shader pipeline via [TypeGPU](https://www.npmjs.com/package/typegpu); input/output as textures and readback to VideoFrame—no canvas element for dewarping
+- **OpenCV fisheye model**: Distortion model `θ_d = θ × (1 + k1·θ² + k2·θ⁴ + k3·θ⁶ + k4·θ⁸)` for accurate calibration
+- **WebCodecs**: Built on the [VideoFrame](https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame) API
+- **ESM**: `import { Fisheye } from "@gyeonghokim/fisheye.js"`
+- **npm**: Install via npm or other package managers
 
 ## Getting Started(Typescript Example)
 
@@ -68,12 +68,12 @@ Creates a new Fisheye dewarper instance.
 
 **Options:**
 
-- `k1` (number, optional): Fisheye distortion coefficient k1. Typical range: -1.0 to 1.0. Default: `0.5`.
+- `k1` (number, optional): Fisheye distortion coefficient k1. Typical range: -1.0 to 1.0. Default: `0`.
 - `k2` (number, optional): Fisheye distortion coefficient k2. Default: `0`.
 - `k3` (number, optional): Fisheye distortion coefficient k3. Default: `0`.
 - `k4` (number, optional): Fisheye distortion coefficient k4. Default: `0`.
-- `width` (number, optional): Output canvas width. Default: `640`
-- `height` (number, optional): Output canvas height. Default: `480`
+- `width` (number, optional): Output frame width. Default: `300`
+- `height` (number, optional): Output frame height. Default: `150`
 - `fov` (number, optional): Field of view in degrees. Default: `180`
 - `centerX` (number, optional): X offset of the lens center (normalized, -1.0 to 1.0). Default: `0`
 - `centerY` (number, optional): Y offset of the lens center (normalized, -1.0 to 1.0). Default: `0`
@@ -114,7 +114,7 @@ If you receive raw YUV binary data from a camera or server, you can use the `cre
 ```ts
 import { Fisheye, createVideoFrameFromYUV } from "@gyeonghokim/fisheye.js";
 
-const dewarper = new Fisheye({ distortion: 0.5, width: 1920, height: 1080 });
+const dewarper = new Fisheye({ k1: 0.5, width: 1920, height: 1080 });
 
 // Example: Receiving NV12 data from a server
 const response = await fetch("/api/camera/frame");