Use eslint to format code

eslint.config.js

@@ -1,22 +1,41 @@
 import js from '@eslint/js';
 import tseslint from 'typescript-eslint';
+import stylistic from '@stylistic/eslint-plugin';
 
 export default [
-  {
-    files: ['**/*.{js,ts}'],
-  },
-  {
-    ignores: ['dist', 'vite.config.js', 'examples'],
-  },
   js.configs.recommended,
   ...tseslint.configs.strict,
+  stylistic.configs.customize({
+    jsx: false,
+    semi: true,
+    commaDangle: 'never',
+    arrowParens: true,
+    braceStyle: '1tbs',
+    blockSpacing: true,
+    indent: 2,
+    quoteProps: 'as-needed',
+    quotes: 'single'
+  }),
+  {
+    ignores: ['dist']
+  },
   {
     rules: {
       'no-unused-vars': 'off',
       'no-undef': 'off',
+      'prefer-rest-params': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/no-empty-object-type': 'off',
-    },
-  },
+      '@typescript-eslint/no-wrapper-object-types': 'off',
+      '@typescript-eslint/no-dynamic-delete': 'off',
+      '@typescript-eslint/no-invalid-void-type': 'off',
+      '@typescript-eslint/no-this-alias': 'off',
+      '@typescript-eslint/explicit-function-return-type': [
+        'error', {
+          allowExpressions: true
+        }
+      ]
+    }
+  }
 ];

examples/customMaterial.ts

@@ -42,7 +42,7 @@ boxes.computeBVH();
 
 const plantsCount = plantsPos.length * 2;
 
-const plants = new InstancedMesh2(main.renderer, plantsCount, new PlaneGeometry(),  new TileMaterial(plantsCount, texture, 32, 32, { side: DoubleSide })); // alphaTest doesnt' work
+const plants = new InstancedMesh2(main.renderer, plantsCount, new PlaneGeometry(), new TileMaterial(plantsCount, texture, 32, 32, { side: DoubleSide })); // alphaTest doesnt' work
 
 plants.createInstances((obj, index) => {
   obj.position.copy(plantsPos[Math.floor(index / 2)]);
@@ -59,9 +59,9 @@ plants.computeBVH();
 scene.add(boxes, plants);
 
 main.createView({ scene, camera, enabled: false, backgroundColor: 0xbdddf1, onAfterRender: () => {
-    boxesRenderedCount.updateDisplay();
-    plantsRenderedCount.updateDisplay();
-  }
+  boxesRenderedCount.updateDisplay();
+  plantsRenderedCount.updateDisplay();
+}
 });
 
 const controls = new OrbitControls(camera, main.renderer.domElement);

examples/customMaterialFace.ts

@@ -24,7 +24,7 @@ export class TileMaterial extends ShaderMaterial {
   public override fragmentShader = `
     #include <get_from_texture>
 
-	  uniform highp sampler2D dataTexture;
+    uniform highp sampler2D dataTexture;
     uniform sampler2D map;
     varying vec2 vUv;
     flat varying uint vInstanceIndex;
@@ -52,12 +52,12 @@ const scene = new Scene();
 const texture = await Asset.load<Texture>(TextureLoader, 'texture.png');
 texture.magFilter = NearestFilter;
 
-const grass = new Vector4(0, 15, 1/16, 1/16),
-  flower1 = new Vector4(12, 15, 1/16, 1/16),
-  flower2 = new Vector4(13, 15, 1/16, 1/16),
-  stone = new Vector4(1, 15, 2/16, 1/16),
-  snow = new Vector4(2, 11, 1/16, 1/16),
-  plant = new Vector4(14, 10, 1/16, 1/16);
+const grass = new Vector4(0, 15, 1 / 16, 1 / 16),
+  flower1 = new Vector4(12, 15, 1 / 16, 1 / 16),
+  flower2 = new Vector4(13, 15, 1 / 16, 1 / 16),
+  stone = new Vector4(1, 15, 2 / 16, 1 / 16),
+  snow = new Vector4(2, 11, 1 / 16, 1 / 16),
+  plant = new Vector4(14, 10, 1 / 16, 1 / 16);
 
 const faces = 6;
 const count = 6;
@@ -82,5 +82,5 @@ scene.add(boxes);
 
 main.createView({ scene, camera, enabled: false });
 
-const controls = new OrbitControls(camera, main.renderer.domElement); 
+const controls = new OrbitControls(camera, main.renderer.domElement);
 controls.update();

examples/dynamicBVH.ts

@@ -10,7 +10,7 @@ const config = {
   animatedCount: 2000,
   spawnRadius: 75000,
   marginBVH: 200
-}
+};
 
 const main = new Main();
 const random = new PRNG(config.count);
@@ -20,17 +20,16 @@ const scene = new Scene();
 
 // scene.continuousRaycasting = true;
 
-const instancedMesh = new InstancedMesh2<{ r: number, phi: number, theta: number }>(main.renderer, config.count, new OctahedronGeometry(1, 2), new MeshLambertMaterial({ flatShading: true }));
+const instancedMesh = new InstancedMesh2<{ r: number; phi: number; theta: number }>(main.renderer, config.count, new OctahedronGeometry(1, 2), new MeshLambertMaterial({ flatShading: true }));
 
 instancedMesh.createInstances((object) => {
   const r = object.r = random.range(config.spawnRadius * 0.05, config.spawnRadius);
   const phi = object.phi = random.range(0, Math.PI * 2);
   const theta = object.theta = random.range(0, Math.PI * 2);
   object.position.setFromSphericalCoords(r, phi, theta);
-  object.scale.multiplyScalar(random.range(1, 50))
+  object.scale.multiplyScalar(random.range(1, 50));
 });
 
-
 instancedMesh.computeBVH({ margin: config.marginBVH });
 
 instancedMesh.on('click', (e) => {
@@ -51,7 +50,7 @@ scene.on('animate', (e) => {
   camera.getWorldDirection(spotLight.target.position).multiplyScalar(100).add(camera.position);
   camera.getWorldDirection(dirLight.target.position).multiplyScalar(100).add(camera.position);
 
-  const count = Math.min(config.animatedCount, instancedMesh.instancesCount); 
+  const count = Math.min(config.animatedCount, instancedMesh.instancesCount);
 
   for (let i = 0; i < count; i++) {
     const mesh = instancedMesh.instances[i];
@@ -66,8 +65,8 @@ controls.panSpeed = 1000;
 main.createView({ scene, camera, onAfterRender: () => spheresCount.updateDisplay() });
 
 const gui = new GUI();
-gui.add(instancedMesh, "maxCount").name('instances max count').disable();
+gui.add(instancedMesh, 'maxCount').name('instances max count').disable();
 const spheresCount = gui.add(instancedMesh, 'count').name('instances rendered').disable();
-gui.add(config, "count", 0, instancedMesh.maxCount).name('instances count').onChange((v) => instancedMesh.instancesCount = v);
-gui.add(config, "animatedCount", 0, 10000).name('instances animated');
+gui.add(config, 'count', 0, instancedMesh.maxCount).name('instances count').onChange((v) => instancedMesh.instancesCount = v);
+gui.add(config, 'animatedCount', 0, 10000).name('instances animated');
 gui.add(camera, 'far', 100, config.spawnRadius, 20).name('camera far').onChange(() => camera.updateProjectionMatrix());

examples/fastRaycasting.ts

@@ -50,8 +50,8 @@ main.createView({ scene, camera, backgroundColor: 'white', onAfterRender: () =>
 const bvh = instancedMesh.bvh;
 
 const gui = new GUI();
-gui.add(instancedMesh, "maxCount").disable();
+gui.add(instancedMesh, 'maxCount').disable();
 const spheresCount = gui.add(instancedMesh, 'count').name('instances rendered').disable();
-gui.add(instancedMesh, "instancesCount", 0, instancedMesh.maxCount);
-gui.add(config, "useBVH").name('use BVH').onChange((value) => { instancedMesh.bvh = value ? bvh : null });
-gui.add(instancedMesh, "raycastOnlyFrustum").name('raycastOnlyFrustum (if no BVH)');
+gui.add(instancedMesh, 'instancesCount', 0, instancedMesh.maxCount);
+gui.add(config, 'useBVH').name('use BVH').onChange((value) => instancedMesh.bvh = value ? bvh : null);
+gui.add(instancedMesh, 'raycastOnlyFrustum').name('raycastOnlyFrustum (if no BVH)');

examples/objects/random.ts

@@ -1,18 +1,18 @@
 export class PRNG {
-    protected _seed: number;
+  protected _seed: number;
 
-    constructor(seed: number) {
-        this._seed = seed;
-    }
+  constructor(seed: number) {
+    this._seed = seed;
+  }
 
-    public next(): number {
-        let t = (this._seed += 0x6d2b79f5);
-        t = Math.imul(t ^ (t >>> 15), t | 1);
-        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
-        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-    }
+  public next(): number {
+    let t = (this._seed += 0x6d2b79f5);
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  }
 
-    public range(min: number, max: number): number {
-        return min + (max - min) * this.next();
-    }
+  public range(min: number, max: number): number {
+    return min + (max - min) * this.next();
+  }
 }

examples/objects/tileMaterial.ts

@@ -21,7 +21,7 @@ export class TileMaterial extends ShaderMaterial {
   public override fragmentShader = `
     #include <get_from_texture>
 
-	  uniform highp sampler2D offsetTexture;
+    uniform highp sampler2D offsetTexture;
     uniform sampler2D map;
     uniform vec2 tileSize;
     varying vec2 vUv;

examples/sorting.ts

@@ -9,7 +9,7 @@ const config = {
   count: 100000,
   animatedCount: 0,
   customSort: true
-}
+};
 
 const main = new Main();
 const camera = new PerspectiveCameraAuto().translateZ(100);
@@ -33,7 +33,7 @@ const axis = new Vector3(1, 0, 0);
 const controls = new OrbitControls(camera, main.renderer.domElement);
 controls.autoRotate = true;
 
-scene.on('animate', e => {
+scene.on('animate', (e) => {
   controls.update();
 
   for (let i = 0; i < config.animatedCount; i++) {
@@ -46,18 +46,18 @@ scene.on('animate', e => {
 main.createView({ scene, camera, enabled: false, backgroundColor: 'white', onAfterRender: () => spheresCount.updateDisplay() });
 
 const gui = new GUI();
-gui.add(instancedMesh, "maxCount").name('instances max count').disable();
+gui.add(instancedMesh, 'maxCount').name('instances max count').disable();
 const spheresCount = gui.add(instancedMesh, 'count').name('instances rendered').disable();
-gui.add(config, "count", 0, instancedMesh.maxCount).name('instances count').onChange((v) => instancedMesh.instancesCount = v);
-gui.add(config, "animatedCount", 0, 10000).name('instances animated');
-gui.add(instancedMesh, "perObjectFrustumCulled");
-gui.add(instancedMesh, "sortObjects");
-gui.add(instancedMesh.material, "opacity", 0, 1).onChange((v) => {
+gui.add(config, 'count', 0, instancedMesh.maxCount).name('instances count').onChange((v) => instancedMesh.instancesCount = v);
+gui.add(config, 'animatedCount', 0, 10000).name('instances animated');
+gui.add(instancedMesh, 'perObjectFrustumCulled');
+gui.add(instancedMesh, 'sortObjects');
+gui.add(instancedMesh.material, 'opacity', 0, 1).onChange((v) => {
   instancedMesh.material.transparent = v < 1;
   instancedMesh.material.depthWrite = v === 1;
   instancedMesh.material.opacity = v;
   instancedMesh.material.needsUpdate = true;
 });
-gui.add(config, "customSort").name('custom sort').onChange((v) => {
+gui.add(config, 'customSort').name('custom sort').onChange((v) => {
   instancedMesh.customSort = v ? radixSort : null;
 });

examples/test.ts

@@ -1,15 +1,15 @@
-import { Main, PerspectiveCameraAuto } from "@three.ez/main";
-import { DirectionalLight, MeshPhongMaterial, Scene, SphereGeometry } from "three";
-import { InstancedMesh2 } from "../src/index.js";
+import { Main, PerspectiveCameraAuto } from '@three.ez/main';
+import { DirectionalLight, MeshPhongMaterial, Scene, SphereGeometry } from 'three';
+import { InstancedMesh2 } from '../src/index.js';
 
 const main = new Main();
 
 const spheres = new InstancedMesh2(main.renderer, 99 * 99, new SphereGeometry(0.4), new MeshPhongMaterial({ color: 'cyan' }));
 spheres.perObjectFrustumCulled = false;
 
 spheres.updateInstances((obj, index) => {
-    obj.position.x = index % 99 - 49;
-    obj.position.y = Math.trunc(index / 99) - 49;
+  obj.position.x = index % 99 - 49;
+  obj.position.y = Math.trunc(index / 99) - 49;
 });
 
 spheres.on('click', (e) => spheres.setVisibilityAt(e.intersection.instanceId, false));

examples/tween.ts

@@ -22,7 +22,7 @@ planes.createInstances((obj, index) => {
     .to(5000, { rotation, position, color }, {
       onUpdate: () => obj.updateMatrix(),
       onProgress: (t, k, s, e, a) => {
-        if (k === 'color') obj.color = tempColor.lerpColors(s as Color, e as Color, a)
+        if (k === 'color') obj.color = tempColor.lerpColors(s as Color, e as Color, a);
       }
     })
     .yoyoForever()

package.json

@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.10.0",
+    "@stylistic/eslint-plugin": "^2.10.1",
     "@three.ez/main": "^0.5.8",
     "@types/three": "^0.159.0",
     "eslint": "^9.14.0",

src/core/InstancedEntity.ts

@@ -1,4 +1,4 @@
-import { ColorRepresentation, Euler, Matrix3, Matrix4, Mesh, Object3D, Quaternion, Vector2, Vector3, Vector4 } from 'three';
+import { Color, ColorRepresentation, Euler, Matrix3, Matrix4, Mesh, Object3D, Quaternion, Vector2, Vector3, Vector4 } from 'three';
 import { InstancedMesh2 } from './InstancedMesh2.js';
 
 export type UniformValueNoNumber = Vector2 | Vector3 | Vector4 | Matrix3 | Matrix4;
@@ -14,17 +14,17 @@ export class InstancedEntity {
   public rotation: Euler;
   protected _parent: Object3D; // TODO implement
 
-  public get visible() { return this.owner.getVisibilityAt(this.id) }
-  public set visible(value: boolean) { this.owner.setVisibilityAt(this.id, value) }
+  public get visible(): boolean { return this.owner.getVisibilityAt(this.id); }
+  public set visible(value: boolean) { this.owner.setVisibilityAt(this.id, value); }
 
-  public get color() { return this.owner.getColorAt(this.id) }
-  public set color(value: ColorRepresentation) { this.owner.setColorAt(this.id, value) }
+  public get color(): Color { return this.owner.getColorAt(this.id); }
+  public set color(value: ColorRepresentation) { this.owner.setColorAt(this.id, value); }
 
-  public get morph() { return this.owner.getMorphAt(this.id) }
-  public set morph(value: Mesh) { this.owner.setMorphAt(this.id, value) }
+  public get morph(): Mesh { return this.owner.getMorphAt(this.id); }
+  public set morph(value: Mesh) { this.owner.setMorphAt(this.id, value); }
 
-  public get matrix() { return this.owner.getMatrixAt(this.id) }
-  public get matrixWorld() { return this.matrix.premultiply(this.owner.matrixWorld) }
+  public get matrix(): Matrix4 { return this.owner.getMatrixAt(this.id); }
+  public get matrixWorld(): Matrix4 { return this.matrix.premultiply(this.owner.matrixWorld); }
 
   constructor(owner: InstancedMesh2, id: number, useEuler: boolean) {
     this.id = id;