feat: replace shaders with TSL equivalent

package.json

@@ -105,7 +105,7 @@
     "proj4": "^2.20.4",
     "puppeteer": "^24.37.3",
     "sinon": "^21.0.1",
-    "three": "^0.182.0",
+    "three": "mrdoob/three.js#dev",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.9.3",
     "undici": "^7.22.0",

packages/Geographic/package.json

@@ -36,7 +36,7 @@
   },
   "peerDependencies": {
     "proj4": ">=2.20.0",
-    "three": ">=0.182.0"
+    "three": "mrdoob/three.js#dev"
   },
   "homepage": "https://itowns.github.io/"
 }

packages/Main/package.json

@@ -71,7 +71,11 @@
   "peerDependencies": {
     "postprocessing": "6.38.2",
     "proj4": "^2.20.4",
-    "three": "^0.182.0"
+    "three": "mrdoob/three.js#dev"
+  },
+  "devDependencies": {
+    "chalk": "^5.4.1",
+    "copyfiles": "^2.4.1"
   },
   "homepage": "https://itowns.github.io/"
 }

packages/Main/src/Main.js

@@ -19,6 +19,7 @@ export { default as ObjectRemovalHelper } from 'Process/ObjectRemovalHelper';
 export { updateLayeredMaterialNodeImagery, updateLayeredMaterialNodeElevation } from 'Process/LayeredMaterialNodeProcessing';
 export { default as OrientedImageCamera } from 'Renderer/OrientedImageCamera';
 export { default as PointsMaterial, PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE, ClassificationScheme } from 'Renderer/PointsMaterial';
+export { default as PointsMaterialTsl } from 'Renderer/PointsMaterialTsl';
 export { default as GlobeControls } from 'Controls/GlobeControls';
 export { default as FlyControls } from 'Controls/FlyControls';
 export { default as FirstPersonControls } from 'Controls/FirstPersonControls';

packages/Main/src/Renderer/PointsMaterialTsl.ts

@@ -0,0 +1,46 @@
+import * as THREE from 'three';
+import * as wgpu from 'three/webgpu';
+import * as tsl from 'three/tsl';
+// import { WebGLNodesHandler } from 'three/addons/tsl/WebGLNodesHandler.js';
+
+const enum RenderMode {
+    COLOR,
+    CLASSIFICATION,
+    RETURN_COUNT,
+}
+
+export default class PointsMaterialTsl extends wgpu.SpriteNodeMaterial {
+    constructor(attributes: Record<string, THREE.TypedArray>, public renderMode: RenderMode) {
+        function classification_coloring(classif: wgpu.Node): wgpu.Node {
+            return tsl.array([
+                tsl.vec3(1, 0, 0),
+                tsl.vec3(0, 1, 0),
+                tsl.vec3(0, 0, 1),
+            ]).element(classif.mod(3));
+        }
+
+        const positionAttribute = new wgpu.InstancedBufferAttribute(attributes.positions as Float32Array, 3);
+        positionAttribute.name = 'positionAttribute';
+        const position = tsl.instancedBufferAttribute(positionAttribute);
+
+        const colorAttribute = tsl.instancedBufferAttribute(new wgpu.InstancedBufferAttribute(attributes.colors as Uint8Array, 4)).setName('colorAttribute').div(255).setName('colorFinal');
+        const classificationAttribute = classification_coloring(
+            tsl.instancedBufferAttribute(
+                new wgpu.InstancedBufferAttribute(attributes.Classification as Uint16Array, 1),
+            ).setName('classificationAttribute'),
+        );
+        const returnCountAttribute = tsl.instancedBufferAttribute(new wgpu.InstancedBufferAttribute(attributes.NumberOfReturns as Uint16Array, 1)).setName('returnCountAttribute').toFloat();
+
+        renderMode = RenderMode.CLASSIFICATION;
+        const color = [colorAttribute, classificationAttribute, returnCountAttribute][renderMode];
+
+        super({
+            positionNode: position,
+            opacityNode: tsl.shapeCircle(),
+            colorNode: color,
+            scaleNode: tsl.float(0.0008),
+            vertexColors: true,
+            sizeAttenuation: false,
+        });
+    }
+}