feat: update npm packages

hsimpson · Nov 2, 2023 · 49c9440 · 49c9440
1 parent 280dff3
commit 49c9440
Show file tree

Hide file tree

Showing 32 changed files with 1,400 additions and 1,352 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,11 +9,11 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
-    'prettier',
+    'plugin:prettier/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaVersion: 2022,
+    ecmaVersion: 2020,
     project: './tsconfig.json',
     tsconfigRootDir: __dirname,
     sourceType: 'module',

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-20.3.0
+20.9.0
diff --git a/package.json b/package.json
@@ -23,29 +23,27 @@
   },
   "homepage": "https://github.com/hsimpson/ts-raytracer#readme",
   "devDependencies": {
-    "@types/node": "^20.3.1",
-    "@types/react": "^18.2.13",
-    "@types/react-dom": "^18.2.6",
+    "@types/node": "^20.8.10",
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.2.14",
     "@types/recoil": "0.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
-    "@typescript-eslint/typescript-estree": "^5.60.0",
-    "@vitejs/plugin-react": "^4.0.1",
-    "@webgpu/types": "^0.1.33",
-    "eslint": "^8.43.0",
-    "eslint-config-prettier": "^8.8.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "@vitejs/plugin-react": "^4.1.1",
+    "@webgpu/types": "^0.1.38",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-config-react": "^1.1.7",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.3",
     "resize-observer-polyfill": "^1.5.1",
-    "rimraf": "^5.0.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.9"
+    "rimraf": "^5.0.5",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
   },
   "dependencies": {
-    "@types/dom-webcodecs": "^0.1.7",
     "alea": "^1.0.1",
     "gl-matrix": "^3.4.3",
     "react": "^18.2.0",

diff --git a/src/components/dropdown.tsx b/src/components/dropdown.tsx
@@ -23,7 +23,7 @@ export const DropDown = (props: DropDownProps): React.ReactElement => {
     <div className="dropdown">
       <span>{props.label}</span>
       <select defaultValue={props.default} onChange={onSelectChange}>
-        {props.items.map((item) => {
+        {props.items.map(item => {
           return (
             <option key={item.value} value={item.value} disabled={item.disabled}>
               {item.text}

diff --git a/src/components/gui.tsx b/src/components/gui.tsx
@@ -45,28 +45,28 @@ const Gui = (): React.ReactElement => {
         size={5}
         min={1}
         value={raytracerState.imageWidth}
-        onValueChange={(imageWidth) => setRaytracerState({ ...raytracerState, imageWidth })}
+        onValueChange={imageWidth => setRaytracerState({ ...raytracerState, imageWidth })}
       />
       <NumberInput
         label="Image height:"
         size={5}
         min={1}
         value={raytracerState.imageHeight}
-        onValueChange={(imageHeight) => setRaytracerState({ ...raytracerState, imageHeight })}
+        onValueChange={imageHeight => setRaytracerState({ ...raytracerState, imageHeight })}
       />
       <NumberInput
         label="Samples per pixel:"
         size={5}
         min={1}
         value={raytracerState.samplesPerPixel}
-        onValueChange={(samplesPerPixel) => setRaytracerState({ ...raytracerState, samplesPerPixel })}
+        onValueChange={samplesPerPixel => setRaytracerState({ ...raytracerState, samplesPerPixel })}
       />
       <NumberInput
         label="Max bounces:"
         size={5}
         min={1}
         value={raytracerState.maxBounces}
-        onValueChange={(maxBounces) => setRaytracerState({ ...raytracerState, maxBounces })}
+        onValueChange={maxBounces => setRaytracerState({ ...raytracerState, maxBounces })}
       />
       {raytracerState.webGPUenabled === false ? (
         <NumberInput
@@ -75,7 +75,7 @@ const Gui = (): React.ReactElement => {
           min={1}
           max={navigator.hardwareConcurrency || 8}
           value={raytracerState.numOfWorkers}
-          onValueChange={(numOfWorkers) => setRaytracerState({ ...raytracerState, numOfWorkers })}
+          onValueChange={numOfWorkers => setRaytracerState({ ...raytracerState, numOfWorkers })}
         />
       ) : (
         ''
@@ -86,33 +86,33 @@ const Gui = (): React.ReactElement => {
         min={8}
         max={512}
         value={raytracerState.tileSize}
-        onValueChange={(tileSize) => setRaytracerState({ ...raytracerState, tileSize })}
+        onValueChange={tileSize => setRaytracerState({ ...raytracerState, tileSize })}
       />
       <CheckBox
         label="WebGPU-compute"
         checked={raytracerState.webGPUenabled}
         disabled={!raytracerState.webGPUavailable}
-        onValueChange={(webGPUenabled) => setRaytracerState({ ...raytracerState, webGPUenabled })}
+        onValueChange={webGPUenabled => setRaytracerState({ ...raytracerState, webGPUenabled })}
       />
       <DropDown
         label="Scene:"
         items={sceneConfig}
         default={raytracerState.scene}
-        onValueChange={(scene) => setRaytracerState({ ...raytracerState, scene })}
+        onValueChange={scene => setRaytracerState({ ...raytracerState, scene })}
       />
 
       <CheckBox
         label="Download"
         checked={raytracerState.download}
         disabled={false}
-        onValueChange={(download) => setRaytracerState({ ...raytracerState, download })}
+        onValueChange={download => setRaytracerState({ ...raytracerState, download })}
       />
 
       <CheckBox
         label="Add stats to download"
         checked={raytracerState.addStatsToImage}
         disabled={!raytracerState.download}
-        onValueChange={(addStatsToImage) => setRaytracerState({ ...raytracerState, addStatsToImage })}
+        onValueChange={addStatsToImage => setRaytracerState({ ...raytracerState, addStatsToImage })}
       />
 
       <button className="resetButton" onClick={onResetClicked}>

diff --git a/src/components/input.tsx b/src/components/input.tsx
@@ -20,14 +20,7 @@ const NumberInput = (props: InputProps): React.ReactElement => {
   return (
     <div className="input">
       <label>{props.label}</label>
-      <input
-        type="number"
-        size={props.size}
-        min={props.min}
-        max={props.max}
-        value={props.value}
-        onChange={onInputChange}
-      />
+      <input type="number" size={props.size} min={props.min} max={props.max} value={props.value} onChange={onInputChange} />
     </div>
   );
 };

diff --git a/src/gltfloader.ts b/src/gltfloader.ts
@@ -84,8 +84,8 @@ export async function load(url: string): Promise<HittableList> {
         new Float32Array(
           buffers[positionBufferView.buffer],
           positionBufferView.byteOffset,
-          positionBufferView.byteLength / Float32Array.BYTES_PER_ELEMENT
-        )
+          positionBufferView.byteLength / Float32Array.BYTES_PER_ELEMENT,
+        ),
       );
 
       let normals;
@@ -98,8 +98,8 @@ export async function load(url: string): Promise<HittableList> {
           new Float32Array(
             buffers[normalBufferView.buffer],
             normalBufferView.byteOffset,
-            normalBufferView.byteLength / Float32Array.BYTES_PER_ELEMENT
-          )
+            normalBufferView.byteLength / Float32Array.BYTES_PER_ELEMENT,
+          ),
         );
       }
 
@@ -110,8 +110,8 @@ export async function load(url: string): Promise<HittableList> {
           new Float32Array(
             buffers[textureCoordBufferView.buffer],
             textureCoordBufferView.byteOffset,
-            textureCoordBufferView.byteLength / Float32Array.BYTES_PER_ELEMENT
-          )
+            textureCoordBufferView.byteLength / Float32Array.BYTES_PER_ELEMENT,
+          ),
         );
       }
 
@@ -121,7 +121,7 @@ export async function load(url: string): Promise<HittableList> {
         const indexArray = new Uint16Array(
           buffers[indicesBufferView.buffer],
           indicesBufferView.byteOffset,
-          indicesBufferView.byteLength / Uint16Array.BYTES_PER_ELEMENT
+          indicesBufferView.byteLength / Uint16Array.BYTES_PER_ELEMENT,
         );
 
         for (let i = 0; i < indicesAccessor.count; i++) {
@@ -158,7 +158,7 @@ export async function load(url: string): Promise<HittableList> {
 
             uv0,
             uv1,
-            uv2
+            uv2,
           );
 
           // // TODO: material

diff --git a/src/gltftypes.ts b/src/gltftypes.ts
@@ -76,15 +76,7 @@ export interface GLTFPrimitive {
   material?: number;
 }
 
-export type GLTFAttributeName =
-  | 'POSITION'
-  | 'NORMAL'
-  | 'TANGENT'
-  | 'TEXCOORD_0'
-  | 'TEXCOORD_1'
-  | 'COLOR_0'
-  | 'JOINTS_0'
-  | 'WEIGHTS_0';
+export type GLTFAttributeName = 'POSITION' | 'NORMAL' | 'TANGENT' | 'TEXCOORD_0' | 'TEXCOORD_1' | 'COLOR_0' | 'JOINTS_0' | 'WEIGHTS_0';
 
 export type GLTFAttribute = { [key in GLTFAttributeName]: number };
 

diff --git a/src/hittables/aabb.ts b/src/hittables/aabb.ts
@@ -81,17 +81,9 @@ export class AABB {
   // }
 
   public static surroundingBox(box0: AABB, box1: AABB): AABB {
-    const small: vec3 = [
-      Math.min(box0.min[0], box1.min[0]),
-      Math.min(box0.min[1], box1.min[1]),
-      Math.min(box0.min[2], box1.min[2]),
-    ];
-
-    const big: vec3 = [
-      Math.max(box0.max[0], box1.max[0]),
-      Math.max(box0.max[1], box1.max[1]),
-      Math.max(box0.max[2], box1.max[2]),
-    ];
+    const small: vec3 = [Math.min(box0.min[0], box1.min[0]), Math.min(box0.min[1], box1.min[1]), Math.min(box0.min[2], box1.min[2])];
+
+    const big: vec3 = [Math.max(box0.max[0], box1.max[0]), Math.max(box0.max[1], box1.max[1]), Math.max(box0.max[2], box1.max[2])];
 
     return new AABB(small, big);
   }

diff --git a/src/hittables/bvhnode.ts b/src/hittables/bvhnode.ts
@@ -1,7 +1,7 @@
 import { HitRecord } from '../raytracer-cpu/hitrecord';
 import { Ray } from '../raytracer-cpu/ray';
 import { serializable } from '../serializing';
-import { randomInt, sortArrayRange } from '../util';
+import { randomInt } from '../util';
 import { AABB } from './aabb';
 import { Hittable } from './hittable';
 import { HittableList } from './hittablelist';
@@ -31,8 +31,8 @@ export class BVHNode extends Hittable {
     node.level = _level;
 
     const flatList = new HittableList();
-    const fillFlatList = (list: HittableList): void => {
-      for (const object of list.objects) {
+    const fillFlatList = (l: HittableList): void => {
+      for (const object of l.objects) {
         if (object instanceof HittableList) {
           fillFlatList(object);
         } else {
@@ -51,13 +51,7 @@ export class BVHNode extends Hittable {
     return node;
   }
 
-  public static createFromObjects(
-    objects: Hittable[],
-    start: number,
-    end: number,
-    time0: number,
-    time1: number
-  ): BVHNode {
+  public static createFromObjects(objects: Hittable[], start: number, end: number, time0: number, time1: number): BVHNode {
     const node = new BVHNode();
     node.init(objects, start, end, time0, time1);
     return node;

diff --git a/src/hittables/movingsphere.ts b/src/hittables/movingsphere.ts
@@ -108,15 +108,9 @@ export class MovingSphere extends Hittable {
     const transformedCenterT1 = vec3.transformMat4(vec3.create(), this.center(t1), this.transform.objectToWorld);
 
     const r = vec3.fromValues(this._radius, this._radius, this._radius);
-    const box0 = new AABB(
-      vec3.sub(vec3.create(), transformedCenterT0, r),
-      vec3.add(vec3.create(), transformedCenterT0, r)
-    );
-
-    const box1 = new AABB(
-      vec3.sub(vec3.create(), transformedCenterT1, r),
-      vec3.add(vec3.create(), transformedCenterT1, r)
-    );
+    const box0 = new AABB(vec3.sub(vec3.create(), transformedCenterT0, r), vec3.add(vec3.create(), transformedCenterT0, r));
+
+    const box1 = new AABB(vec3.sub(vec3.create(), transformedCenterT1, r), vec3.add(vec3.create(), transformedCenterT1, r));
 
     return AABB.surroundingBox(box0, box1);
   }

diff --git a/src/hittables/triangle.ts b/src/hittables/triangle.ts
@@ -1,5 +1,4 @@
 import { vec2, vec3 } from 'gl-matrix';
-import { Material } from '../material';
 import { HitRecord } from '../raytracer-cpu/hitrecord';
 import { Ray } from '../raytracer-cpu/ray';
 import { Transform } from '../raytracer-cpu/transform';
@@ -37,20 +36,9 @@ export class Triangle extends Hittable {
   public readonly surfaceNormal: vec3;
   public readonly transform: Transform = new Transform();
 
-  public material: Material;
   public doubleSided = false;
 
-  public constructor(
-    v0: vec3,
-    v1: vec3,
-    v2: vec3,
-    n0?: vec3,
-    n1?: vec3,
-    n2?: vec3,
-    uv0?: vec2,
-    uv1?: vec2,
-    uv2?: vec2
-  ) {
+  public constructor(v0: vec3, v1: vec3, v2: vec3, n0?: vec3, n1?: vec3, n2?: vec3, uv0?: vec2, uv1?: vec2, uv2?: vec2) {
     super();
     this.v0 = v0;
     this.v1 = v1;

diff --git a/src/material/metal.ts b/src/material/metal.ts
@@ -27,11 +27,9 @@ export class MetalMaterial extends Material {
   public scatter(r_in: Ray, rec: HitRecord, attenuation: vec3, scattered: Ray): boolean {
     const refl = reflect(vec3.normalize(vec3.create(), r_in.direction), rec.normal);
 
-    new Ray(
-      rec.p,
-      vec3.add(vec3.create(), refl, vec3.scale(vec3.create(), randomInUnitSphere(), this._roughness)),
-      r_in.time
-    ).copyTo(scattered);
+    new Ray(rec.p, vec3.add(vec3.create(), refl, vec3.scale(vec3.create(), randomInUnitSphere(), this._roughness)), r_in.time).copyTo(
+      scattered,
+    );
     vec3.copy(attenuation, this._baseColor);
     return vec3.dot(scattered.direction, rec.normal) > 0;
   }

diff --git a/src/raytracer-cpu/compute.worker.ts b/src/raytracer-cpu/compute.worker.ts
@@ -80,7 +80,7 @@ function start(msg: ComputeStartMessage): void {
   const computeEndMessage: ComputeEndMessage = {
     cmd: ComputeCommands.END,
     data: {
-      workerId: workerId,
+      workerId,
       pixelArray: dataArray,
       x,
       y,
@@ -94,7 +94,7 @@ function start(msg: ComputeStartMessage): void {
 }
 
 // Respond to message from parent thread
-controllerCtx.addEventListener('message', (event) => {
+controllerCtx.addEventListener('message', event => {
   const msg = event.data as WorkerMessage;
 
   switch (msg.cmd) {

diff --git a/src/raytracer-cpu/controller.worker.ts b/src/raytracer-cpu/controller.worker.ts
@@ -70,7 +70,7 @@ const stop = (): void => {
 };
 
 // Respond to message from parent thread
-_controllerCtx.addEventListener('message', (event) => {
+_controllerCtx.addEventListener('message', event => {
   const msg = event.data as WorkerMessage;
 
   switch (msg.cmd as ControllerCommands) {