@jdultra/threedtiles 3.3.2 → 4.0.0

package/src/tileset/instanced/InstancedTileLoader.js

@@ -0,0 +1,322 @@
+import { LinkedHashMap } from 'js-utils-z';
+import { B3DMDecoder } from "../../decoder/B3DMDecoder";
+import { setIntervalAsync } from 'set-interval-async/dynamic';
+import * as THREE from 'three';
+import { MeshTile } from './MeshTile';
+import { JsonTile } from './JsonTile';
+
+let concurentDownloads = 0;
+
+class InstancedTileLoader {
+    constructor(scene, meshCallback, maxCachedItems, maxInstances) {
+        this.meshCallback = meshCallback;
+        this.maxInstances = maxInstances;
+        this.cache = new LinkedHashMap();
+        this.maxCachedItems = !!maxCachedItems ? maxCachedItems : 100;
+        this.scene = scene;
+
+        this.ready = [];
+        this.downloads = [];
+        this.nextReady = [];
+        this.nextDownloads = [];
+        this.init();
+    }
+
+    update(){
+        const self = this;
+        
+        self.cache._data.forEach(v=>{
+            v.update();
+        })
+        
+    }
+    init(){
+        
+        const self = this;
+        setIntervalAsync(() => {
+            self.download();
+        }, 10);
+        setIntervalAsync(() => {
+            const start = Date.now();
+            let loaded = 0;
+            do {
+                loaded = self.loadBatch();
+            } while (loaded > 0 && (Date.now() - start) <= 0)
+        
+        }, 10);
+    }
+
+    download() {
+        const self = this;
+        if (self.nextDownloads.length == 0) {
+            self.getNextDownloads();
+            if (self.nextDownloads.length == 0) return;
+        }
+        while (self.nextDownloads.length > 0 && concurentDownloads < 500) {
+            const nextDownload = self.nextDownloads.shift();
+            if (!!nextDownload && nextDownload.shouldDoDownload()) {
+                //nextDownload.doDownload();
+                concurentDownloads++;
+                if(nextDownload.path.includes(".b3dm")){
+                    fetch(nextDownload.path, {signal: nextDownload.abortController.signal}).then(result => {
+                        concurentDownloads--;
+                        if (!result.ok) {
+                            console.error("could not load tile with path : " + path)
+                            throw new Error(`couldn't load "${path}". Request failed with status ${result.status} : ${result.statusText}`);
+                        }
+                        return result.arrayBuffer();
+
+                    })
+                    .then(resultArrayBuffer=>{
+                        return B3DMDecoder.parseB3DMInstanced(resultArrayBuffer, self.meshCallback, self.maxInstances);
+                    })
+                    .then(mesh=>{
+                        nextDownload.tile.setObject(mesh);
+                        self.ready.unshift(nextDownload);
+                            
+                    })
+                    .catch(e=>console.error(e));
+                }else if(nextDownload.path.includes(".json")){
+                    concurentDownloads++;
+                    fetch(nextDownload.path, {signal: nextDownload.abortController.signal}).then(result => {
+                        concurentDownloads--;
+                        if (!result.ok) {
+                            console.error("could not load tile with path : " + path)
+                            throw new Error(`couldn't load "${path}". Request failed with status ${result.status} : ${result.statusText}`);
+                        }
+                        return result.json();
+                        
+                    }).then(json => {
+                        nextDownload.tile.setObject(json, nextDownload.path);
+                        self.ready.unshift(nextDownload);
+                    })
+                    .catch(e=>console.error(e))
+                }
+            }
+        }
+        return;
+    }
+
+    loadBatch() {
+        if (this.nextReady.length == 0) {
+            this.getNextReady();
+            if (this.nextReady.length == 0) return 0;
+        }
+        const download = this.nextReady.shift();
+        if (!download) return 0;
+        
+        if(!!download.tile.addToScene)download.tile.addToScene();
+        return 1;
+    }
+
+    getNextReady() {
+        let smallestLevel = Number.MAX_VALUE;
+        let smallestDistance = Number.MAX_VALUE;
+        let closest = -1;
+        for (let i = this.ready.length - 1; i >= 0; i--) {
+    
+            if (!this.ready[i].distanceFunction) {// if no distance function, must be a json, give absolute priority!
+                this.nextReady.push(this.ready.splice(i, 1)[0]);
+            }
+        }
+        if (this.nextReady.length > 0) return;
+        for (let i = this.ready.length - 1; i >= 0; i--) {
+            const dist = this.ready[i].distanceFunction();
+            if (dist < smallestDistance) {
+                smallestDistance = dist;
+                smallestLevel = this.ready[i].level
+                closest = i
+            } else if (dist == smallestDistance && this.ready[i].level < smallestLevel) {
+                smallestLevel = this.ready[i].level
+                closest = i
+            }
+        }
+        if (closest >= 0) {
+            const closestItem = this.ready.splice(closest, 1).pop();
+            this.nextReady.push(closestItem);
+            const siblings = closestItem.getSiblings();
+            for (let i = this.ready.length - 1; i >= 0; i--) {
+                if (siblings.includes(this.ready[i].uuid)) {
+                    this.nextready.push(this.ready.splice(i, 1).pop());
+                }
+            }
+        }
+    }
+
+    get(abortController, path, uuid, instancedOGC3DTile, distanceFunction, getSiblings, level) {
+        const self = this;
+        const key = simplifyPath(path);
+
+        if (!path.includes(".b3dm") && !path.includes(".json")) {
+            console.error("the 3DTiles cache can only be used to load B3DM and json data");
+            return;
+        }
+
+        const cachedTile = self.cache.get(key);
+        if (!!cachedTile) {
+            cachedTile.addInstance(instancedOGC3DTile);
+            return;
+        } else {
+
+            if (path.includes(".b3dm")) {
+                const tile = new MeshTile(self.scene);
+                tile.addInstance(instancedOGC3DTile);
+                if(self.cache.has(key)){
+                    console.log("élkbhj")
+                }
+                self.cache.put(key, tile);
+
+                const realAbortController = new AbortController();
+                abortController.signal.addEventListener("abort", () => {
+                    if (tile.getCount() == 0) {
+                        realAbortController.abort();
+                    }
+                })
+                this.downloads.push({
+                    abortController: realAbortController,
+                    tile: tile,
+                    key: key,
+                    path: path,
+                    distanceFunction: distanceFunction,
+                    getSiblings: getSiblings,
+                    level: level,
+                    uuid: uuid,
+                    shouldDoDownload: () => {
+                        return true;
+                    },
+                })
+            }else if(path.includes(".json")){
+                const tile = new JsonTile();
+                tile.addInstance(instancedOGC3DTile);
+                self.cache.put(key, tile);
+
+                const realAbortController = new AbortController();
+                abortController.signal.addEventListener("abort", () => {
+                    if (tile.getCount() == 0) {
+                        realAbortController.abort();
+                    }
+                })
+                this.downloads.push({
+                    abortController: realAbortController,
+                    tile: tile,
+                    key: key,
+                    path: path,
+                    distanceFunction: distanceFunction,
+                    getSiblings: getSiblings,
+                    level: level,
+                    shouldDoDownload: () => {
+                        return true;
+                    },
+                })
+
+            }
+        }
+    }
+
+
+    
+    getNextDownloads() {
+        let smallestLevel = Number.MAX_VALUE;
+        let smallestDistance = Number.MAX_VALUE;
+        let closest = -1;
+        for (let i = this.downloads.length - 1; i >= 0; i--) {
+            const download = this.downloads[i];
+            if (!download.shouldDoDownload()) {
+                this.downloads.splice(i, 1);
+                continue;
+            } 
+            if (!download.distanceFunction) { // if no distance function, must be a json, give absolute priority!
+                this.nextDownloads.push(this.downloads.splice(i, 1)[0]);
+            }
+        }
+        if (this.nextDownloads.length > 0) return;
+        for (let i = this.downloads.length - 1; i >= 0; i--) {
+            const download = this.downloads[i];
+            const dist = download.distanceFunction();
+            if (dist < smallestDistance) {
+                smallestDistance = dist;
+                closest = i;
+            } else if (dist == smallestDistance && download.level < smallestLevel) {
+                smallestLevel = download.level;
+                closest = i
+            }
+        }
+        if (closest >= 0) {
+            const closestItem = this.downloads.splice(closest, 1).pop();
+            this.nextDownloads.push(closestItem);
+            const siblings = closestItem.getSiblings();
+            for (let i = this.downloads.length - 1; i >= 0; i--) {
+                if (siblings.includes(this.downloads[i].uuid)) {
+                    this.nextDownloads.push(this.downloads.splice(i, 1).pop());
+                }
+            }
+        }
+    }
+
+    checkSize() {
+        const self = this;
+
+        let i = 0;
+
+        while (self.cache.size() > self.maxCachedItems && i < self.cache.size()) {
+            i++;
+            const entry = self.cache.head();
+            if(entry.value.getCount()>0){
+                self.cache.remove(entry.key);
+                self.cache.put(entry.key, entry.value);
+            }else{
+                self.cache.remove(entry.key);
+                if(entry.value.instancedMesh){
+                    entry.value.instancedMesh.traverse((o) => {
+                        if (o.material) {
+                            // dispose materials
+                            if (o.material.length) {
+                                for (let i = 0; i < o.material.length; ++i) {
+                                    o.material[i].dispose();
+                                }
+                            }
+                            else {
+                                o.material.dispose()
+                            }
+                        }
+                        if (o.geometry) {
+                            // dispose geometry
+                            o.geometry.dispose();
+                        }
+                    });
+                }
+            }
+
+        }
+    }
+}
+
+function simplifyPath(main_path) {
+
+    var parts = main_path.split('/'),
+        new_path = [],
+        length = 0;
+    for (var i = 0; i < parts.length; i++) {
+        var part = parts[i];
+        if (part === '.' || part === '' || part === '..') {
+            if (part === '..' && length > 0) {
+                length--;
+            }
+            continue;
+        }
+        new_path[length++] = part;
+    }
+
+    if (length === 0) {
+        return '/';
+    }
+
+    var result = '';
+    for (var i = 0; i < length; i++) {
+        result += '/' + new_path[i];
+    }
+
+    return result;
+}
+
+export { InstancedTileLoader };

package/src/tileset/instanced/JsonTile.js

@@ -0,0 +1,41 @@
+
+
+class JsonTile{
+    constructor(){
+        const self = this;
+        self.count = 0;
+        self.json;
+        self.instancedTiles = [];
+    }
+
+    addInstance(instanceTile){
+        this.instancedTiles.push(instanceTile);
+        if(this.json){
+            instanceTile.loadJson(this.json, this.url)
+        }
+    }
+
+    
+
+    setObject(json, url){
+        const self = this;
+        self.json = json;
+        self.url = url;
+        for(let i = 0; i<self.instancedTiles.length; i++){
+            self.instancedTiles[i].loadJson( self.json, self.url );
+        }
+    }
+
+    getCount(){
+        return this.instancedTiles.length;
+    }
+    update(){
+        const self = this;
+        for(let i = self.instancedTiles.length-1; i>=0; i--){
+            if(self.instancedTiles[i].deleted){
+                self.instancedTiles.splice(i,1);
+            }
+        }
+    }
+
+}export { JsonTile };

package/src/tileset/instanced/MeshTile.js

@@ -0,0 +1,75 @@
+import * as THREE from 'three';
+import { InstancedMesh } from 'three';
+
+class MeshTile{
+    constructor(scene){
+        const self = this;
+        self.scene = scene;
+        self.instancedTiles = [];
+        self.instancedMesh;
+
+        self.reuseableMatrix = new THREE.Matrix4();
+    }
+    addInstance(instancedTile){
+        const self = this;
+        instancedTile.added = true;
+        instancedTile.listOMesh = self.instancedTiles;
+        self.instancedTiles.push(instancedTile);
+        if(self.instancedMesh){
+            instancedTile.loadMesh(self.instancedMesh)
+        }
+    }
+
+    addToScene(){
+        //this.instancedMesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage );
+        const self = this;
+        self.instancedMesh.setMatrixAt(0,new THREE.Matrix4());
+        self.instancedMesh.instanceMatrix.needsUpdate = true;
+        self.instancedMesh.count = 1;
+        
+        self.scene.add(self.instancedMesh);
+        self.instancedMesh.onAfterRender = () => {
+            delete self.instancedMesh.onAfterRender;
+            self.instancedMesh.displayedOnce = true;
+        };
+    }
+
+    setObject(instancedMesh){
+        const self = this;
+        self.instancedMesh = instancedMesh;
+        
+        for(let i = 0; i<self.instancedTiles.length; i++){
+            self.instancedTiles[i].loadMesh(self.instancedMesh)
+        }
+    }
+
+    update(){
+        const self = this;
+
+        for(let i = self.instancedTiles.length-1; i>=0; i--){
+            if(self.instancedTiles[i].deleted){
+                self.instancedTiles.splice(i,1);
+            }
+        }
+        
+        if(!!self.instancedMesh){
+            
+            self.instancedMesh.count = 0;
+            
+            for(let i = 0; i<self.instancedTiles.length; i++){
+                self.instancedTiles[i].meshContent = self.instancedMesh;
+                if(self.instancedTiles[i].materialVisibility && !!self.instancedTiles[i].meshContent){
+                    self.instancedMesh.count++;
+                    self.instancedMesh.setMatrixAt(self.instancedMesh.count-1, self.reuseableMatrix.multiplyMatrices(self.instancedMesh.baseMatrix, self.instancedTiles[i].getWorldMatrix()) )
+                }
+                
+            }
+            self.instancedMesh.instanceMatrix.needsUpdate = true;
+        }
+    }
+
+    getCount(){
+        return this.instancedTiles.length;
+    }
+
+}export { MeshTile };

package/webpack.config.js

@@ -3,124 +3,134 @@ const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserPlugin = require('terser-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 const sourceDir = path.resolve(__dirname);
 const DEFAULT_WEBPACK_PORT = 3001;
 
 module.exports = {
-    mode: "development",
-    entry: './src/index.js',
+  mode: "development",
+  entry: './src/index.js',
 
-    output: {
-      filename: "index.js",
-      path: path.resolve(__dirname, 'dist'),
-    },
+  output: {
+    filename: "index.js",
+    path: path.resolve(__dirname, 'dist'),
+  },
 
-    plugins: [
-      new webpack.ProgressPlugin(),
-      new HtmlWebpackPlugin({
-        template: "index.html",
-        filename: "index.html",
-      }),
-      new MiniCssExtractPlugin({
-        filename: "[name].bundle.[hash].css"
-      })
-    ],
+  plugins: [
+    new webpack.ProgressPlugin(),
+    new HtmlWebpackPlugin({
+      template: "index.html",
+      filename: "index.html",
+    }),
+    new MiniCssExtractPlugin({
+      filename: "[name].bundle.[hash].css"
+    }),
+    new CopyPlugin({
+      patterns: [
+        { from: "meshes", to: "meshes" }
+      ],
+    }),
+  ],
 
-    devtool: "source-map",
+  devtool: "source-map",
 
-    module: {
-      rules: [
-        {
-          test: /.(js)$/,
-          include: [sourceDir],
-          loader: "babel-loader",
-          options: {
-            cacheDirectory: true,
-            presets: [
-                ["@babel/preset-env", {
-                  "useBuiltIns": "entry",
-                  "corejs": 3
-                }]
-            ]
-          }
-        },
-        {
-          test: /\.s[ac]ss$/,
-          use: [
-            // inserts <link/> tag to generated CSS file, inside the generated index.html
-            {loader: MiniCssExtractPlugin.loader},
-            "css-loader",
-            "resolve-url-loader",
-            // Compiles Sass to CSS
-            {
-              loader: "sass-loader",
-              options: {
-                sourceMap: true // resolve-url-loader needs sourcemaps, regardless of devtool (cf. resolve-url-loader's README)
-              }
-            }
-          ]
-        },
-        {
-          test: /\.css$/i,
-          use: [
-            {loader: MiniCssExtractPlugin.loader},
-            "style-loader",
-            "css-loader",
+  module: {
+    rules: [
+      {
+        test: /.(js)$/,
+        include: [sourceDir],
+        loader: "babel-loader",
+        options: {
+          cacheDirectory: true,
+          presets: [
+            ["@babel/preset-env", {
+              "useBuiltIns": "entry",
+              "corejs": 3
+            }]
           ]
-        },
-        {
-          test: /\.html$/i,
-          loader: "html-loader"
-        },
-        { // loader for fonts
-          test: /\.(eot|woff|woff2|otf|ttf|svg)$/,
-          use: [{
-            loader: "file-loader",
+        }
+      },
+      {
+        test: /\.s[ac]ss$/,
+        use: [
+          // inserts <link/> tag to generated CSS file, inside the generated index.html
+          { loader: MiniCssExtractPlugin.loader },
+          "css-loader",
+          "resolve-url-loader",
+          // Compiles Sass to CSS
+          {
+            loader: "sass-loader",
             options: {
-              name: "fonts/[name].[ext]"
+              sourceMap: true // resolve-url-loader needs sourcemaps, regardless of devtool (cf. resolve-url-loader's README)
             }
-          }]
-        },
-        {
-          test: /\.(png|svg|jpg|jpeg|gif)$/i,
-          type: 'asset/resource',
-        },
-      ],
-    },
-    optimization: {
-      minimizer: [new TerserPlugin({
-        parallel: true,
-        terserOptions: {
-            ecma: undefined,
-            parse: {},
-            compress: {},
-            mangle: true, // Note `mangle.properties` is `false` by default.
-            module: false,
-            // Deprecated
-            output: null,
-            format: null,
-            toplevel: false,
-            nameCache: null,
-            ie8: false,
-            keep_classnames: undefined,
-            keep_fnames: false,
-            safari10: false,
-          },
-        exclude: []
-      })]
-    },
-    devServer: {
-      hot: true,
-      open: true,
-      port: DEFAULT_WEBPACK_PORT
-    },
-    resolve: {
-      extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff
-      fallback: {
-        "fs": false,
-        "path": require.resolve("path-browserify")
-      }
+          }
+        ]
+      },
+      {
+        test: /\.css$/i,
+        use: [
+          { loader: MiniCssExtractPlugin.loader },
+          "style-loader",
+          "css-loader",
+        ]
+      },
+      {
+        test: /\.html$/i,
+        loader: "html-loader"
+      },
+      { // loader for fonts
+        test: /\.(eot|woff|woff2|otf|ttf|svg)$/,
+        use: [{
+          loader: "file-loader",
+          options: {
+            name: "fonts/[name].[ext]"
+          }
+        }]
+      },
+      { // loader for shaders
+        test: /\.glsl$/,
+        loader: 'webpack-glsl-loader'
+      },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [new TerserPlugin({
+      parallel: true,
+      terserOptions: {
+        ecma: undefined,
+        parse: {},
+        compress: {},
+        mangle: true, // Note `mangle.properties` is `false` by default.
+        module: false,
+        // Deprecated
+        output: null,
+        format: null,
+        toplevel: false,
+        nameCache: null,
+        ie8: false,
+        keep_classnames: undefined,
+        keep_fnames: false,
+        safari10: false,
+      },
+      exclude: []
+    })]
+  },
+  devServer: {
+    hot: true,
+    open: true,
+    port: DEFAULT_WEBPACK_PORT
+  },
+  resolve: {
+    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff
+    fallback: {
+      "fs": false,
+      "path": require.resolve("path-browserify")
     }
-  
+  }
+
 };