├── .gitignore ├── LICENSE.md ├── README.md ├── defunct ├── fix_lib_playground.js ├── lib_playground │ ├── Attribution.js │ ├── Buildings.js │ ├── BuildingsCustom.js │ ├── BuildingsOSM.js │ ├── GeoJSON.js │ ├── MapBox.js │ ├── OpenStreetMap.js │ ├── Tile.js │ ├── TileMath.js │ └── TileSet.js ├── load_lib_playground.js └── tsconfig.playground.json ├── doc ├── charlotte.jpg └── grand_canyon.jpg ├── examples-local ├── README.md ├── hello-world │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE.md │ ├── README.md │ ├── favicon.ico │ ├── index.html │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── webpack.common.js │ ├── webpack.config-dev.js │ └── webpack.config-prod.js ├── line-test │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE.md │ ├── README.md │ ├── favicon.ico │ ├── index.html │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── webpack.common.js │ ├── webpack.config-dev.js │ └── webpack.config-prod.js ├── local-load │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE.md │ ├── README.md │ ├── favicon.ico │ ├── index.html │ ├── package.json │ ├── public │ │ └── map_cache │ │ │ ├── 16_25907_18049.png │ │ │ ├── 16_25907_18050.png │ │ │ ├── 16_25907_18051.png │ │ │ ├── 16_25907_18052.png │ │ │ ├── 16_25908_18049.png │ │ │ ├── 16_25908_18050.png │ │ │ ├── 16_25908_18051.png │ │ │ ├── 16_25908_18052.png │ │ │ ├── 16_25909_18049.png │ │ │ ├── 16_25909_18050.png │ │ │ ├── 16_25909_18051.png │ │ │ ├── 16_25909_18052.png │ │ │ ├── 16_25910_18049.png │ │ │ ├── 16_25910_18050.png │ │ │ ├── 16_25910_18051.png │ │ │ ├── 16_25910_18052.png │ │ │ └── buildings1.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── webpack.common.js │ ├── webpack.config-dev.js │ └── webpack.config-prod.js ├── math-test │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE.md │ ├── README.md │ ├── favicon.ico │ ├── index.html │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── webpack.common.js │ ├── webpack.config-dev.js │ └── webpack.config-prod.js ├── mouse-latlon │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE.md │ ├── README.md │ ├── favicon.ico │ ├── index.html │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── webpack.common.js │ ├── webpack.config-dev.js │ └── webpack.config-prod.js ├── multisource │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE.md │ ├── README.md │ ├── favicon.ico │ ├── index.html │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── webpack.common.js │ ├── webpack.config-dev.js │ └── webpack.config-prod.js ├── point-test │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE.md │ ├── README.md │ ├── favicon.ico │ ├── index.html │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── webpack.common.js │ ├── webpack.config-dev.js │ └── webpack.config-prod.js └── wmts-local │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE.md │ ├── README.md │ ├── favicon.ico │ ├── index.html │ ├── package.json │ ├── src │ └── index.ts │ ├── tsconfig.json │ ├── webpack.common.js │ ├── webpack.config-dev.js │ └── webpack.config-prod.js ├── examples-npm ├── .DS_Store ├── Assets │ ├── .DS_Store │ ├── models │ │ ├── 2nd_highschool.glb │ │ ├── film.svg │ │ ├── grier2.glb │ │ ├── grier_funeral.glb │ │ ├── headphones.svg │ │ ├── headphones_icon.png │ │ ├── icon_attribution.txt │ │ ├── image.svg │ │ ├── image_icon.png │ │ ├── place_holder.mp3 │ │ ├── savoy2.glb │ │ ├── savoy_theater.glb │ │ ├── station_wagon_attribution.txt │ │ └── vintage_station_wagon_car.glb │ ├── photos │ │ ├── grier.jpg │ │ ├── savoy.jpg │ │ └── secondward.jpg │ └── textures │ │ ├── 120px-Downyu-gray.png │ │ ├── 120px-Downyu.png │ │ └── attributions.txt.txt ├── OpenStreetMap-Endless │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE.md │ ├── README.md │ ├── favicon.ico │ ├── index.html │ ├── package.json │ ├── public │ │ └── textures │ │ │ ├── TropicalSunnyDay_nx.jpg │ │ │ ├── TropicalSunnyDay_ny.jpg │ │ │ ├── TropicalSunnyDay_nz.jpg │ │ │ ├── TropicalSunnyDay_px.jpg │ │ │ ├── TropicalSunnyDay_py.jpg │ │ │ └── TropicalSunnyDay_pz.jpg │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── webpack.common.js │ ├── webpack.config-dev.js │ └── webpack.config-prod.js ├── OpenStreetMap-HelloWorld │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE.md │ ├── README.md │ ├── favicon.ico │ ├── index.html │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── webpack.common.js │ ├── webpack.config-dev.js │ └── webpack.config-prod.js ├── OpenStreetMap-UserData-RealScale │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE.md │ ├── README.md │ ├── favicon.ico │ ├── index.html │ ├── package.json │ ├── public │ │ └── JCSU.csv │ ├── src │ │ ├── CsvData.ts │ │ └── index.ts │ ├── tsconfig.json │ ├── webpack.common.js │ ├── webpack.config-dev.js │ └── webpack.config-prod.js ├── README.md └── mapbox-terrain │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE.md │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ ├── PNG │ │ ├── mapbox-logo-black.png │ │ └── mapbox-logo-white.png │ ├── favicon.ico │ └── textures │ │ ├── TropicalSunnyDay_nx.jpg │ │ ├── TropicalSunnyDay_ny.jpg │ │ ├── TropicalSunnyDay_nz.jpg │ │ ├── TropicalSunnyDay_px.jpg │ │ ├── TropicalSunnyDay_py.jpg │ │ └── TropicalSunnyDay_pz.jpg │ ├── src │ └── index.ts │ ├── tsconfig.json │ ├── webpack.common.js │ ├── webpack.config-dev.js │ └── webpack.config-prod.js ├── lib ├── Attribution.d.ts ├── Attribution.js ├── Attribution.js.map ├── Buildings.d.ts ├── Buildings.js ├── Buildings.js.map ├── BuildingsOSM.d.ts ├── BuildingsOSM.js ├── BuildingsOSM.js.map ├── BuildingsWFS.d.ts ├── BuildingsWFS.js ├── BuildingsWFS.js.map ├── GeoJSON.d.ts ├── GeoJSON.js ├── GeoJSON.js.map ├── Raster.d.ts ├── Raster.js ├── Raster.js.map ├── RasterMB.d.ts ├── RasterMB.js ├── RasterMB.js.map ├── RasterOSM.d.ts ├── RasterOSM.js ├── RasterOSM.js.map ├── RasterWMTS.d.ts ├── RasterWMTS.js ├── RasterWMTS.js.map ├── TerrainMB.d.ts ├── TerrainMB.js ├── TerrainMB.js.map ├── Tile.d.ts ├── Tile.js ├── Tile.js.map ├── TileBuilding.d.ts ├── TileBuilding.js ├── TileBuilding.js.map ├── TileMath.d.ts ├── TileMath.js ├── TileMath.js.map ├── TileSet.d.ts ├── TileSet.js └── TileSet.js.map ├── package-lock.json ├── package.json ├── src ├── Attribution.ts ├── Buildings.ts ├── BuildingsOSM.ts ├── BuildingsWFS.ts ├── GeoJSON.ts ├── Raster.ts ├── RasterMB.ts ├── RasterOSM.ts ├── RasterWMTS.ts ├── TerrainMB.ts ├── Tile.ts ├── TileBuilding.ts ├── TileMath.ts └── TileSet.ts └── tsconfig.npm.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | #created when we run 'npm run build' 41 | #/lib 42 | 43 | # Dependency directories 44 | node_modules/ 45 | jspm_packages/ 46 | 47 | # TypeScript v1 declaration files 48 | typings/ 49 | 50 | # TypeScript cache 51 | *.tsbuildinfo 52 | 53 | # Optional npm cache directory 54 | .npm 55 | 56 | # Optional eslint cache 57 | .eslintcache 58 | 59 | # Microbundle cache 60 | .rpt2_cache/ 61 | .rts2_cache_cjs/ 62 | .rts2_cache_es/ 63 | .rts2_cache_umd/ 64 | 65 | # Optional REPL history 66 | .node_repl_history 67 | 68 | # Output of 'npm pack' 69 | *.tgz 70 | 71 | # Yarn Integrity file 72 | .yarn-integrity 73 | 74 | # dotenv environment variables file 75 | .env 76 | .env.test 77 | 78 | # parcel-bundler cache (https://parceljs.org/) 79 | .cache 80 | 81 | # Next.js build output 82 | .next 83 | 84 | # Nuxt.js build / generate output 85 | .nuxt 86 | dist 87 | 88 | # Gatsby files 89 | .cache/ 90 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 91 | # https://nextjs.org/blog/next-9-1#public-directory-support 92 | # public 93 | 94 | # vuepress build output 95 | .vuepress/dist 96 | 97 | # Serverless directories 98 | .serverless/ 99 | 100 | # FuseBox cache 101 | .fusebox/ 102 | 103 | # DynamoDB Local files 104 | .dynamodb/ 105 | 106 | # TernJS port file 107 | .tern-port 108 | 109 | mapbox-key.txt 110 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 David J. Zielinski 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # babylonjs-mapping 2 | This project is to help do mapping inside BabylonJS. 3 | 4 | Currently supported data sources include: 5 | * OpenStreetMaps and OpenStreetMaps Buildings 6 | ![lots of gray buildings on top of map of roads](https://raw.githubusercontent.com/djzielin/babylonjs-mapping/main/doc/charlotte.jpg "Open Street Maps Demo") 7 | * Mapbox (satellite and terrain) 8 | ![grand canyon with river at bottom](https://raw.githubusercontent.com/djzielin/babylonjs-mapping/main/doc/grand_canyon.jpg "Mapbox Terrain Demo") 9 | * Custom Buildings from GeoServer and ArcGIS Online (WFS) 10 | 11 | The "Hello World" of creating an OpenStreetMap tileset, along with extruded buildings is: 12 | 13 | ``` 14 | this.ourTS = new TileSet(this.scene,this.engine); 15 | this.ourTS.setRasterProvider(new RasterOSM(this.ourTS)); //set basemap to pull from Open Street Maps 16 | this.ourTS.createGeometry(new Vector2(4,4), 20, 2); //4x4 tile set, 20m width of each tile, and 2 divisions on each tile 17 | this.ourTS.updateRaster(35.2258461, -80.8400777, 16); //lat, lon, zoom. takes us to charlotte. 18 | 19 | this.ourOSM=new BuildingsOSM(this.ourTS); //lets pull building footprints from Open Street Map Buildings 20 | this.ourOSM.accessToken=accessToken; //now requires Auth token 21 | this.ourOSM.generateBuildings(); 22 | ``` 23 | Live Demos! 24 | https://people.duke.edu/~djzielin/babylonjs-mapping/HelloWorld/ 25 | https://people.duke.edu/~djzielin/babylonjs-mapping/Terrain/ 26 | 27 | Tested with: 28 | Node 20.10.0 LTS 29 | -------------------------------------------------------------------------------- /defunct/lib_playground/BuildingsOSM.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | class BuildingsOSM extends Buildings { 5 | constructor(tileSet) { 6 | super("OSM", tileSet); 7 | this.serverNum = 0; 8 | this.osmBuildingServers = ["https://a.data.osmbuildings.org/0.2/anonymous/tile/", 9 | "https://b.data.osmbuildings.org/0.2/anonymous/tile/", 10 | "https://c.data.osmbuildings.org/0.2/anonymous/tile/", 11 | "https://d.data.osmbuildings.org/0.2/anonymous/tile/"]; 12 | } 13 | generateBuildings() { 14 | super.generateBuildings(); 15 | this.tileSet.ourAttribution.addAttribution("OSMB"); 16 | } 17 | stripFilePrefix(original) { 18 | const stripped = original.slice(51); 19 | //console.log("new file URL is: " + stripped); 20 | return stripped; 21 | } 22 | SubmitLoadTileRequest(tile) { 23 | if (tile.tileCoords.z > 16) { 24 | console.error(this.prettyName() + "Zoom level of: " + tile.tileCoords.z + " is too large! This means that buildings won't work!"); 25 | return; 26 | } 27 | const storedCoords = tile.tileCoords.clone(); 28 | const url = this.osmBuildingServers[this.serverNum] + tile.tileCoords.z + "/" + tile.tileCoords.x + "/" + tile.tileCoords.y + ".json"; 29 | this.serverNum = (this.serverNum + 1) % this.osmBuildingServers.length; //increment server to use with wrap around 30 | const request = { 31 | requestType: BuildingRequestType.LoadTile, 32 | tile: tile, 33 | tileCoords: tile.tileCoords.clone(), 34 | projectionType: ProjectionType.EPSG_4326, 35 | url: url, 36 | inProgress: false 37 | }; 38 | this.buildingRequests.push(request); 39 | } 40 | ProcessGeoJSON(request, topLevel) { 41 | if (request.tile.tileCoords.equals(request.tileCoords) == false) { 42 | console.warn(this.prettyName() + "tile coords have changed while we were loading, not adding buildings to queue!"); 43 | return; 44 | } 45 | let index = 0; 46 | let addedBuildings = 0; 47 | const meshArray = []; 48 | for (const f of topLevel.features) { 49 | const brequest = { 50 | requestType: BuildingRequestType.CreateBuilding, 51 | tile: request.tile, 52 | tileCoords: request.tile.tileCoords.clone(), 53 | inProgress: false, 54 | projectionType: request.projectionType, 55 | feature: f 56 | }; 57 | this.buildingRequests.push(brequest); 58 | addedBuildings++; 59 | } 60 | if (this.doMerge) { 61 | //console.log("queueing up merge request for tile: " + tile.tileCoords); 62 | const mrequest = { 63 | requestType: BuildingRequestType.MergeAllBuildingsOnTile, 64 | tile: request.tile, 65 | tileCoords: request.tile.tileCoords.clone(), 66 | inProgress: false 67 | }; 68 | this.buildingRequests.push(mrequest); 69 | } 70 | console.log(this.prettyName() + addedBuildings + " building generation requests queued for tile: " + request.tile.tileCoords); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /defunct/lib_playground/OpenStreetMap.js: -------------------------------------------------------------------------------- 1 | class OpenStreetMap { 2 | static getRasterURL(tileCoords, zoom) { 3 | const extension = ".png"; 4 | const prefix = this.osmServers[this.index % 3]; 5 | this.index++; 6 | const url = prefix + zoom + "/" + (tileCoords.x) + "/" + (tileCoords.y) + extension; 7 | return url; 8 | } 9 | } 10 | OpenStreetMap.osmServers = ["https://a.tile.openstreetmap.org/", "https://b.tile.openstreetmap.org/", "https://c.tile.openstreetmap.org/"]; 11 | OpenStreetMap.index = 0; 12 | -------------------------------------------------------------------------------- /defunct/lib_playground/Tile.js: -------------------------------------------------------------------------------- 1 | //based on this example: https://www.babylonjs-playground.com/#866PVL#5 2 | // 3 | // 4 | class Tile { 5 | constructor() { 6 | ////////////////////////////////// 7 | // BUILDINGS 8 | ////////////////////////////////// 9 | this.buildings = []; 10 | this.terrainLoaded = false; 11 | this.eastSeamFixed = false; 12 | this.northSeamFixed = false; 13 | this.northEastSeamFixed = false; 14 | } 15 | deleteBuildings() { 16 | for (let m of this.buildings) { 17 | m.dispose(); 18 | } 19 | this.buildings = []; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /defunct/load_lib_playground.js: -------------------------------------------------------------------------------- 1 | //var filePrefix="https://raw.githubusercontent.com/djzielin/babylonjs-mapping/main/lib/"; //causes MIME type error 2 | var filePrefix = "https://cdn.jsdelivr.net/gh/djzielin/babylonjs-mapping"; 3 | var commitVer = ""; 4 | 5 | var allFiles = [ 6 | "/lib_playground/Attribution.js", 7 | "/lib_playground/Buildings.js", 8 | "/lib_playground/BuildingsCustom.js", 9 | "/lib_playground/BuildingsOSM.js", 10 | "/lib_playground/GeoJSON.js", 11 | "/lib_playground/MapBox.js", 12 | "/lib_playground/OpenStreetMap.js", 13 | "/lib_playground/Tile.js", 14 | "/lib_playground/TileMath.js", 15 | "/lib_playground/TileSet.js" 16 | ]; 17 | 18 | var numScriptsLoaded = 0; 19 | var loadOneAtATime=true; 20 | 21 | //per documentation at: https://doc.babylonjs.com/toolsAndResources/thePlayground/externalPGAssets 22 | //per example at: https://playground.babylonjs.com/#WF3VKZ 23 | 24 | 25 | //per https://stackoverflow.com/questions/9659265/check-if-javascript-script-exists-on-page 26 | function isMyScriptLoaded(url) { 27 | var scripts = document.getElementsByTagName('script'); 28 | for (var i = 0; i < scripts.length; i++) { 29 | if (scripts[i].src == url) return true; 30 | } 31 | return false; 32 | } 33 | 34 | function loadSingleScript(url, attachPoint, callbackFunction) { 35 | console.log("trying to load: " + url); 36 | 37 | var isLoaded = isMyScriptLoaded(url); 38 | 39 | if (isLoaded) { 40 | console.log("script already present on page"); 41 | numScriptsLoaded++; 42 | 43 | CheckIfAllLoaded(attachPoint, callbackFunction); 44 | 45 | return; 46 | } 47 | 48 | var s = document.createElement("script"); 49 | s.type = "text/javascript"; 50 | s.src = url; 51 | attachPoint.head.appendChild(s); 52 | 53 | s.onload = function () { 54 | console.log(url + " has been loaded!"); 55 | numScriptsLoaded++; 56 | 57 | CheckIfAllLoaded(attachPoint, callbackFunction); 58 | } 59 | } 60 | 61 | function CheckIfAllLoaded(attachPoint, callbackFunction){ 62 | if (numScriptsLoaded == allFiles.length) { 63 | console.log("all babylonjs-mapping scripts are loaded!"); 64 | callbackFunction(); 65 | } else { 66 | console.log("not done yet. only have: " + numScriptsLoaded + " loaded out of: " + allFiles.length); 67 | if(loadOneAtATime){ 68 | loadSingleScript(filePrefix + allFiles[numScriptsLoaded], attachPoint, callbackFunction); 69 | } 70 | } 71 | } 72 | 73 | function loadAllMappingScripts(commitVer, attachPoint, callbackFunction) { 74 | console.log("trying to load all babylonjs-mapping scripts"); 75 | filePrefix=filePrefix+commitVer; 76 | 77 | if(loadOneAtATime){ 78 | loadSingleScript(filePrefix + allFiles[numScriptsLoaded], attachPoint, callbackFunction); 79 | } 80 | else{ 81 | for (const script of allFiles) { 82 | loadSingleScript(filePrefix + script, attachPoint, callbackFunction); 83 | } 84 | } 85 | } 86 | 87 | -------------------------------------------------------------------------------- /defunct/tsconfig.playground.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "ES2020", 4 | "target": "es2021", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "declaration": false, 13 | "skipLibCheck": true, 14 | "preserveConstEnums": true, 15 | "sourceMap": false, 16 | "watch": false, 17 | "lib": ["es5", "dom", "es2015.promise", "es2015.collection", "es2015.iterable", "es2015.symbol.wellknown", "es2020.bigint", "es2017"], 18 | "strictPropertyInitialization": false, 19 | "allowSyntheticDefaultImports": true, 20 | "outDir": "./lib_playground" 21 | }, 22 | "include": [ 23 | "src"], 24 | "exclude": ["node_modules", "**/__tests__/*"] 25 | } -------------------------------------------------------------------------------- /doc/charlotte.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/doc/charlotte.jpg -------------------------------------------------------------------------------- /doc/grand_canyon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/doc/grand_canyon.jpg -------------------------------------------------------------------------------- /examples-local/README.md: -------------------------------------------------------------------------------- 1 | These examples (in the examples-local) directory, use the local copy of the babylonjs-mapping library. 2 | This is ideal for trying to modify the mapping library and work on new features. 3 | You will need to do an 'npm run build' in the root, if you do modify the mapping library. 4 | -------------------------------------------------------------------------------- /examples-local/hello-world/.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # Don't lint webpack config 6 | webpack.* 7 | 8 | *.md -------------------------------------------------------------------------------- /examples-local/hello-world/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: [ 5 | '@typescript-eslint', 6 | ], 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | ], 12 | }; -------------------------------------------------------------------------------- /examples-local/hello-world/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_Store 107 | .settings 108 | package-lock.json 109 | npm-debug.log 110 | dist 111 | 112 | mapbox-key.txt 113 | osmb-key.txt 114 | -------------------------------------------------------------------------------- /examples-local/hello-world/README.md: -------------------------------------------------------------------------------- 1 | # IEEE VR 2021 Web-Based VR Tutorial 2 | 3 | This is a simple example of a Babylon.js project. 4 | 5 | To work with this sample, you should have Node (and in particular, npm and npx) installed, which you can retrieve from [nodejs.org](http://nodejs.org). 6 | 7 | ## Running 8 | 9 | You set up the initial project by pulling the dependencies from npm with 10 | ``` 11 | npm install 12 | ``` 13 | 14 | After that, you can compile and run a server with: 15 | ``` 16 | npm run start 17 | ``` 18 | 19 | For those familiar with Typescript, you do not have to run ```tsc``` to build the .js files from the .ts files; ```npx``` builds them on the fly as part of running webpack. 20 | 21 | You can run the sample by pointing your web browser at ```https://localhost:8080/index.html``` 22 | 23 | ## License 24 | 25 | Material for the Web-Based VR Tutorial by [Evan Suma Rosenberg](https://illusioneering.umn.edu/) and [Blair MacIntyre](https://blairmacintyre.me/) is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 26 | 27 | The intent of choosing CC BY-NC-SA 4.0 is to allow individuals and instructors at non-profit entities to use this content. This includes not-for-profit schools (K-12 and post-secondary). For-profit entities (or people creating courses for those sites) may not use this content without permission (this includes, but is not limited to, for-profit schools and universities and commercial education sites such as Coursera, Udacity, LinkedIn Learning, and other similar sites). -------------------------------------------------------------------------------- /examples-local/hello-world/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/hello-world/favicon.ico -------------------------------------------------------------------------------- /examples-local/hello-world/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OpenStreetMap-HelloWorld 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples-local/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OpenStreetMap-HelloWorld", 3 | "version": "1.0.0", 4 | "description": "illustrate using babylonjs-mapping to get tiles and buildings, but pull the mapping library locally, instead of the NPM repository", 5 | "main": "index.ts", 6 | "dependencies": { 7 | "@babylonjs/core": "^6.49.0", 8 | "@babylonjs/gui": "^6.49.0", 9 | "@babylonjs/inspector": "^6.49.0", 10 | "@babylonjs/materials": "^6.49.0" 11 | }, 12 | "devDependencies": { 13 | "@types/earcut": "^2.1.4", 14 | "@typescript-eslint/eslint-plugin": "^6.18.0", 15 | "@typescript-eslint/parser": "^6.18.0", 16 | "clean-webpack-plugin": "^4.0.0", 17 | "eslint": "^8.56.0", 18 | "html-webpack-plugin": "^5.6.0", 19 | "source-map-loader": "^4.0.2", 20 | "ts-loader": "^9", 21 | "typescript": "^5.3.3", 22 | "webpack": "^5.89.0", 23 | "webpack-cli": "^5.1.4", 24 | "webpack-dev-server": "^4.15.1", 25 | "webpack-merge": "^5.10.0" 26 | }, 27 | "scripts": { 28 | "start": "npx webpack-dev-server --config webpack.config-dev.js", 29 | "build": "npx webpack --config webpack.config-prod.js", 30 | "lint": "npx eslint . --ext .ts,.tsx" 31 | }, 32 | "author": "David J. Zielinski. original template by Evan Suma Rosenberg and Blair MacIntyre ", 33 | "license": "CC BY-NC-SA 4.0" 34 | } 35 | -------------------------------------------------------------------------------- /examples-local/hello-world/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esNext", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "skipLibCheck": true, 13 | "preserveConstEnums":true, 14 | "sourceMap": true, 15 | //"watch": false, 16 | "strictPropertyInitialization": false, 17 | "allowSyntheticDefaultImports":true, 18 | //"paths": { 19 | // "babylonjs-mapping": ["../lib"] 20 | //} 21 | }, 22 | "files": [ 23 | "src/index.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples-local/hello-world/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | console.log('Webpack configuration:', JSON.stringify(module.exports, null, 2)); 4 | 5 | 6 | const fs = require('fs'); 7 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 8 | const { 9 | CleanWebpackPlugin 10 | } = require('clean-webpack-plugin'); 11 | 12 | // App directory 13 | const appDirectory = fs.realpathSync(process.cwd()); 14 | 15 | //console.log('Resolved path:', path.resolve(__dirname, '../../lib')); // Add this line 16 | 17 | module.exports = { 18 | resolve: { 19 | extensions: ['.ts', '.js'] 20 | }, 21 | output: { 22 | filename: 'js/babylonBundle.js', 23 | path: path.resolve(__dirname,"./dist/") 24 | }, 25 | module: { 26 | rules: [{ 27 | test: /\.(js|mjs|jsx|ts|tsx)$/, 28 | loader: 'source-map-loader', 29 | enforce: 'pre', 30 | }, 31 | { //per https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes 32 | test: /\.m?js$/, 33 | resolve: { 34 | fullySpecified: false, 35 | }, 36 | }, 37 | { 38 | test: /\.tsx?$/, 39 | loader: 'ts-loader', 40 | exclude: /node_modules/ 41 | }, 42 | { 43 | test: /\.(png|jpg|gif|env|glb|stl)$/i, 44 | use: [{ 45 | loader: 'url-loader', 46 | options: { 47 | limit: 8192, 48 | }, 49 | }, ], 50 | } 51 | ] 52 | }, 53 | plugins: [ 54 | new CleanWebpackPlugin(), 55 | new HtmlWebpackPlugin({ 56 | inject: true, 57 | template: path.resolve(appDirectory, "index.html"), 58 | }), 59 | ], 60 | } -------------------------------------------------------------------------------- /examples-local/hello-world/webpack.config-dev.js: -------------------------------------------------------------------------------- 1 | //const merge = require('webpack-merge'); 2 | const { merge } = require('webpack-merge'); //new syntax for webpack 5 3 | 4 | const path = require('path'); 5 | const fs = require('fs'); 6 | const common = require('./webpack.common.js'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'inline-source-map', 14 | 15 | devServer: { 16 | //contentBase: path.resolve(appDirectory), 17 | //publicPath: '/', 18 | compress: true, 19 | hot: true, 20 | //open: "chrome", 21 | open: true, 22 | static: path.resolve(appDirectory, "public"), 23 | //disableHostCheck: true, 24 | 25 | // enable to access from other devices on the network 26 | //useLocalIp: true, 27 | //host: '0.0.0.0', 28 | 29 | // if you aren’t using ngrok, and want to connect locally, webxr requires https 30 | // https: true, 31 | 32 | headers:{ 33 | "Access-Control-Allow-Origin": "*" 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /examples-local/hello-world/webpack.config-prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }); -------------------------------------------------------------------------------- /examples-local/line-test/.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # Don't lint webpack config 6 | webpack.* 7 | 8 | *.md -------------------------------------------------------------------------------- /examples-local/line-test/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: [ 5 | '@typescript-eslint', 6 | ], 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | ], 12 | }; -------------------------------------------------------------------------------- /examples-local/line-test/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_Store 107 | .settings 108 | package-lock.json 109 | npm-debug.log 110 | dist 111 | 112 | mapbox-key.txt 113 | osmb-key.txt 114 | -------------------------------------------------------------------------------- /examples-local/line-test/README.md: -------------------------------------------------------------------------------- 1 | # IEEE VR 2021 Web-Based VR Tutorial 2 | 3 | This is a simple example of a Babylon.js project. 4 | 5 | To work with this sample, you should have Node (and in particular, npm and npx) installed, which you can retrieve from [nodejs.org](http://nodejs.org). 6 | 7 | ## Running 8 | 9 | You set up the initial project by pulling the dependencies from npm with 10 | ``` 11 | npm install 12 | ``` 13 | 14 | After that, you can compile and run a server with: 15 | ``` 16 | npm run start 17 | ``` 18 | 19 | For those familiar with Typescript, you do not have to run ```tsc``` to build the .js files from the .ts files; ```npx``` builds them on the fly as part of running webpack. 20 | 21 | You can run the sample by pointing your web browser at ```https://localhost:8080/index.html``` 22 | 23 | ## License 24 | 25 | Material for the Web-Based VR Tutorial by [Evan Suma Rosenberg](https://illusioneering.umn.edu/) and [Blair MacIntyre](https://blairmacintyre.me/) is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 26 | 27 | The intent of choosing CC BY-NC-SA 4.0 is to allow individuals and instructors at non-profit entities to use this content. This includes not-for-profit schools (K-12 and post-secondary). For-profit entities (or people creating courses for those sites) may not use this content without permission (this includes, but is not limited to, for-profit schools and universities and commercial education sites such as Coursera, Udacity, LinkedIn Learning, and other similar sites). -------------------------------------------------------------------------------- /examples-local/line-test/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/line-test/favicon.ico -------------------------------------------------------------------------------- /examples-local/line-test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OpenStreetMap-HelloWorld 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples-local/line-test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OpenStreetMap-HelloWorld", 3 | "version": "1.0.0", 4 | "description": "illustrate using babylonjs-mapping to get tiles and buildings, but pull the mapping library locally, instead of the NPM repository", 5 | "main": "index.ts", 6 | "dependencies": { 7 | "@babylonjs/core": "^6.49.0", 8 | "@babylonjs/gui": "^6.49.0", 9 | "@babylonjs/inspector": "^6.49.0", 10 | "@babylonjs/materials": "^6.49.0" 11 | }, 12 | "devDependencies": { 13 | "@types/earcut": "^2.1.4", 14 | "@typescript-eslint/eslint-plugin": "^6.18.0", 15 | "@typescript-eslint/parser": "^6.18.0", 16 | "clean-webpack-plugin": "^4.0.0", 17 | "eslint": "^8.56.0", 18 | "html-webpack-plugin": "^5.6.0", 19 | "source-map-loader": "^4.0.2", 20 | "ts-loader": "^9", 21 | "typescript": "^5.3.3", 22 | "webpack": "^5.89.0", 23 | "webpack-cli": "^5.1.4", 24 | "webpack-dev-server": "^4.15.1", 25 | "webpack-merge": "^5.10.0" 26 | }, 27 | "scripts": { 28 | "start": "npx webpack-dev-server --config webpack.config-dev.js", 29 | "build": "npx webpack --config webpack.config-prod.js", 30 | "lint": "npx eslint . --ext .ts,.tsx" 31 | }, 32 | "author": "David J. Zielinski. original template by Evan Suma Rosenberg and Blair MacIntyre ", 33 | "license": "CC BY-NC-SA 4.0" 34 | } 35 | -------------------------------------------------------------------------------- /examples-local/line-test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esNext", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "skipLibCheck": true, 13 | "preserveConstEnums":true, 14 | "sourceMap": true, 15 | //"watch": false, 16 | "strictPropertyInitialization": false, 17 | "allowSyntheticDefaultImports":true, 18 | //"paths": { 19 | // "babylonjs-mapping": ["../lib"] 20 | //} 21 | }, 22 | "files": [ 23 | "src/index.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples-local/line-test/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | console.log('Webpack configuration:', JSON.stringify(module.exports, null, 2)); 4 | 5 | 6 | const fs = require('fs'); 7 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 8 | const { 9 | CleanWebpackPlugin 10 | } = require('clean-webpack-plugin'); 11 | 12 | // App directory 13 | const appDirectory = fs.realpathSync(process.cwd()); 14 | 15 | //console.log('Resolved path:', path.resolve(__dirname, '../../lib')); // Add this line 16 | 17 | module.exports = { 18 | resolve: { 19 | extensions: ['.ts', '.js'] 20 | }, 21 | output: { 22 | filename: 'js/babylonBundle.js', 23 | path: path.resolve(__dirname,"./dist/") 24 | }, 25 | module: { 26 | rules: [{ 27 | test: /\.(js|mjs|jsx|ts|tsx)$/, 28 | loader: 'source-map-loader', 29 | enforce: 'pre', 30 | }, 31 | { //per https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes 32 | test: /\.m?js$/, 33 | resolve: { 34 | fullySpecified: false, 35 | }, 36 | }, 37 | { 38 | test: /\.tsx?$/, 39 | loader: 'ts-loader', 40 | exclude: /node_modules/ 41 | }, 42 | { 43 | test: /\.(png|jpg|gif|env|glb|stl)$/i, 44 | use: [{ 45 | loader: 'url-loader', 46 | options: { 47 | limit: 8192, 48 | }, 49 | }, ], 50 | } 51 | ] 52 | }, 53 | plugins: [ 54 | new CleanWebpackPlugin(), 55 | new HtmlWebpackPlugin({ 56 | inject: true, 57 | template: path.resolve(appDirectory, "index.html"), 58 | }), 59 | ], 60 | } -------------------------------------------------------------------------------- /examples-local/line-test/webpack.config-dev.js: -------------------------------------------------------------------------------- 1 | //const merge = require('webpack-merge'); 2 | const { merge } = require('webpack-merge'); //new syntax for webpack 5 3 | 4 | const path = require('path'); 5 | const fs = require('fs'); 6 | const common = require('./webpack.common.js'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'inline-source-map', 14 | 15 | devServer: { 16 | //contentBase: path.resolve(appDirectory), 17 | //publicPath: '/', 18 | compress: true, 19 | hot: true, 20 | //open: "chrome", 21 | open: true, 22 | static: path.resolve(appDirectory, "public"), 23 | //disableHostCheck: true, 24 | 25 | // enable to access from other devices on the network 26 | //useLocalIp: true, 27 | //host: '0.0.0.0', 28 | 29 | // if you aren’t using ngrok, and want to connect locally, webxr requires https 30 | // https: true, 31 | 32 | headers:{ 33 | "Access-Control-Allow-Origin": "*" 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /examples-local/line-test/webpack.config-prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }); -------------------------------------------------------------------------------- /examples-local/local-load/.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # Don't lint webpack config 6 | webpack.* 7 | 8 | *.md -------------------------------------------------------------------------------- /examples-local/local-load/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: [ 5 | '@typescript-eslint', 6 | ], 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | ], 12 | }; -------------------------------------------------------------------------------- /examples-local/local-load/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_Store 107 | .settings 108 | package-lock.json 109 | npm-debug.log 110 | dist 111 | 112 | mapbox-key.txt 113 | osmb-key.txt 114 | -------------------------------------------------------------------------------- /examples-local/local-load/README.md: -------------------------------------------------------------------------------- 1 | # IEEE VR 2021 Web-Based VR Tutorial 2 | 3 | This is a simple example of a Babylon.js project. 4 | 5 | To work with this sample, you should have Node (and in particular, npm and npx) installed, which you can retrieve from [nodejs.org](http://nodejs.org). 6 | 7 | ## Running 8 | 9 | You set up the initial project by pulling the dependencies from npm with 10 | ``` 11 | npm install 12 | ``` 13 | 14 | After that, you can compile and run a server with: 15 | ``` 16 | npm run start 17 | ``` 18 | 19 | For those familiar with Typescript, you do not have to run ```tsc``` to build the .js files from the .ts files; ```npx``` builds them on the fly as part of running webpack. 20 | 21 | You can run the sample by pointing your web browser at ```https://localhost:8080/index.html``` 22 | 23 | ## License 24 | 25 | Material for the Web-Based VR Tutorial by [Evan Suma Rosenberg](https://illusioneering.umn.edu/) and [Blair MacIntyre](https://blairmacintyre.me/) is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 26 | 27 | The intent of choosing CC BY-NC-SA 4.0 is to allow individuals and instructors at non-profit entities to use this content. This includes not-for-profit schools (K-12 and post-secondary). For-profit entities (or people creating courses for those sites) may not use this content without permission (this includes, but is not limited to, for-profit schools and universities and commercial education sites such as Coursera, Udacity, LinkedIn Learning, and other similar sites). -------------------------------------------------------------------------------- /examples-local/local-load/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/favicon.ico -------------------------------------------------------------------------------- /examples-local/local-load/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OpenStreetMap-HelloWorld 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples-local/local-load/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OpenStreetMap-HelloWorld", 3 | "version": "1.0.0", 4 | "description": "illustrate using babylonjs-mapping to get tiles and buildings, but pull the mapping library locally, instead of the NPM repository", 5 | "main": "index.ts", 6 | "dependencies": { 7 | "@babylonjs/core": "^6.49.0", 8 | "@babylonjs/gui": "^6.49.0", 9 | "@babylonjs/inspector": "^6.49.0", 10 | "@babylonjs/materials": "^6.49.0" 11 | }, 12 | "devDependencies": { 13 | "@types/earcut": "^2.1.4", 14 | "@typescript-eslint/eslint-plugin": "^6.18.0", 15 | "@typescript-eslint/parser": "^6.18.0", 16 | "clean-webpack-plugin": "^4.0.0", 17 | "eslint": "^8.56.0", 18 | "html-webpack-plugin": "^5.6.0", 19 | "source-map-loader": "^4.0.2", 20 | "ts-loader": "^9", 21 | "typescript": "^5.3.3", 22 | "webpack": "^5.89.0", 23 | "webpack-cli": "^5.1.4", 24 | "webpack-dev-server": "^4.15.1", 25 | "webpack-merge": "^5.10.0" 26 | }, 27 | "scripts": { 28 | "start": "npx webpack-dev-server --config webpack.config-dev.js", 29 | "build": "npx webpack --config webpack.config-prod.js", 30 | "lint": "npx eslint . --ext .ts,.tsx" 31 | }, 32 | "author": "David J. Zielinski. original template by Evan Suma Rosenberg and Blair MacIntyre ", 33 | "license": "CC BY-NC-SA 4.0" 34 | } 35 | -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25907_18049.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25907_18049.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25907_18050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25907_18050.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25907_18051.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25907_18051.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25907_18052.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25907_18052.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25908_18049.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25908_18049.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25908_18050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25908_18050.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25908_18051.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25908_18051.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25908_18052.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25908_18052.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25909_18049.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25909_18049.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25909_18050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25909_18050.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25909_18051.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25909_18051.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25909_18052.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25909_18052.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25910_18049.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25910_18049.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25910_18050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25910_18050.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25910_18051.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25910_18051.png -------------------------------------------------------------------------------- /examples-local/local-load/public/map_cache/16_25910_18052.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/local-load/public/map_cache/16_25910_18052.png -------------------------------------------------------------------------------- /examples-local/local-load/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esNext", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "skipLibCheck": true, 13 | "preserveConstEnums":true, 14 | "sourceMap": true, 15 | //"watch": false, 16 | "strictPropertyInitialization": false, 17 | "allowSyntheticDefaultImports":true, 18 | //"paths": { 19 | // "babylonjs-mapping": ["../lib"] 20 | //} 21 | }, 22 | "files": [ 23 | "src/index.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples-local/local-load/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | console.log('Webpack configuration:', JSON.stringify(module.exports, null, 2)); 4 | 5 | 6 | const fs = require('fs'); 7 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 8 | const { 9 | CleanWebpackPlugin 10 | } = require('clean-webpack-plugin'); 11 | 12 | // App directory 13 | const appDirectory = fs.realpathSync(process.cwd()); 14 | 15 | //console.log('Resolved path:', path.resolve(__dirname, '../../lib')); // Add this line 16 | 17 | module.exports = { 18 | resolve: { 19 | extensions: ['.ts', '.js'] 20 | }, 21 | output: { 22 | filename: 'js/babylonBundle.js', 23 | path: path.resolve(__dirname,"./dist/") 24 | }, 25 | module: { 26 | rules: [{ 27 | test: /\.(js|mjs|jsx|ts|tsx)$/, 28 | loader: 'source-map-loader', 29 | enforce: 'pre', 30 | }, 31 | { //per https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes 32 | test: /\.m?js$/, 33 | resolve: { 34 | fullySpecified: false, 35 | }, 36 | }, 37 | { 38 | test: /\.tsx?$/, 39 | loader: 'ts-loader', 40 | exclude: /node_modules/ 41 | }, 42 | { 43 | test: /\.(png|jpg|gif|env|glb|stl)$/i, 44 | use: [{ 45 | loader: 'url-loader', 46 | options: { 47 | limit: 8192, 48 | }, 49 | }, ], 50 | } 51 | ] 52 | }, 53 | plugins: [ 54 | new CleanWebpackPlugin(), 55 | new HtmlWebpackPlugin({ 56 | inject: true, 57 | template: path.resolve(appDirectory, "index.html"), 58 | }), 59 | ], 60 | } -------------------------------------------------------------------------------- /examples-local/local-load/webpack.config-dev.js: -------------------------------------------------------------------------------- 1 | //const merge = require('webpack-merge'); 2 | const { merge } = require('webpack-merge'); //new syntax for webpack 5 3 | 4 | const path = require('path'); 5 | const fs = require('fs'); 6 | const common = require('./webpack.common.js'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'inline-source-map', 14 | 15 | devServer: { 16 | //contentBase: path.resolve(appDirectory), 17 | //publicPath: '/', 18 | compress: true, 19 | hot: true, 20 | //open: "chrome", 21 | open: true, 22 | static: path.resolve(appDirectory, "public"), 23 | //disableHostCheck: true, 24 | 25 | // enable to access from other devices on the network 26 | //useLocalIp: true, 27 | //host: '0.0.0.0', 28 | 29 | // if you aren’t using ngrok, and want to connect locally, webxr requires https 30 | // https: true, 31 | 32 | headers:{ 33 | "Access-Control-Allow-Origin": "*" 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /examples-local/local-load/webpack.config-prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }); -------------------------------------------------------------------------------- /examples-local/math-test/.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # Don't lint webpack config 6 | webpack.* 7 | 8 | *.md -------------------------------------------------------------------------------- /examples-local/math-test/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: [ 5 | '@typescript-eslint', 6 | ], 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | ], 12 | }; -------------------------------------------------------------------------------- /examples-local/math-test/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_Store 107 | .settings 108 | package-lock.json 109 | npm-debug.log 110 | dist 111 | 112 | mapbox-key.txt 113 | osmb-key.txt 114 | -------------------------------------------------------------------------------- /examples-local/math-test/README.md: -------------------------------------------------------------------------------- 1 | # IEEE VR 2021 Web-Based VR Tutorial 2 | 3 | This is a simple example of a Babylon.js project. 4 | 5 | To work with this sample, you should have Node (and in particular, npm and npx) installed, which you can retrieve from [nodejs.org](http://nodejs.org). 6 | 7 | ## Running 8 | 9 | You set up the initial project by pulling the dependencies from npm with 10 | ``` 11 | npm install 12 | ``` 13 | 14 | After that, you can compile and run a server with: 15 | ``` 16 | npm run start 17 | ``` 18 | 19 | For those familiar with Typescript, you do not have to run ```tsc``` to build the .js files from the .ts files; ```npx``` builds them on the fly as part of running webpack. 20 | 21 | You can run the sample by pointing your web browser at ```https://localhost:8080/index.html``` 22 | 23 | ## License 24 | 25 | Material for the Web-Based VR Tutorial by [Evan Suma Rosenberg](https://illusioneering.umn.edu/) and [Blair MacIntyre](https://blairmacintyre.me/) is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 26 | 27 | The intent of choosing CC BY-NC-SA 4.0 is to allow individuals and instructors at non-profit entities to use this content. This includes not-for-profit schools (K-12 and post-secondary). For-profit entities (or people creating courses for those sites) may not use this content without permission (this includes, but is not limited to, for-profit schools and universities and commercial education sites such as Coursera, Udacity, LinkedIn Learning, and other similar sites). -------------------------------------------------------------------------------- /examples-local/math-test/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/math-test/favicon.ico -------------------------------------------------------------------------------- /examples-local/math-test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Math Tests 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /examples-local/math-test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OpenStreetMap-HelloWorld", 3 | "version": "1.0.0", 4 | "description": "illustrate using babylonjs-mapping to get tiles and buildings, but pull the mapping library locally, instead of the NPM repository", 5 | "main": "index.ts", 6 | "dependencies": { 7 | "@babylonjs/core": "^6.49.0", 8 | "@babylonjs/gui": "^6.49.0", 9 | "@babylonjs/inspector": "^6.49.0", 10 | "@babylonjs/materials": "^6.49.0" 11 | }, 12 | "devDependencies": { 13 | "@types/earcut": "^2.1.4", 14 | "@typescript-eslint/eslint-plugin": "^6.18.0", 15 | "@typescript-eslint/parser": "^6.18.0", 16 | "clean-webpack-plugin": "^4.0.0", 17 | "eslint": "^8.56.0", 18 | "html-webpack-plugin": "^5.6.0", 19 | "source-map-loader": "^4.0.2", 20 | "ts-loader": "^9", 21 | "typescript": "^5.3.3", 22 | "webpack": "^5.89.0", 23 | "webpack-cli": "^5.1.4", 24 | "webpack-dev-server": "^4.15.1", 25 | "webpack-merge": "^5.10.0" 26 | }, 27 | "scripts": { 28 | "start": "npx webpack-dev-server --config webpack.config-dev.js", 29 | "build": "npx webpack --config webpack.config-prod.js", 30 | "lint": "npx eslint . --ext .ts,.tsx" 31 | }, 32 | "author": "David J. Zielinski. original template by Evan Suma Rosenberg and Blair MacIntyre ", 33 | "license": "CC BY-NC-SA 4.0" 34 | } 35 | -------------------------------------------------------------------------------- /examples-local/math-test/src/index.ts: -------------------------------------------------------------------------------- 1 | /* Web-Based-VR-Tutorial Project Template 2 | * Author: Evan Suma Rosenberg and Blair MacIntyre 3 | * License: Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International 4 | */ 5 | 6 | // Extended by David J. Zielinski 7 | 8 | import { Vector2 } from "@babylonjs/core/Maths/math.vector"; 9 | import { Vector3 } from "@babylonjs/core/Maths/math.vector"; 10 | import TileMath from "../../../lib/TileMath"; 11 | 12 | class Game { 13 | 14 | public outputDiv: HTMLElement | null; 15 | 16 | constructor() { 17 | // Get the canvas element 18 | //this.canvas = document.getElementById("renderCanvas") as HTMLCanvasElement; 19 | //this.canvas = document.getElementById("renderCanvas") as unknown as HTMLCanvasElement; //recent node 20.17.0 on mac seems to need this? 20 | this.outputDiv = document.getElementById('output'); 21 | 22 | if(this.outputDiv){ 23 | this.outputDiv.style.whiteSpace = 'pre-wrap'; //per chatgpt 24 | this.outputDiv.textContent=""; 25 | } 26 | 27 | // Generate the BABYLON 3D engine 28 | //this.engine = new Engine(this.canvas, true); 29 | 30 | // Creates a basic Babylon Scene object 31 | //this.scene = new Scene(this.engine); 32 | } 33 | 34 | public print(text: string){ 35 | if(this.outputDiv){ 36 | this.outputDiv.textContent+=text+"\n"; 37 | } 38 | } 39 | 40 | start(): void { 41 | var tm=new TileMath(undefined); 42 | 43 | this.print("Running some math tests..."); 44 | 45 | //https://epsg.io/transform#s_srs=4326&t_srs=3857&x=-80.0000000&y=35.0000000 46 | 47 | var webMercatorAnswer=new Vector2(-8905559.263461886,4163881.144064293); 48 | var LatLonAnswer=new Vector2(-80,35); 49 | 50 | this.print("==================================================="); 51 | this.print("Lets test converting 4326 vs 3857"); 52 | 53 | var result1=tm.epsg3857_to_Epsg4326(webMercatorAnswer); 54 | this.print("Calcd 3857 to 4326: " + result1); 55 | this.print(" difference: " + LatLonAnswer.subtract(result1)); 56 | this.print(""); 57 | 58 | var result2=tm.epsg4326_to_Epsg3857(LatLonAnswer); 59 | this.print("Calcd 4326 to 3857: " + result2); 60 | this.print(" difference: " + webMercatorAnswer.subtract(result2)); 61 | this.print("==================================================="); 62 | 63 | var tileTest=new Vector3(18049,25907,16); 64 | this.print("looking at tile: " + tileTest); 65 | 66 | var result=tm.tile_to_lonlat(tileTest); 67 | this.print("lon/lat: " + result); 68 | } 69 | 70 | } 71 | /******* End of the Game class ******/ 72 | 73 | // start the game 74 | var game = new Game(); 75 | game.start(); -------------------------------------------------------------------------------- /examples-local/math-test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esNext", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "skipLibCheck": true, 13 | "preserveConstEnums":true, 14 | "sourceMap": true, 15 | //"watch": false, 16 | "strictPropertyInitialization": false, 17 | "allowSyntheticDefaultImports":true, 18 | //"paths": { 19 | // "babylonjs-mapping": ["../lib"] 20 | //} 21 | }, 22 | "files": [ 23 | "src/index.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples-local/math-test/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | console.log('Webpack configuration:', JSON.stringify(module.exports, null, 2)); 4 | 5 | 6 | const fs = require('fs'); 7 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 8 | const { 9 | CleanWebpackPlugin 10 | } = require('clean-webpack-plugin'); 11 | 12 | // App directory 13 | const appDirectory = fs.realpathSync(process.cwd()); 14 | 15 | //console.log('Resolved path:', path.resolve(__dirname, '../../lib')); // Add this line 16 | 17 | module.exports = { 18 | resolve: { 19 | extensions: ['.ts', '.js'] 20 | }, 21 | output: { 22 | filename: 'js/babylonBundle.js', 23 | path: path.resolve(__dirname,"./dist/") 24 | }, 25 | module: { 26 | rules: [{ 27 | test: /\.(js|mjs|jsx|ts|tsx)$/, 28 | loader: 'source-map-loader', 29 | enforce: 'pre', 30 | }, 31 | { //per https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes 32 | test: /\.m?js$/, 33 | resolve: { 34 | fullySpecified: false, 35 | }, 36 | }, 37 | { 38 | test: /\.tsx?$/, 39 | loader: 'ts-loader', 40 | exclude: /node_modules/ 41 | }, 42 | { 43 | test: /\.(png|jpg|gif|env|glb|stl)$/i, 44 | use: [{ 45 | loader: 'url-loader', 46 | options: { 47 | limit: 8192, 48 | }, 49 | }, ], 50 | } 51 | ] 52 | }, 53 | plugins: [ 54 | new CleanWebpackPlugin(), 55 | new HtmlWebpackPlugin({ 56 | inject: true, 57 | template: path.resolve(appDirectory, "index.html"), 58 | }), 59 | ], 60 | } -------------------------------------------------------------------------------- /examples-local/math-test/webpack.config-dev.js: -------------------------------------------------------------------------------- 1 | //const merge = require('webpack-merge'); 2 | const { merge } = require('webpack-merge'); //new syntax for webpack 5 3 | 4 | const path = require('path'); 5 | const fs = require('fs'); 6 | const common = require('./webpack.common.js'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'inline-source-map', 14 | 15 | devServer: { 16 | //contentBase: path.resolve(appDirectory), 17 | //publicPath: '/', 18 | compress: true, 19 | hot: true, 20 | //open: "chrome", 21 | open: true, 22 | static: path.resolve(appDirectory, "public"), 23 | //disableHostCheck: true, 24 | 25 | // enable to access from other devices on the network 26 | //useLocalIp: true, 27 | //host: '0.0.0.0', 28 | 29 | // if you aren’t using ngrok, and want to connect locally, webxr requires https 30 | // https: true, 31 | 32 | headers:{ 33 | "Access-Control-Allow-Origin": "*" 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /examples-local/math-test/webpack.config-prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }); -------------------------------------------------------------------------------- /examples-local/mouse-latlon/.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # Don't lint webpack config 6 | webpack.* 7 | 8 | *.md -------------------------------------------------------------------------------- /examples-local/mouse-latlon/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: [ 5 | '@typescript-eslint', 6 | ], 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | ], 12 | }; -------------------------------------------------------------------------------- /examples-local/mouse-latlon/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_Store 107 | .settings 108 | package-lock.json 109 | npm-debug.log 110 | dist 111 | 112 | mapbox-key.txt 113 | osmb-key.txt 114 | -------------------------------------------------------------------------------- /examples-local/mouse-latlon/README.md: -------------------------------------------------------------------------------- 1 | # IEEE VR 2021 Web-Based VR Tutorial 2 | 3 | This is a simple example of a Babylon.js project. 4 | 5 | To work with this sample, you should have Node (and in particular, npm and npx) installed, which you can retrieve from [nodejs.org](http://nodejs.org). 6 | 7 | ## Running 8 | 9 | You set up the initial project by pulling the dependencies from npm with 10 | ``` 11 | npm install 12 | ``` 13 | 14 | After that, you can compile and run a server with: 15 | ``` 16 | npm run start 17 | ``` 18 | 19 | For those familiar with Typescript, you do not have to run ```tsc``` to build the .js files from the .ts files; ```npx``` builds them on the fly as part of running webpack. 20 | 21 | You can run the sample by pointing your web browser at ```https://localhost:8080/index.html``` 22 | 23 | ## License 24 | 25 | Material for the Web-Based VR Tutorial by [Evan Suma Rosenberg](https://illusioneering.umn.edu/) and [Blair MacIntyre](https://blairmacintyre.me/) is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 26 | 27 | The intent of choosing CC BY-NC-SA 4.0 is to allow individuals and instructors at non-profit entities to use this content. This includes not-for-profit schools (K-12 and post-secondary). For-profit entities (or people creating courses for those sites) may not use this content without permission (this includes, but is not limited to, for-profit schools and universities and commercial education sites such as Coursera, Udacity, LinkedIn Learning, and other similar sites). -------------------------------------------------------------------------------- /examples-local/mouse-latlon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/mouse-latlon/favicon.ico -------------------------------------------------------------------------------- /examples-local/mouse-latlon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OpenStreetMap-HelloWorld 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples-local/mouse-latlon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OpenStreetMap-HelloWorld", 3 | "version": "1.0.0", 4 | "description": "illustrate using babylonjs-mapping to get tiles and buildings, but pull the mapping library locally, instead of the NPM repository", 5 | "main": "index.ts", 6 | "dependencies": { 7 | "@babylonjs/core": "^6.49.0", 8 | "@babylonjs/gui": "^6.49.0", 9 | "@babylonjs/inspector": "^6.49.0", 10 | "@babylonjs/materials": "^6.49.0" 11 | }, 12 | "devDependencies": { 13 | "@types/earcut": "^2.1.4", 14 | "@typescript-eslint/eslint-plugin": "^6.18.0", 15 | "@typescript-eslint/parser": "^6.18.0", 16 | "clean-webpack-plugin": "^4.0.0", 17 | "eslint": "^8.56.0", 18 | "html-webpack-plugin": "^5.6.0", 19 | "source-map-loader": "^4.0.2", 20 | "ts-loader": "^9", 21 | "typescript": "^5.3.3", 22 | "webpack": "^5.89.0", 23 | "webpack-cli": "^5.1.4", 24 | "webpack-dev-server": "^4.15.1", 25 | "webpack-merge": "^5.10.0" 26 | }, 27 | "scripts": { 28 | "start": "npx webpack-dev-server --config webpack.config-dev.js", 29 | "build": "npx webpack --config webpack.config-prod.js", 30 | "lint": "npx eslint . --ext .ts,.tsx" 31 | }, 32 | "author": "David J. Zielinski. original template by Evan Suma Rosenberg and Blair MacIntyre ", 33 | "license": "CC BY-NC-SA 4.0" 34 | } 35 | -------------------------------------------------------------------------------- /examples-local/mouse-latlon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esNext", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "skipLibCheck": true, 13 | "preserveConstEnums":true, 14 | "sourceMap": true, 15 | //"watch": false, 16 | "strictPropertyInitialization": false, 17 | "allowSyntheticDefaultImports":true, 18 | //"paths": { 19 | // "babylonjs-mapping": ["../lib"] 20 | //} 21 | }, 22 | "files": [ 23 | "src/index.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples-local/mouse-latlon/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | console.log('Webpack configuration:', JSON.stringify(module.exports, null, 2)); 4 | 5 | 6 | const fs = require('fs'); 7 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 8 | const { 9 | CleanWebpackPlugin 10 | } = require('clean-webpack-plugin'); 11 | 12 | // App directory 13 | const appDirectory = fs.realpathSync(process.cwd()); 14 | 15 | //console.log('Resolved path:', path.resolve(__dirname, '../../lib')); // Add this line 16 | 17 | module.exports = { 18 | resolve: { 19 | extensions: ['.ts', '.js'] 20 | }, 21 | output: { 22 | filename: 'js/babylonBundle.js', 23 | path: path.resolve(__dirname,"./dist/") 24 | }, 25 | module: { 26 | rules: [{ 27 | test: /\.(js|mjs|jsx|ts|tsx)$/, 28 | loader: 'source-map-loader', 29 | enforce: 'pre', 30 | }, 31 | { //per https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes 32 | test: /\.m?js$/, 33 | resolve: { 34 | fullySpecified: false, 35 | }, 36 | }, 37 | { 38 | test: /\.tsx?$/, 39 | loader: 'ts-loader', 40 | exclude: /node_modules/ 41 | }, 42 | { 43 | test: /\.(png|jpg|gif|env|glb|stl)$/i, 44 | use: [{ 45 | loader: 'url-loader', 46 | options: { 47 | limit: 8192, 48 | }, 49 | }, ], 50 | } 51 | ] 52 | }, 53 | plugins: [ 54 | new CleanWebpackPlugin(), 55 | new HtmlWebpackPlugin({ 56 | inject: true, 57 | template: path.resolve(appDirectory, "index.html"), 58 | }), 59 | ], 60 | } -------------------------------------------------------------------------------- /examples-local/mouse-latlon/webpack.config-dev.js: -------------------------------------------------------------------------------- 1 | //const merge = require('webpack-merge'); 2 | const { merge } = require('webpack-merge'); //new syntax for webpack 5 3 | 4 | const path = require('path'); 5 | const fs = require('fs'); 6 | const common = require('./webpack.common.js'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'inline-source-map', 14 | 15 | devServer: { 16 | //contentBase: path.resolve(appDirectory), 17 | //publicPath: '/', 18 | compress: true, 19 | hot: true, 20 | //open: "chrome", 21 | open: true, 22 | static: path.resolve(appDirectory, "public"), 23 | //disableHostCheck: true, 24 | 25 | // enable to access from other devices on the network 26 | //useLocalIp: true, 27 | //host: '0.0.0.0', 28 | 29 | // if you aren’t using ngrok, and want to connect locally, webxr requires https 30 | // https: true, 31 | 32 | headers:{ 33 | "Access-Control-Allow-Origin": "*" 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /examples-local/mouse-latlon/webpack.config-prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }); -------------------------------------------------------------------------------- /examples-local/multisource/.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # Don't lint webpack config 6 | webpack.* 7 | 8 | *.md -------------------------------------------------------------------------------- /examples-local/multisource/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: [ 5 | '@typescript-eslint', 6 | ], 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | ], 12 | }; -------------------------------------------------------------------------------- /examples-local/multisource/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_Store 107 | .settings 108 | package-lock.json 109 | npm-debug.log 110 | dist 111 | 112 | mapbox-key.txt 113 | osmb-key.txt 114 | -------------------------------------------------------------------------------- /examples-local/multisource/README.md: -------------------------------------------------------------------------------- 1 | # IEEE VR 2021 Web-Based VR Tutorial 2 | 3 | This is a simple example of a Babylon.js project. 4 | 5 | To work with this sample, you should have Node (and in particular, npm and npx) installed, which you can retrieve from [nodejs.org](http://nodejs.org). 6 | 7 | ## Running 8 | 9 | You set up the initial project by pulling the dependencies from npm with 10 | ``` 11 | npm install 12 | ``` 13 | 14 | After that, you can compile and run a server with: 15 | ``` 16 | npm run start 17 | ``` 18 | 19 | For those familiar with Typescript, you do not have to run ```tsc``` to build the .js files from the .ts files; ```npx``` builds them on the fly as part of running webpack. 20 | 21 | You can run the sample by pointing your web browser at ```https://localhost:8080/index.html``` 22 | 23 | ## License 24 | 25 | Material for the Web-Based VR Tutorial by [Evan Suma Rosenberg](https://illusioneering.umn.edu/) and [Blair MacIntyre](https://blairmacintyre.me/) is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 26 | 27 | The intent of choosing CC BY-NC-SA 4.0 is to allow individuals and instructors at non-profit entities to use this content. This includes not-for-profit schools (K-12 and post-secondary). For-profit entities (or people creating courses for those sites) may not use this content without permission (this includes, but is not limited to, for-profit schools and universities and commercial education sites such as Coursera, Udacity, LinkedIn Learning, and other similar sites). -------------------------------------------------------------------------------- /examples-local/multisource/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/multisource/favicon.ico -------------------------------------------------------------------------------- /examples-local/multisource/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OpenStreetMap-HelloWorld 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples-local/multisource/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OpenStreetMap-HelloWorld", 3 | "version": "1.0.0", 4 | "description": "illustrate using babylonjs-mapping to get tiles and buildings, but pull the mapping library locally, instead of the NPM repository", 5 | "main": "index.ts", 6 | "dependencies": { 7 | "@babylonjs/core": "^6.49.0", 8 | "@babylonjs/gui": "^6.49.0", 9 | "@babylonjs/inspector": "^6.49.0", 10 | "@babylonjs/materials": "^6.49.0" 11 | }, 12 | "devDependencies": { 13 | "@types/earcut": "^2.1.4", 14 | "@typescript-eslint/eslint-plugin": "^6.18.0", 15 | "@typescript-eslint/parser": "^6.18.0", 16 | "clean-webpack-plugin": "^4.0.0", 17 | "eslint": "^8.56.0", 18 | "html-webpack-plugin": "^5.6.0", 19 | "source-map-loader": "^4.0.2", 20 | "ts-loader": "^9", 21 | "typescript": "^5.3.3", 22 | "webpack": "^5.89.0", 23 | "webpack-cli": "^5.1.4", 24 | "webpack-dev-server": "^4.15.1", 25 | "webpack-merge": "^5.10.0" 26 | }, 27 | "scripts": { 28 | "start": "npx webpack-dev-server --config webpack.config-dev.js", 29 | "build": "npx webpack --config webpack.config-prod.js", 30 | "lint": "npx eslint . --ext .ts,.tsx" 31 | }, 32 | "author": "David J. Zielinski. original template by Evan Suma Rosenberg and Blair MacIntyre ", 33 | "license": "CC BY-NC-SA 4.0" 34 | } 35 | -------------------------------------------------------------------------------- /examples-local/multisource/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esNext", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "skipLibCheck": true, 13 | "preserveConstEnums":true, 14 | "sourceMap": true, 15 | //"watch": false, 16 | "strictPropertyInitialization": false, 17 | "allowSyntheticDefaultImports":true, 18 | //"paths": { 19 | // "babylonjs-mapping": ["../lib"] 20 | //} 21 | }, 22 | "files": [ 23 | "src/index.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples-local/multisource/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | console.log('Webpack configuration:', JSON.stringify(module.exports, null, 2)); 4 | 5 | 6 | const fs = require('fs'); 7 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 8 | const { 9 | CleanWebpackPlugin 10 | } = require('clean-webpack-plugin'); 11 | 12 | // App directory 13 | const appDirectory = fs.realpathSync(process.cwd()); 14 | 15 | //console.log('Resolved path:', path.resolve(__dirname, '../../lib')); // Add this line 16 | 17 | module.exports = { 18 | resolve: { 19 | extensions: ['.ts', '.js'] 20 | }, 21 | output: { 22 | filename: 'js/babylonBundle.js', 23 | path: path.resolve(__dirname,"./dist/") 24 | }, 25 | module: { 26 | rules: [{ 27 | test: /\.(js|mjs|jsx|ts|tsx)$/, 28 | loader: 'source-map-loader', 29 | enforce: 'pre', 30 | }, 31 | { //per https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes 32 | test: /\.m?js$/, 33 | resolve: { 34 | fullySpecified: false, 35 | }, 36 | }, 37 | { 38 | test: /\.tsx?$/, 39 | loader: 'ts-loader', 40 | exclude: /node_modules/ 41 | }, 42 | { 43 | test: /\.(png|jpg|gif|env|glb|stl)$/i, 44 | use: [{ 45 | loader: 'url-loader', 46 | options: { 47 | limit: 8192, 48 | }, 49 | }, ], 50 | } 51 | ] 52 | }, 53 | plugins: [ 54 | new CleanWebpackPlugin(), 55 | new HtmlWebpackPlugin({ 56 | inject: true, 57 | template: path.resolve(appDirectory, "index.html"), 58 | }), 59 | ], 60 | } -------------------------------------------------------------------------------- /examples-local/multisource/webpack.config-dev.js: -------------------------------------------------------------------------------- 1 | //const merge = require('webpack-merge'); 2 | const { merge } = require('webpack-merge'); //new syntax for webpack 5 3 | 4 | const path = require('path'); 5 | const fs = require('fs'); 6 | const common = require('./webpack.common.js'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'inline-source-map', 14 | 15 | devServer: { 16 | //contentBase: path.resolve(appDirectory), 17 | //publicPath: '/', 18 | compress: true, 19 | hot: true, 20 | //open: "chrome", 21 | open: true, 22 | static: path.resolve(appDirectory, "public"), 23 | //disableHostCheck: true, 24 | 25 | // enable to access from other devices on the network 26 | //useLocalIp: true, 27 | //host: '0.0.0.0', 28 | 29 | // if you aren’t using ngrok, and want to connect locally, webxr requires https 30 | // https: true, 31 | 32 | headers:{ 33 | "Access-Control-Allow-Origin": "*" 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /examples-local/multisource/webpack.config-prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }); -------------------------------------------------------------------------------- /examples-local/point-test/.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # Don't lint webpack config 6 | webpack.* 7 | 8 | *.md -------------------------------------------------------------------------------- /examples-local/point-test/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: [ 5 | '@typescript-eslint', 6 | ], 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | ], 12 | }; -------------------------------------------------------------------------------- /examples-local/point-test/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_Store 107 | .settings 108 | package-lock.json 109 | npm-debug.log 110 | dist 111 | 112 | mapbox-key.txt 113 | osmb-key.txt 114 | -------------------------------------------------------------------------------- /examples-local/point-test/README.md: -------------------------------------------------------------------------------- 1 | # IEEE VR 2021 Web-Based VR Tutorial 2 | 3 | This is a simple example of a Babylon.js project. 4 | 5 | To work with this sample, you should have Node (and in particular, npm and npx) installed, which you can retrieve from [nodejs.org](http://nodejs.org). 6 | 7 | ## Running 8 | 9 | You set up the initial project by pulling the dependencies from npm with 10 | ``` 11 | npm install 12 | ``` 13 | 14 | After that, you can compile and run a server with: 15 | ``` 16 | npm run start 17 | ``` 18 | 19 | For those familiar with Typescript, you do not have to run ```tsc``` to build the .js files from the .ts files; ```npx``` builds them on the fly as part of running webpack. 20 | 21 | You can run the sample by pointing your web browser at ```https://localhost:8080/index.html``` 22 | 23 | ## License 24 | 25 | Material for the Web-Based VR Tutorial by [Evan Suma Rosenberg](https://illusioneering.umn.edu/) and [Blair MacIntyre](https://blairmacintyre.me/) is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 26 | 27 | The intent of choosing CC BY-NC-SA 4.0 is to allow individuals and instructors at non-profit entities to use this content. This includes not-for-profit schools (K-12 and post-secondary). For-profit entities (or people creating courses for those sites) may not use this content without permission (this includes, but is not limited to, for-profit schools and universities and commercial education sites such as Coursera, Udacity, LinkedIn Learning, and other similar sites). -------------------------------------------------------------------------------- /examples-local/point-test/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/point-test/favicon.ico -------------------------------------------------------------------------------- /examples-local/point-test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OpenStreetMap-HelloWorld 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples-local/point-test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OpenStreetMap-HelloWorld", 3 | "version": "1.0.0", 4 | "description": "illustrate using babylonjs-mapping to get tiles and buildings, but pull the mapping library locally, instead of the NPM repository", 5 | "main": "index.ts", 6 | "dependencies": { 7 | "@babylonjs/core": "^6.49.0", 8 | "@babylonjs/gui": "^6.49.0", 9 | "@babylonjs/inspector": "^6.49.0", 10 | "@babylonjs/materials": "^6.49.0" 11 | }, 12 | "devDependencies": { 13 | "@types/earcut": "^2.1.4", 14 | "@typescript-eslint/eslint-plugin": "^6.18.0", 15 | "@typescript-eslint/parser": "^6.18.0", 16 | "clean-webpack-plugin": "^4.0.0", 17 | "eslint": "^8.56.0", 18 | "html-webpack-plugin": "^5.6.0", 19 | "source-map-loader": "^4.0.2", 20 | "ts-loader": "^9", 21 | "typescript": "^5.3.3", 22 | "webpack": "^5.89.0", 23 | "webpack-cli": "^5.1.4", 24 | "webpack-dev-server": "^4.15.1", 25 | "webpack-merge": "^5.10.0" 26 | }, 27 | "scripts": { 28 | "start": "npx webpack-dev-server --config webpack.config-dev.js", 29 | "build": "npx webpack --config webpack.config-prod.js", 30 | "lint": "npx eslint . --ext .ts,.tsx" 31 | }, 32 | "author": "David J. Zielinski. original template by Evan Suma Rosenberg and Blair MacIntyre ", 33 | "license": "CC BY-NC-SA 4.0" 34 | } 35 | -------------------------------------------------------------------------------- /examples-local/point-test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esNext", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "skipLibCheck": true, 13 | "preserveConstEnums":true, 14 | "sourceMap": true, 15 | //"watch": false, 16 | "strictPropertyInitialization": false, 17 | "allowSyntheticDefaultImports":true, 18 | //"paths": { 19 | // "babylonjs-mapping": ["../lib"] 20 | //} 21 | }, 22 | "files": [ 23 | "src/index.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples-local/point-test/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | console.log('Webpack configuration:', JSON.stringify(module.exports, null, 2)); 4 | 5 | 6 | const fs = require('fs'); 7 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 8 | const { 9 | CleanWebpackPlugin 10 | } = require('clean-webpack-plugin'); 11 | 12 | // App directory 13 | const appDirectory = fs.realpathSync(process.cwd()); 14 | 15 | //console.log('Resolved path:', path.resolve(__dirname, '../../lib')); // Add this line 16 | 17 | module.exports = { 18 | resolve: { 19 | extensions: ['.ts', '.js'] 20 | }, 21 | output: { 22 | filename: 'js/babylonBundle.js', 23 | path: path.resolve(__dirname,"./dist/") 24 | }, 25 | module: { 26 | rules: [{ 27 | test: /\.(js|mjs|jsx|ts|tsx)$/, 28 | loader: 'source-map-loader', 29 | enforce: 'pre', 30 | }, 31 | { //per https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes 32 | test: /\.m?js$/, 33 | resolve: { 34 | fullySpecified: false, 35 | }, 36 | }, 37 | { 38 | test: /\.tsx?$/, 39 | loader: 'ts-loader', 40 | exclude: /node_modules/ 41 | }, 42 | { 43 | test: /\.(png|jpg|gif|env|glb|stl)$/i, 44 | use: [{ 45 | loader: 'url-loader', 46 | options: { 47 | limit: 8192, 48 | }, 49 | }, ], 50 | } 51 | ] 52 | }, 53 | plugins: [ 54 | new CleanWebpackPlugin(), 55 | new HtmlWebpackPlugin({ 56 | inject: true, 57 | template: path.resolve(appDirectory, "index.html"), 58 | }), 59 | ], 60 | } -------------------------------------------------------------------------------- /examples-local/point-test/webpack.config-dev.js: -------------------------------------------------------------------------------- 1 | //const merge = require('webpack-merge'); 2 | const { merge } = require('webpack-merge'); //new syntax for webpack 5 3 | 4 | const path = require('path'); 5 | const fs = require('fs'); 6 | const common = require('./webpack.common.js'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'inline-source-map', 14 | 15 | devServer: { 16 | //contentBase: path.resolve(appDirectory), 17 | //publicPath: '/', 18 | compress: true, 19 | hot: true, 20 | //open: "chrome", 21 | open: true, 22 | static: path.resolve(appDirectory, "public"), 23 | //disableHostCheck: true, 24 | 25 | // enable to access from other devices on the network 26 | //useLocalIp: true, 27 | //host: '0.0.0.0', 28 | 29 | // if you aren’t using ngrok, and want to connect locally, webxr requires https 30 | // https: true, 31 | 32 | headers:{ 33 | "Access-Control-Allow-Origin": "*" 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /examples-local/point-test/webpack.config-prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }); -------------------------------------------------------------------------------- /examples-local/wmts-local/.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # Don't lint webpack config 6 | webpack.* 7 | 8 | *.md -------------------------------------------------------------------------------- /examples-local/wmts-local/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: [ 5 | '@typescript-eslint', 6 | ], 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | ], 12 | }; -------------------------------------------------------------------------------- /examples-local/wmts-local/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_Store 107 | .settings 108 | package-lock.json 109 | npm-debug.log 110 | dist 111 | 112 | mapbox-key.txt 113 | osmb-key.txt 114 | -------------------------------------------------------------------------------- /examples-local/wmts-local/README.md: -------------------------------------------------------------------------------- 1 | # IEEE VR 2021 Web-Based VR Tutorial 2 | 3 | This is a simple example of a Babylon.js project. 4 | 5 | To work with this sample, you should have Node (and in particular, npm and npx) installed, which you can retrieve from [nodejs.org](http://nodejs.org). 6 | 7 | ## Running 8 | 9 | You set up the initial project by pulling the dependencies from npm with 10 | ``` 11 | npm install 12 | ``` 13 | 14 | After that, you can compile and run a server with: 15 | ``` 16 | npm run start 17 | ``` 18 | 19 | For those familiar with Typescript, you do not have to run ```tsc``` to build the .js files from the .ts files; ```npx``` builds them on the fly as part of running webpack. 20 | 21 | You can run the sample by pointing your web browser at ```https://localhost:8080/index.html``` 22 | 23 | ## License 24 | 25 | Material for the Web-Based VR Tutorial by [Evan Suma Rosenberg](https://illusioneering.umn.edu/) and [Blair MacIntyre](https://blairmacintyre.me/) is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 26 | 27 | The intent of choosing CC BY-NC-SA 4.0 is to allow individuals and instructors at non-profit entities to use this content. This includes not-for-profit schools (K-12 and post-secondary). For-profit entities (or people creating courses for those sites) may not use this content without permission (this includes, but is not limited to, for-profit schools and universities and commercial education sites such as Coursera, Udacity, LinkedIn Learning, and other similar sites). -------------------------------------------------------------------------------- /examples-local/wmts-local/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-local/wmts-local/favicon.ico -------------------------------------------------------------------------------- /examples-local/wmts-local/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OpenStreetMap-HelloWorld 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples-local/wmts-local/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OpenStreetMap-HelloWorld", 3 | "version": "1.0.0", 4 | "description": "illustrate using babylonjs-mapping to get tiles and buildings, but pull the mapping library locally, instead of the NPM repository", 5 | "main": "index.ts", 6 | "dependencies": { 7 | "@babylonjs/core": "^6.49.0", 8 | "@babylonjs/gui": "^6.49.0", 9 | "@babylonjs/inspector": "^6.49.0", 10 | "@babylonjs/materials": "^6.49.0" 11 | }, 12 | "devDependencies": { 13 | "@types/earcut": "^2.1.4", 14 | "@typescript-eslint/eslint-plugin": "^6.18.0", 15 | "@typescript-eslint/parser": "^6.18.0", 16 | "clean-webpack-plugin": "^4.0.0", 17 | "eslint": "^8.56.0", 18 | "html-webpack-plugin": "^5.6.0", 19 | "source-map-loader": "^4.0.2", 20 | "ts-loader": "^9", 21 | "typescript": "^5.3.3", 22 | "webpack": "^5.89.0", 23 | "webpack-cli": "^5.1.4", 24 | "webpack-dev-server": "^4.15.1", 25 | "webpack-merge": "^5.10.0" 26 | }, 27 | "scripts": { 28 | "start": "npx webpack-dev-server --config webpack.config-dev.js", 29 | "build": "npx webpack --config webpack.config-prod.js", 30 | "lint": "npx eslint . --ext .ts,.tsx" 31 | }, 32 | "author": "David J. Zielinski. original template by Evan Suma Rosenberg and Blair MacIntyre ", 33 | "license": "CC BY-NC-SA 4.0" 34 | } 35 | -------------------------------------------------------------------------------- /examples-local/wmts-local/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esNext", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "skipLibCheck": true, 13 | "preserveConstEnums":true, 14 | "sourceMap": true, 15 | //"watch": false, 16 | "strictPropertyInitialization": false, 17 | "allowSyntheticDefaultImports":true, 18 | //"paths": { 19 | // "babylonjs-mapping": ["../lib"] 20 | //} 21 | }, 22 | "files": [ 23 | "src/index.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples-local/wmts-local/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | console.log('Webpack configuration:', JSON.stringify(module.exports, null, 2)); 4 | 5 | 6 | const fs = require('fs'); 7 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 8 | const { 9 | CleanWebpackPlugin 10 | } = require('clean-webpack-plugin'); 11 | 12 | // App directory 13 | const appDirectory = fs.realpathSync(process.cwd()); 14 | 15 | //console.log('Resolved path:', path.resolve(__dirname, '../../lib')); // Add this line 16 | 17 | module.exports = { 18 | resolve: { 19 | extensions: ['.ts', '.js'] 20 | }, 21 | output: { 22 | filename: 'js/babylonBundle.js', 23 | path: path.resolve(__dirname,"./dist/") 24 | }, 25 | module: { 26 | rules: [{ 27 | test: /\.(js|mjs|jsx|ts|tsx)$/, 28 | loader: 'source-map-loader', 29 | enforce: 'pre', 30 | }, 31 | { //per https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes 32 | test: /\.m?js$/, 33 | resolve: { 34 | fullySpecified: false, 35 | }, 36 | }, 37 | { 38 | test: /\.tsx?$/, 39 | loader: 'ts-loader', 40 | exclude: /node_modules/ 41 | }, 42 | { 43 | test: /\.(png|jpg|gif|env|glb|stl)$/i, 44 | use: [{ 45 | loader: 'url-loader', 46 | options: { 47 | limit: 8192, 48 | }, 49 | }, ], 50 | } 51 | ] 52 | }, 53 | plugins: [ 54 | new CleanWebpackPlugin(), 55 | new HtmlWebpackPlugin({ 56 | inject: true, 57 | template: path.resolve(appDirectory, "index.html"), 58 | }), 59 | ], 60 | } -------------------------------------------------------------------------------- /examples-local/wmts-local/webpack.config-dev.js: -------------------------------------------------------------------------------- 1 | //const merge = require('webpack-merge'); 2 | const { merge } = require('webpack-merge'); //new syntax for webpack 5 3 | 4 | const path = require('path'); 5 | const fs = require('fs'); 6 | const common = require('./webpack.common.js'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'inline-source-map', 14 | 15 | devServer: { 16 | //contentBase: path.resolve(appDirectory), 17 | //publicPath: '/', 18 | compress: true, 19 | hot: true, 20 | //open: "chrome", 21 | open: true, 22 | static: path.resolve(appDirectory, "public"), 23 | //disableHostCheck: true, 24 | 25 | // enable to access from other devices on the network 26 | //useLocalIp: true, 27 | //host: '0.0.0.0', 28 | 29 | // if you aren’t using ngrok, and want to connect locally, webxr requires https 30 | // https: true, 31 | 32 | headers:{ 33 | "Access-Control-Allow-Origin": "*" 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /examples-local/wmts-local/webpack.config-prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }); -------------------------------------------------------------------------------- /examples-npm/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/.DS_Store -------------------------------------------------------------------------------- /examples-npm/Assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/.DS_Store -------------------------------------------------------------------------------- /examples-npm/Assets/models/2nd_highschool.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/models/2nd_highschool.glb -------------------------------------------------------------------------------- /examples-npm/Assets/models/film.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples-npm/Assets/models/grier2.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/models/grier2.glb -------------------------------------------------------------------------------- /examples-npm/Assets/models/grier_funeral.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/models/grier_funeral.glb -------------------------------------------------------------------------------- /examples-npm/Assets/models/headphones.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples-npm/Assets/models/headphones_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/models/headphones_icon.png -------------------------------------------------------------------------------- /examples-npm/Assets/models/icon_attribution.txt: -------------------------------------------------------------------------------- 1 | Icons via 2 | https://feathericons.com/ 3 | -------------------------------------------------------------------------------- /examples-npm/Assets/models/image.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples-npm/Assets/models/image_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/models/image_icon.png -------------------------------------------------------------------------------- /examples-npm/Assets/models/place_holder.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/models/place_holder.mp3 -------------------------------------------------------------------------------- /examples-npm/Assets/models/savoy2.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/models/savoy2.glb -------------------------------------------------------------------------------- /examples-npm/Assets/models/savoy_theater.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/models/savoy_theater.glb -------------------------------------------------------------------------------- /examples-npm/Assets/models/station_wagon_attribution.txt: -------------------------------------------------------------------------------- 1 | https://sketchfab.com/3d-models/vintage-station-wagon-car-186687773de74beb947b9f5440ff62ff -------------------------------------------------------------------------------- /examples-npm/Assets/models/vintage_station_wagon_car.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/models/vintage_station_wagon_car.glb -------------------------------------------------------------------------------- /examples-npm/Assets/photos/grier.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/photos/grier.jpg -------------------------------------------------------------------------------- /examples-npm/Assets/photos/savoy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/photos/savoy.jpg -------------------------------------------------------------------------------- /examples-npm/Assets/photos/secondward.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/photos/secondward.jpg -------------------------------------------------------------------------------- /examples-npm/Assets/textures/120px-Downyu-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/textures/120px-Downyu-gray.png -------------------------------------------------------------------------------- /examples-npm/Assets/textures/120px-Downyu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/Assets/textures/120px-Downyu.png -------------------------------------------------------------------------------- /examples-npm/Assets/textures/attributions.txt.txt: -------------------------------------------------------------------------------- 1 | 120px-Downyuby 2 | https://commons.wikimedia.org/wiki/File:Downyu.png -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # Don't lint webpack config 6 | webpack.* 7 | 8 | *.md -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: [ 5 | '@typescript-eslint', 6 | ], 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | ], 12 | }; -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_Store 107 | .settings 108 | package-lock.json 109 | npm-debug.log 110 | dist 111 | 112 | osmb-key.txt 113 | -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/README.md: -------------------------------------------------------------------------------- 1 | # IEEE VR 2021 Web-Based VR Tutorial 2 | 3 | This is a simple example of a Babylon.js project. 4 | 5 | To work with this sample, you should have Node (and in particular, npm and npx) installed, which you can retrieve from [nodejs.org](http://nodejs.org). 6 | 7 | ## Running 8 | 9 | You set up the initial project by pulling the dependencies from npm with 10 | ``` 11 | npm install 12 | ``` 13 | 14 | After that, you can compile and run a server with: 15 | ``` 16 | npm run start 17 | ``` 18 | 19 | For those familiar with Typescript, you do not have to run ```tsc``` to build the .js files from the .ts files; ```npx``` builds them on the fly as part of running webpack. 20 | 21 | You can run the sample by pointing your web browser at ```https://localhost:8080/index.html``` 22 | 23 | ## License 24 | 25 | Material for the Web-Based VR Tutorial by [Evan Suma Rosenberg](https://illusioneering.umn.edu/) and [Blair MacIntyre](https://blairmacintyre.me/) is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 26 | 27 | The intent of choosing CC BY-NC-SA 4.0 is to allow individuals and instructors at non-profit entities to use this content. This includes not-for-profit schools (K-12 and post-secondary). For-profit entities (or people creating courses for those sites) may not use this content without permission (this includes, but is not limited to, for-profit schools and universities and commercial education sites such as Coursera, Udacity, LinkedIn Learning, and other similar sites). -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/OpenStreetMap-Endless/favicon.ico -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OpenStreetMap-Endless 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OpenStreetMap-Endless", 3 | "version": "1.0.0", 4 | "description": "pull new tiles as the user drives around, making it seem like they can travel endlessly", 5 | "main": "index.ts", 6 | "dependencies": { 7 | "@babylonjs/core": "^6.37.1", 8 | "@babylonjs/gui": "^6.37.1", 9 | "@babylonjs/inspector": "^6.37.1", 10 | "@babylonjs/materials": "^6.37.1", 11 | "@types/papaparse": "^5.3.14", 12 | "babylonjs-mapping": "^1.1.31" 13 | }, 14 | "devDependencies": { 15 | "@typescript-eslint/eslint-plugin": "^6.18.0", 16 | "@typescript-eslint/parser": "^6.18.0", 17 | "clean-webpack-plugin": "^4.0.0", 18 | "eslint": "^8.56.0", 19 | "html-webpack-plugin": "^5.6.0", 20 | "source-map-loader": "^4.0.2", 21 | "ts-loader": "^9", 22 | "typescript": "^5.3.3", 23 | "webpack": "^5.89.0", 24 | "webpack-cli": "^5.1.4", 25 | "webpack-dev-server": "^4.15.1", 26 | "webpack-merge": "^5.10.0" 27 | }, 28 | "scripts": { 29 | "start": "npx webpack-dev-server --config webpack.config-dev.js", 30 | "build": "npx webpack --config webpack.config-prod.js", 31 | "lint": "npx eslint . --ext .ts,.tsx" 32 | }, 33 | "author": "David J. Zielinski. original template by Evan Suma Rosenberg and Blair MacIntyre ", 34 | "license": "CC BY-NC-SA 4.0" 35 | } 36 | -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/public/textures/TropicalSunnyDay_nx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/OpenStreetMap-Endless/public/textures/TropicalSunnyDay_nx.jpg -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/public/textures/TropicalSunnyDay_ny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/OpenStreetMap-Endless/public/textures/TropicalSunnyDay_ny.jpg -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/public/textures/TropicalSunnyDay_nz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/OpenStreetMap-Endless/public/textures/TropicalSunnyDay_nz.jpg -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/public/textures/TropicalSunnyDay_px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/OpenStreetMap-Endless/public/textures/TropicalSunnyDay_px.jpg -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/public/textures/TropicalSunnyDay_py.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/OpenStreetMap-Endless/public/textures/TropicalSunnyDay_py.jpg -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/public/textures/TropicalSunnyDay_pz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/OpenStreetMap-Endless/public/textures/TropicalSunnyDay_pz.jpg -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "ESNext", 4 | "target": "ES5", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "skipLibCheck": true, 13 | "preserveConstEnums":true, 14 | "sourceMap": true, 15 | //"watch": false, 16 | "strictPropertyInitialization": false, 17 | "allowSyntheticDefaultImports":true 18 | }, 19 | "files": [ 20 | "src/index.ts" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const { 5 | CleanWebpackPlugin 6 | } = require('clean-webpack-plugin'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = { 12 | resolve: { 13 | extensions: ['.ts', '.js'] 14 | }, 15 | output: { 16 | filename: 'js/babylonBundle.js', 17 | path: path.resolve("./dist/") 18 | }, 19 | module: { 20 | rules: [{ 21 | test: /\.(js|mjs|jsx|ts|tsx)$/, 22 | loader: 'source-map-loader', 23 | enforce: 'pre', 24 | }, 25 | { //per https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes 26 | test: /\.m?js$/, 27 | resolve: { 28 | fullySpecified: false, 29 | }, 30 | }, 31 | { 32 | test: /\.tsx?$/, 33 | loader: 'ts-loader', 34 | exclude: /node_modules/ 35 | }, 36 | { 37 | test: /\.(png|jpg|gif|env|glb|stl)$/i, 38 | use: [{ 39 | loader: 'url-loader', 40 | options: { 41 | limit: 8192, 42 | }, 43 | }, ], 44 | } 45 | ] 46 | }, 47 | plugins: [ 48 | new CleanWebpackPlugin(), 49 | new HtmlWebpackPlugin({ 50 | inject: true, 51 | template: path.resolve(appDirectory, "index.html"), 52 | }), 53 | ], 54 | } -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/webpack.config-dev.js: -------------------------------------------------------------------------------- 1 | //const merge = require('webpack-merge'); 2 | const { merge } = require('webpack-merge'); //new syntax for webpack 5 3 | 4 | const path = require('path'); 5 | const fs = require('fs'); 6 | const common = require('./webpack.common.js'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'inline-source-map', 14 | 15 | devServer: { 16 | //contentBase: path.resolve(appDirectory), 17 | //publicPath: '/', 18 | compress: true, 19 | hot: true, 20 | //open: "chrome", 21 | open: true, 22 | static: path.resolve(appDirectory, "public"), 23 | //disableHostCheck: true, 24 | 25 | // enable to access from other devices on the network 26 | //useLocalIp: true, 27 | //host: '0.0.0.0', 28 | 29 | // if you aren’t using ngrok, and want to connect locally, webxr requires https 30 | // https: true, 31 | 32 | headers:{ 33 | "Access-Control-Allow-Origin": "*" 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-Endless/webpack.config-prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }); -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-HelloWorld/.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # Don't lint webpack config 6 | webpack.* 7 | 8 | *.md -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-HelloWorld/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: [ 5 | '@typescript-eslint', 6 | ], 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | ], 12 | }; -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-HelloWorld/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_Store 107 | .settings 108 | package-lock.json 109 | npm-debug.log 110 | dist 111 | 112 | mapbox-key.txt 113 | osmb-key.txt 114 | -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-HelloWorld/README.md: -------------------------------------------------------------------------------- 1 | # IEEE VR 2021 Web-Based VR Tutorial 2 | 3 | This is a simple example of a Babylon.js project. 4 | 5 | To work with this sample, you should have Node (and in particular, npm and npx) installed, which you can retrieve from [nodejs.org](http://nodejs.org). 6 | 7 | ## Running 8 | 9 | You set up the initial project by pulling the dependencies from npm with 10 | ``` 11 | npm install 12 | ``` 13 | 14 | After that, you can compile and run a server with: 15 | ``` 16 | npm run start 17 | ``` 18 | 19 | For those familiar with Typescript, you do not have to run ```tsc``` to build the .js files from the .ts files; ```npx``` builds them on the fly as part of running webpack. 20 | 21 | You can run the sample by pointing your web browser at ```https://localhost:8080/index.html``` 22 | 23 | ## License 24 | 25 | Material for the Web-Based VR Tutorial by [Evan Suma Rosenberg](https://illusioneering.umn.edu/) and [Blair MacIntyre](https://blairmacintyre.me/) is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 26 | 27 | The intent of choosing CC BY-NC-SA 4.0 is to allow individuals and instructors at non-profit entities to use this content. This includes not-for-profit schools (K-12 and post-secondary). For-profit entities (or people creating courses for those sites) may not use this content without permission (this includes, but is not limited to, for-profit schools and universities and commercial education sites such as Coursera, Udacity, LinkedIn Learning, and other similar sites). -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-HelloWorld/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/OpenStreetMap-HelloWorld/favicon.ico -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-HelloWorld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OpenStreetMap-HelloWorld 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-HelloWorld/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OpenStreetMap-HelloWorld", 3 | "version": "1.0.0", 4 | "description": "illustrate using babylonjs-mapping to get tiles and buildings", 5 | "main": "index.ts", 6 | "dependencies": { 7 | "@babylonjs/core": "^6.37.1", 8 | "@babylonjs/gui": "^6.37.1", 9 | "@babylonjs/inspector": "^6.37.1", 10 | "@babylonjs/materials": "^6.37.1", 11 | "babylonjs-mapping": "^1.1.31" 12 | }, 13 | "devDependencies": { 14 | "@types/earcut": "^2.1.4", 15 | "@typescript-eslint/eslint-plugin": "^6.18.0", 16 | "@typescript-eslint/parser": "^6.18.0", 17 | "clean-webpack-plugin": "^4.0.0", 18 | "eslint": "^8.56.0", 19 | "html-webpack-plugin": "^5.6.0", 20 | "source-map-loader": "^4.0.2", 21 | "ts-loader": "^9", 22 | "typescript": "^5.3.3", 23 | "webpack": "^5.89.0", 24 | "webpack-cli": "^5.1.4", 25 | "webpack-dev-server": "^4.15.1", 26 | "webpack-merge": "^5.10.0" 27 | }, 28 | "scripts": { 29 | "start": "npx webpack-dev-server --config webpack.config-dev.js", 30 | "build": "npx webpack --config webpack.config-prod.js", 31 | "lint": "npx eslint . --ext .ts,.tsx" 32 | }, 33 | "author": "David J. Zielinski. original template by Evan Suma Rosenberg and Blair MacIntyre ", 34 | "license": "CC BY-NC-SA 4.0" 35 | } 36 | -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-HelloWorld/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esNext", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "skipLibCheck": true, 13 | "preserveConstEnums":true, 14 | "sourceMap": true, 15 | //"watch": false, 16 | "strictPropertyInitialization": false, 17 | "allowSyntheticDefaultImports":true 18 | }, 19 | "files": [ 20 | "src/index.ts" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-HelloWorld/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const { 5 | CleanWebpackPlugin 6 | } = require('clean-webpack-plugin'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = { 12 | resolve: { 13 | extensions: ['.ts', '.js'] 14 | }, 15 | output: { 16 | filename: 'js/babylonBundle.js', 17 | path: path.resolve("./dist/") 18 | }, 19 | module: { 20 | rules: [{ 21 | test: /\.(js|mjs|jsx|ts|tsx)$/, 22 | loader: 'source-map-loader', 23 | enforce: 'pre', 24 | }, 25 | { //per https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes 26 | test: /\.m?js$/, 27 | resolve: { 28 | fullySpecified: false, 29 | }, 30 | }, 31 | { 32 | test: /\.tsx?$/, 33 | loader: 'ts-loader', 34 | exclude: /node_modules/ 35 | }, 36 | { 37 | test: /\.(png|jpg|gif|env|glb|stl)$/i, 38 | use: [{ 39 | loader: 'url-loader', 40 | options: { 41 | limit: 8192, 42 | }, 43 | }, ], 44 | } 45 | ] 46 | }, 47 | plugins: [ 48 | new CleanWebpackPlugin(), 49 | new HtmlWebpackPlugin({ 50 | inject: true, 51 | template: path.resolve(appDirectory, "index.html"), 52 | }), 53 | ], 54 | } -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-HelloWorld/webpack.config-dev.js: -------------------------------------------------------------------------------- 1 | //const merge = require('webpack-merge'); 2 | const { merge } = require('webpack-merge'); //new syntax for webpack 5 3 | 4 | const path = require('path'); 5 | const fs = require('fs'); 6 | const common = require('./webpack.common.js'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'inline-source-map', 14 | 15 | devServer: { 16 | //contentBase: path.resolve(appDirectory), 17 | //publicPath: '/', 18 | compress: true, 19 | hot: true, 20 | //open: "chrome", 21 | open: true, 22 | static: path.resolve(appDirectory, "public"), 23 | //disableHostCheck: true, 24 | 25 | // enable to access from other devices on the network 26 | //useLocalIp: true, 27 | //host: '0.0.0.0', 28 | 29 | // if you aren’t using ngrok, and want to connect locally, webxr requires https 30 | // https: true, 31 | 32 | headers:{ 33 | "Access-Control-Allow-Origin": "*" 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-HelloWorld/webpack.config-prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }); -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-UserData-RealScale/.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # Don't lint webpack config 6 | webpack.* 7 | 8 | *.md -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-UserData-RealScale/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: [ 5 | '@typescript-eslint', 6 | ], 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | ], 12 | }; -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-UserData-RealScale/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_Store 107 | .settings 108 | package-lock.json 109 | npm-debug.log 110 | dist 111 | 112 | mapbox-key.txt 113 | osmb-key.txt 114 | -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-UserData-RealScale/README.md: -------------------------------------------------------------------------------- 1 | # IEEE VR 2021 Web-Based VR Tutorial 2 | 3 | This is a simple example of a Babylon.js project. 4 | 5 | To work with this sample, you should have Node (and in particular, npm and npx) installed, which you can retrieve from [nodejs.org](http://nodejs.org). 6 | 7 | ## Running 8 | 9 | You set up the initial project by pulling the dependencies from npm with 10 | ``` 11 | npm install 12 | ``` 13 | 14 | After that, you can compile and run a server with: 15 | ``` 16 | npm run start 17 | ``` 18 | 19 | For those familiar with Typescript, you do not have to run ```tsc``` to build the .js files from the .ts files; ```npx``` builds them on the fly as part of running webpack. 20 | 21 | You can run the sample by pointing your web browser at ```https://localhost:8080/index.html``` 22 | 23 | ## License 24 | 25 | Material for the Web-Based VR Tutorial by [Evan Suma Rosenberg](https://illusioneering.umn.edu/) and [Blair MacIntyre](https://blairmacintyre.me/) is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 26 | 27 | The intent of choosing CC BY-NC-SA 4.0 is to allow individuals and instructors at non-profit entities to use this content. This includes not-for-profit schools (K-12 and post-secondary). For-profit entities (or people creating courses for those sites) may not use this content without permission (this includes, but is not limited to, for-profit schools and universities and commercial education sites such as Coursera, Udacity, LinkedIn Learning, and other similar sites). -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-UserData-RealScale/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/OpenStreetMap-UserData-RealScale/favicon.ico -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-UserData-RealScale/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OpenStreetMap-UserData 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-UserData-RealScale/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OpenStreetMap-UserData", 3 | "version": "1.0.0", 4 | "description": "pull in user lat/lon data to create clickable info spots", 5 | "main": "index.ts", 6 | "dependencies": { 7 | "@babylonjs/core": "^6.37.1", 8 | "@babylonjs/gui": "^6.37.1", 9 | "@babylonjs/inspector": "^6.37.1", 10 | "@babylonjs/materials": "^6.37.1", 11 | "@types/papaparse": "^5.3.14", 12 | "babylonjs-mapping": "^1.1.31", 13 | "cross-fetch": "^4.0.0", 14 | "papaparse": "^5.4.1" 15 | }, 16 | "devDependencies": { 17 | "@types/earcut": "^2.1.4", 18 | "@typescript-eslint/eslint-plugin": "^6.18.0", 19 | "@typescript-eslint/parser": "^6.18.0", 20 | "clean-webpack-plugin": "^4.0.0", 21 | "eslint": "^8.56.0", 22 | "html-webpack-plugin": "^5.6.0", 23 | "source-map-loader": "^4.0.2", 24 | "ts-loader": "^9", 25 | "typescript": "^5.3.3", 26 | "webpack": "^5.89.0", 27 | "webpack-cli": "^5.1.4", 28 | "webpack-dev-server": "^4.15.1", 29 | "webpack-merge": "^5.10.0" 30 | }, 31 | "scripts": { 32 | "start": "npx webpack-dev-server --config webpack.config-dev.js", 33 | "build": "npx webpack --config webpack.config-prod.js", 34 | "lint": "npx eslint . --ext .ts,.tsx" 35 | }, 36 | "author": "David J. Zielinski. original template by Evan Suma Rosenberg and Blair MacIntyre ", 37 | "license": "CC BY-NC-SA 4.0" 38 | } 39 | -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-UserData-RealScale/src/CsvData.ts: -------------------------------------------------------------------------------- 1 | import { fetch } from 'cross-fetch' 2 | import { parse } from 'papaparse' 3 | import { Vector2} from "@babylonjs/core/Maths/math"; 4 | 5 | export default class CsvData 6 | { 7 | private parseData: any[]; 8 | 9 | constructor(){ 10 | 11 | } 12 | 13 | public async processURL(url: string) { 14 | console.log("trying to fetch: " + url); 15 | const res = await fetch(url); 16 | console.log(" fetch returned: " + res.status); 17 | 18 | if (res.status != 200) { 19 | return; 20 | } 21 | 22 | const text = await res.text(); 23 | //console.log("raw text: " + JSON.stringify(text)); 24 | 25 | const parseResult = parse(text); 26 | this.parseData = parseResult.data as any[]; 27 | 28 | //console.log("parseData: " + this.parseData); 29 | } 30 | 31 | public getRow(row: number): any[] { 32 | return this.parseData[row+1]; //skip header 33 | } 34 | 35 | public getCoordinates(row:number) : Vector2{ 36 | return new Vector2(Number(this.parseData[row+1][1]),Number(this.parseData[row+1][0])); //lon, lat 37 | } 38 | 39 | public numRows() : number{ 40 | return this.parseData.length-1; //account for header 41 | } 42 | 43 | } -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-UserData-RealScale/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esNext", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "skipLibCheck": true, 13 | "preserveConstEnums":true, 14 | "sourceMap": true, 15 | //"watch": false, 16 | "strictPropertyInitialization": false, 17 | "allowSyntheticDefaultImports":true 18 | }, 19 | "files": [ 20 | "src/index.ts" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-UserData-RealScale/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const { 5 | CleanWebpackPlugin 6 | } = require('clean-webpack-plugin'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = { 12 | resolve: { 13 | extensions: ['.ts', '.js'] 14 | }, 15 | output: { 16 | filename: 'js/babylonBundle.js', 17 | path: path.resolve("./dist/") 18 | }, 19 | module: { 20 | rules: [{ 21 | test: /\.(js|mjs|jsx|ts|tsx)$/, 22 | loader: 'source-map-loader', 23 | enforce: 'pre', 24 | }, 25 | { //per https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes 26 | test: /\.m?js$/, 27 | resolve: { 28 | fullySpecified: false, 29 | }, 30 | }, 31 | { 32 | test: /\.tsx?$/, 33 | loader: 'ts-loader', 34 | exclude: /node_modules/ 35 | }, 36 | { 37 | test: /\.(png|jpg|gif|env|glb|stl)$/i, 38 | use: [{ 39 | loader: 'url-loader', 40 | options: { 41 | limit: 8192, 42 | }, 43 | }, ], 44 | } 45 | ] 46 | }, 47 | plugins: [ 48 | new CleanWebpackPlugin(), 49 | new HtmlWebpackPlugin({ 50 | inject: true, 51 | template: path.resolve(appDirectory, "index.html"), 52 | }), 53 | ], 54 | } -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-UserData-RealScale/webpack.config-dev.js: -------------------------------------------------------------------------------- 1 | //const merge = require('webpack-merge'); 2 | const { merge } = require('webpack-merge'); //new syntax for webpack 5 3 | 4 | const path = require('path'); 5 | const fs = require('fs'); 6 | const common = require('./webpack.common.js'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'inline-source-map', 14 | 15 | devServer: { 16 | //contentBase: path.resolve(appDirectory), 17 | //publicPath: '/', 18 | compress: true, 19 | hot: true, 20 | //open: "chrome", 21 | open: true, 22 | static: path.resolve(appDirectory, "public"), 23 | //disableHostCheck: true, 24 | 25 | // enable to access from other devices on the network 26 | //useLocalIp: true, 27 | //host: '0.0.0.0', 28 | 29 | // if you aren’t using ngrok, and want to connect locally, webxr requires https 30 | // https: true, 31 | 32 | headers:{ 33 | "Access-Control-Allow-Origin": "*" 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /examples-npm/OpenStreetMap-UserData-RealScale/webpack.config-prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }); -------------------------------------------------------------------------------- /examples-npm/README.md: -------------------------------------------------------------------------------- 1 | These examples (in the examples-npm) directory, are meant to pull down the babylonjs-mapping NPM from the main repository. 2 | So these are ideal for the basis of starting to make a "standalone" application. -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # Don't lint webpack config 6 | webpack.* 7 | 8 | *.md -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: [ 5 | '@typescript-eslint', 6 | ], 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/eslint-recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | ], 12 | }; -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_Store 107 | .settings 108 | package-lock.json 109 | npm-debug.log 110 | dist 111 | 112 | mapbox-key.txt 113 | -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/README.md: -------------------------------------------------------------------------------- 1 | # Mapbox-Terrain 2 | Do get this working you will need a mapbox-key.txt file in your /assets directory. 3 | This contains the access token you can get when registering with mapbox. 4 | 5 | # IEEE VR 2021 Web-Based VR Tutorial 6 | 7 | This is a simple example of a Babylon.js project. 8 | 9 | To work with this sample, you should have Node (and in particular, npm and npx) installed, which you can retrieve from [nodejs.org](http://nodejs.org). 10 | 11 | ## Running 12 | 13 | You set up the initial project by pulling the dependencies from npm with 14 | ``` 15 | npm install 16 | ``` 17 | 18 | After that, you can compile and run a server with: 19 | ``` 20 | npm run start 21 | ``` 22 | 23 | For those familiar with Typescript, you do not have to run ```tsc``` to build the .js files from the .ts files; ```npx``` builds them on the fly as part of running webpack. 24 | 25 | You can run the sample by pointing your web browser at ```https://localhost:8080/index.html``` 26 | 27 | ## License 28 | 29 | Material for the Web-Based VR Tutorial by [Evan Suma Rosenberg](https://illusioneering.umn.edu/) and [Blair MacIntyre](https://blairmacintyre.me/) is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). 30 | 31 | The intent of choosing CC BY-NC-SA 4.0 is to allow individuals and instructors at non-profit entities to use this content. This includes not-for-profit schools (K-12 and post-secondary). For-profit entities (or people creating courses for those sites) may not use this content without permission (this includes, but is not limited to, for-profit schools and universities and commercial education sites such as Coursera, Udacity, LinkedIn Learning, and other similar sites). -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | babylonjs-mapping mapbox-terrain demo 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Mapbox-Terrain", 3 | "version": "1.0.0", 4 | "description": "example showing how to use bablyonjs-mapping to show part of the grand canyon", 5 | "main": "index.ts", 6 | "dependencies": { 7 | "@babylonjs/core": "^6.37.1", 8 | "@babylonjs/gui": "^6.37.1", 9 | "@babylonjs/inspector": "^6.37.1", 10 | "@babylonjs/materials": "^6.37.1", 11 | "babylonjs-mapping": "^1.1.31", 12 | "cross-fetch": "^4.0.0" 13 | }, 14 | "devDependencies": { 15 | "@types/earcut": "^2.1.4", 16 | "@types/sharp": "^0.31.1", 17 | "@typescript-eslint/eslint-plugin": "^6.18.0", 18 | "@typescript-eslint/parser": "^6.18.0", 19 | "clean-webpack-plugin": "^4.0.0", 20 | "eslint": "^8.56.0", 21 | "html-webpack-plugin": "^5.6.0", 22 | "source-map-loader": "^4.0.2", 23 | "ts-loader": "^9", 24 | "typescript": "^5.3.3", 25 | "webpack": "^5.89.0", 26 | "webpack-cli": "^5.1.4", 27 | "webpack-dev-server": "^4.15.1", 28 | "webpack-merge": "^5.10.0" 29 | }, 30 | "scripts": { 31 | "start": "npx webpack-dev-server --config webpack.config-dev.js", 32 | "build": "npx webpack --config webpack.config-prod.js", 33 | "lint": "npx eslint . --ext .ts,.tsx" 34 | }, 35 | "author": "original template by Evan Suma Rosenberg and Blair MacIntyre , additions by David J. Zielinski ", 36 | "license": "CC BY-NC-SA 4.0" 37 | } 38 | -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/public/PNG/mapbox-logo-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/mapbox-terrain/public/PNG/mapbox-logo-black.png -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/public/PNG/mapbox-logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/mapbox-terrain/public/PNG/mapbox-logo-white.png -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/mapbox-terrain/public/favicon.ico -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/public/textures/TropicalSunnyDay_nx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/mapbox-terrain/public/textures/TropicalSunnyDay_nx.jpg -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/public/textures/TropicalSunnyDay_ny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/mapbox-terrain/public/textures/TropicalSunnyDay_ny.jpg -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/public/textures/TropicalSunnyDay_nz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/mapbox-terrain/public/textures/TropicalSunnyDay_nz.jpg -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/public/textures/TropicalSunnyDay_px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/mapbox-terrain/public/textures/TropicalSunnyDay_px.jpg -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/public/textures/TropicalSunnyDay_py.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/mapbox-terrain/public/textures/TropicalSunnyDay_py.jpg -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/public/textures/TropicalSunnyDay_pz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djzielin/babylonjs-mapping/d6ae64137b308c005c07524c5201aa070df84424/examples-npm/mapbox-terrain/public/textures/TropicalSunnyDay_pz.jpg -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esNext", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noImplicitAny": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "strictNullChecks": true, 11 | "strictFunctionTypes": true, 12 | "skipLibCheck": true, 13 | "preserveConstEnums":true, 14 | "sourceMap": true, 15 | //"watch": false, 16 | "strictPropertyInitialization": false, 17 | "allowSyntheticDefaultImports":true 18 | }, 19 | "files": [ 20 | "src/index.ts" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const { 5 | CleanWebpackPlugin 6 | } = require('clean-webpack-plugin'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = { 12 | resolve: { 13 | extensions: ['.ts', '.js'] 14 | }, 15 | output: { 16 | filename: 'js/babylonBundle.js', 17 | path: path.resolve("./dist/") 18 | }, 19 | module: { 20 | rules: [{ 21 | test: /\.(js|mjs|jsx|ts|tsx)$/, 22 | loader: 'source-map-loader', 23 | enforce: 'pre', 24 | }, 25 | { //per https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes 26 | test: /\.m?js$/, 27 | resolve: { 28 | fullySpecified: false, 29 | }, 30 | }, 31 | { 32 | test: /\.tsx?$/, 33 | loader: 'ts-loader', 34 | exclude: /node_modules/ 35 | }, 36 | { 37 | test: /\.(png|jpg|gif|env|glb|stl)$/i, 38 | use: [{ 39 | loader: 'url-loader', 40 | options: { 41 | limit: 8192, 42 | }, 43 | }, ], 44 | } 45 | ] 46 | }, 47 | plugins: [ 48 | new CleanWebpackPlugin(), 49 | new HtmlWebpackPlugin({ 50 | inject: true, 51 | template: path.resolve(appDirectory, "index.html"), 52 | }), 53 | ], 54 | } -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/webpack.config-dev.js: -------------------------------------------------------------------------------- 1 | //const merge = require('webpack-merge'); 2 | const { merge } = require('webpack-merge'); //new syntax for webpack 5 3 | 4 | const path = require('path'); 5 | const fs = require('fs'); 6 | const common = require('./webpack.common.js'); 7 | 8 | // App directory 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'inline-source-map', 14 | 15 | devServer: { 16 | //contentBase: path.resolve(appDirectory), 17 | //publicPath: '/', 18 | compress: true, 19 | hot: true, 20 | //open: "chrome", 21 | open: true, 22 | static: path.resolve(appDirectory, "public"), 23 | //disableHostCheck: true, 24 | 25 | // enable to access from other devices on the network 26 | //useLocalIp: true, 27 | //host: '0.0.0.0', 28 | 29 | // if you aren’t using ngrok, and want to connect locally, webxr requires https 30 | // https: true, 31 | 32 | headers:{ 33 | "Access-Control-Allow-Origin": "*" 34 | } 35 | } 36 | }); -------------------------------------------------------------------------------- /examples-npm/mapbox-terrain/webpack.config-prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | devtool: 'source-map' 7 | }); -------------------------------------------------------------------------------- /lib/Attribution.d.ts: -------------------------------------------------------------------------------- 1 | import { Scene } from "@babylonjs/core/scene"; 2 | import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/"; 3 | export default class Attribution { 4 | private scene; 5 | advancedTexture: AdvancedDynamicTexture; 6 | private buttonOSM; 7 | private buttonMB; 8 | private buttonMBLogo; 9 | private buttonImprov; 10 | private buttonOSMBuildings; 11 | private attributionList; 12 | private ourRightPanel; 13 | private ourLeftPanel; 14 | constructor(scene: Scene); 15 | addAttribution(provider: string): void; 16 | private addAttributionOSM; 17 | private addAttributionOSMBuildings; 18 | private addAttributionMapbox; 19 | } 20 | -------------------------------------------------------------------------------- /lib/Buildings.d.ts: -------------------------------------------------------------------------------- 1 | import { Vector3 } from "@babylonjs/core/Maths/math"; 2 | import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial'; 3 | import * as GeoJSON from './GeoJSON'; 4 | import Tile from "./Tile"; 5 | import TileSet from "./TileSet"; 6 | import { EPSG_Type } from "./TileMath"; 7 | import { Observable } from "@babylonjs/core"; 8 | import { RetrievalLocation, RetrievalType } from "./TileSet"; 9 | export declare enum BuildingRequestType { 10 | LoadTile = 0, 11 | CreateBuilding = 1, 12 | MergeAllBuildingsOnTile = 2 13 | } 14 | export interface BuildingRequest { 15 | requestType: BuildingRequestType; 16 | tile: Tile; 17 | tileCoords: Vector3; 18 | inProgress: boolean; 19 | flipWinding: boolean; 20 | feature?: GeoJSON.feature; 21 | epsgType?: EPSG_Type; 22 | url?: string; 23 | } 24 | interface GeoFileLoaded { 25 | url: string; 26 | topLevel: GeoJSON.topLevel; 27 | } 28 | export default abstract class Buildings { 29 | name: string; 30 | protected tileSet: TileSet; 31 | retrevialLocation: RetrievalLocation; 32 | exaggeration: number; 33 | doMerge: boolean; 34 | defaultBuildingHeight: number; 35 | lineWidth: number; 36 | pointDiameter: number; 37 | buildingsCreatedPerFrame: number; 38 | cacheFiles: boolean; 39 | buildingMaterial: StandardMaterial; 40 | retrievalType: RetrievalType; 41 | protected buildingRequests: BuildingRequest[]; 42 | protected filesLoaded: GeoFileLoaded[]; 43 | private requestsProcessedSinceCaughtUp; 44 | protected ourGeoJSON: GeoJSON.GeoJSON; 45 | private scene; 46 | onCaughtUpObservable: Observable; 47 | private sleepRequested; 48 | private timeStart; 49 | private sleepDuration; 50 | constructor(name: string, tileSet: TileSet, retrevialLocation: RetrievalLocation); 51 | abstract SubmitLoadTileRequest(tile: Tile): void; 52 | abstract SubmitLoadAllRequest(): void; 53 | ProcessGeoJSON(request: BuildingRequest, topLevel: GeoJSON.topLevel): void; 54 | protected prettyName(): string; 55 | private isURLLoaded; 56 | private getFeatures; 57 | protected stripFilePrefix(original: string): string; 58 | protected removePendingRequest(index?: number): void; 59 | protected doSave(text: string): void; 60 | protected handleLoadTileRequest(request: BuildingRequest): void; 61 | processBuildingRequests(): void; 62 | generateBuildings(): void; 63 | } 64 | export {}; 65 | -------------------------------------------------------------------------------- /lib/BuildingsOSM.d.ts: -------------------------------------------------------------------------------- 1 | import { RetrievalLocation } from "./TileSet"; 2 | import Tile from "./Tile"; 3 | import TileSet from "./TileSet"; 4 | import Buildings from "./Buildings"; 5 | export default class BuildingsOSM extends Buildings { 6 | private serverNum; 7 | accessToken: string; 8 | constructor(tileSet: TileSet, retrievalLocation?: RetrievalLocation); 9 | generateBuildings(): void; 10 | private osmBuildingServers; 11 | protected stripFilePrefix(original: string): string; 12 | SubmitLoadTileRequest(tile: Tile): void; 13 | SubmitLoadAllRequest(): void; 14 | } 15 | -------------------------------------------------------------------------------- /lib/BuildingsOSM.js: -------------------------------------------------------------------------------- 1 | import { EPSG_Type } from "./TileMath"; 2 | import { BuildingRequestType } from "./Buildings"; 3 | import { RetrievalLocation } from "./TileSet"; 4 | import Buildings from "./Buildings"; 5 | export default class BuildingsOSM extends Buildings { 6 | constructor(tileSet, retrievalLocation = RetrievalLocation.Remote) { 7 | super("OSM", tileSet, retrievalLocation); 8 | this.serverNum = 0; 9 | this.accessToken = ""; //new for 2024 osmbuildings seem to now be onegeo 10 | this.osmBuildingServers = [ 11 | "https://a-data.onegeo.co/maps/tiles/", //new for 2024 osmbuildings seem to now be onegeo 12 | "https://b-data.onegeo.co/maps/tiles/", 13 | "https://c-data.onegeo.co/maps/tiles/", 14 | "https://d-data.onegeo.co/maps/tiles/" 15 | //"https://a.data.osmbuildings.org/0.2/anonymous/tile/", 16 | //"https://b.data.osmbuildings.org/0.2/anonymous/tile/", 17 | //"https://c.data.osmbuildings.org/0.2/anonymous/tile/", 18 | //"https://d.data.osmbuildings.org/0.2/anonymous/tile/" 19 | ]; 20 | } 21 | generateBuildings() { 22 | super.generateBuildings(); 23 | this.tileSet.ourAttribution.addAttribution("OSMB"); 24 | } 25 | stripFilePrefix(original) { 26 | const prefixLength = 35; //51 27 | const stripped = original.slice(prefixLength); 28 | //console.log("new file URL is: " + stripped); 29 | return stripped; 30 | } 31 | SubmitLoadTileRequest(tile) { 32 | if (tile.tileCoords.z > 16) { 33 | console.error(this.prettyName() + "Zoom level of: " + tile.tileCoords.z + " is too large! This means that buildings won't work!"); 34 | return; 35 | } 36 | const storedCoords = tile.tileCoords.clone(); 37 | const url = this.osmBuildingServers[this.serverNum] + storedCoords.z + "/" + storedCoords.x + "/" + storedCoords.y + ".json" + "?token=" + this.accessToken; 38 | this.serverNum = (this.serverNum + 1) % this.osmBuildingServers.length; //increment server to use with wrap around 39 | const request = { 40 | requestType: BuildingRequestType.LoadTile, 41 | tile: tile, 42 | tileCoords: storedCoords, 43 | epsgType: EPSG_Type.EPSG_4326, 44 | url: url, 45 | inProgress: false, 46 | flipWinding: true 47 | }; 48 | this.buildingRequests.push(request); 49 | } 50 | SubmitLoadAllRequest() { 51 | console.error("asking for all OSM data doesn't make sense, you should use the individual request type!"); 52 | } 53 | } 54 | //# sourceMappingURL=BuildingsOSM.js.map -------------------------------------------------------------------------------- /lib/BuildingsWFS.d.ts: -------------------------------------------------------------------------------- 1 | import { EPSG_Type } from "./TileMath"; 2 | import { RetrievalLocation } from "./TileSet"; 3 | import Tile from "./Tile"; 4 | import TileSet from "./TileSet"; 5 | import Buildings from "./Buildings"; 6 | export default class BuildingsWFS extends Buildings { 7 | url: string; 8 | layerName: string; 9 | epsg: EPSG_Type; 10 | urlService: string; 11 | urlOutput: string; 12 | urlRequest: string; 13 | flipWinding: boolean; 14 | constructor(name: string, url: string, layerName: string, epsg: EPSG_Type, tileSet: TileSet, retrievalLocation?: RetrievalLocation); 15 | setupAGOL(): void; 16 | setupGeoServer(): void; 17 | SubmitLoadTileRequest(tile: Tile): void; 18 | SubmitLoadAllRequest(): void; 19 | private loadHelper; 20 | } 21 | -------------------------------------------------------------------------------- /lib/BuildingsWFS.js: -------------------------------------------------------------------------------- 1 | import { BuildingRequestType } from "./Buildings"; 2 | import { RetrievalLocation, RetrievalType } from "./TileSet"; 3 | import Buildings from "./Buildings"; 4 | export default class BuildingsWFS extends Buildings { 5 | constructor(name, url, layerName, epsg, tileSet, retrievalLocation = RetrievalLocation.Remote) { 6 | super(name, tileSet, retrievalLocation); 7 | this.url = url; 8 | this.layerName = layerName; 9 | this.epsg = epsg; 10 | this.urlService = "service=WFS"; 11 | this.urlOutput = ""; 12 | //public urlVersion = "&version=1.0.0"; 13 | this.urlRequest = "&request=GetFeature"; 14 | this.flipWinding = false; 15 | this.setupGeoServer(); 16 | } 17 | setupAGOL() { 18 | this.urlOutput = "&outputFormat=GEOJSON"; 19 | this.flipWinding = true; 20 | } 21 | setupGeoServer() { 22 | this.urlOutput = "&outputFormat=application%2Fjson"; 23 | this.flipWinding = false; 24 | } 25 | SubmitLoadTileRequest(tile) { 26 | const bboxValues = this.tileSet.ourTileMath.computeBBOX_4326(tile.tileCoords); 27 | this.loadHelper(tile, bboxValues); 28 | } 29 | SubmitLoadAllRequest() { 30 | const tile = this.tileSet.ourTiles[0]; //lets just choose the first tile so it has something 31 | const bboxValues = this.tileSet.ourTileMath.computeBBOX_4326_Tileset(); 32 | this.loadHelper(tile, bboxValues); 33 | } 34 | loadHelper(tile, bboxValues) { 35 | const urlFeature = "&typeName=" + this.layerName; 36 | const urlBox = "&bbox=" + 37 | bboxValues.x + "," + 38 | bboxValues.y + "," + 39 | bboxValues.z + "," + 40 | bboxValues.w + "," + 41 | "urn:ogc:def:crs:EPSG:4326"; 42 | let requestURL = this.url + this.urlService + this.urlRequest + urlFeature + this.urlOutput + urlBox; 43 | if (this.retrevialLocation == RetrievalLocation.Local && this.retrievalType == RetrievalType.AllData) { 44 | const baseUrl = window.location.href.replace(/\/[^/]*\.[^/]*$/, "").replace(/\/$/, "") + "/"; //TODO make this a util function 45 | requestURL = baseUrl + "map_cache/" + this.name + ".json"; //override requestURL for local file 46 | } 47 | const request = { 48 | requestType: BuildingRequestType.LoadTile, 49 | tile: tile, 50 | tileCoords: tile.tileCoords.clone(), 51 | epsgType: this.epsg, 52 | url: requestURL, 53 | inProgress: false, 54 | flipWinding: this.flipWinding 55 | }; 56 | this.buildingRequests.push(request); 57 | } 58 | } 59 | //# sourceMappingURL=BuildingsWFS.js.map -------------------------------------------------------------------------------- /lib/GeoJSON.d.ts: -------------------------------------------------------------------------------- 1 | import { Vector3 } from "@babylonjs/core/Maths/math"; 2 | import { Scene } from "@babylonjs/core"; 3 | import Buildings from "./Buildings"; 4 | import Tile from './Tile'; 5 | import TileSet from "./TileSet"; 6 | import { EPSG_Type } from "./TileMath"; 7 | export interface topLevel { 8 | "type": string; 9 | "features": feature[]; 10 | } 11 | export interface feature { 12 | "id": string; 13 | "type": string; 14 | "properties": any; 15 | "geometry": geometry; 16 | } 17 | export interface propertiesOSM { 18 | "name": string; 19 | "type": string; 20 | "height": number; 21 | "levels": number; 22 | } 23 | export interface geometry { 24 | "type": string; 25 | "coordinates": unknown; 26 | } 27 | export interface multiPolygonSet extends Array { 28 | } 29 | export interface polygonSet extends Array { 30 | } 31 | export interface coordinateSet extends Array { 32 | } 33 | export interface coordinatePair extends Array { 34 | } 35 | export interface coordinateArray extends Array { 36 | } 37 | export interface coordinateArrayOfArrays extends Array { 38 | } 39 | export declare class GeoJSON { 40 | private tileSet; 41 | private scene; 42 | constructor(tileSet: TileSet, scene: Scene); 43 | private convertCoordinatePairToVector2; 44 | private convertVector2ToCoordinatePair; 45 | private computeOffset; 46 | private convertLineToPolygonSet; 47 | generateSingleBuilding(shapeType: string, f: feature, epsg: EPSG_Type, tile: Tile, flipWinding: boolean, buildings: Buildings): void; 48 | private convertLinetoArray; 49 | private processSinglePolygon; 50 | } 51 | -------------------------------------------------------------------------------- /lib/Raster.d.ts: -------------------------------------------------------------------------------- 1 | import { Vector2 } from "@babylonjs/core/Maths/math"; 2 | import TileSet from "./TileSet"; 3 | import { RetrievalLocation } from "./TileSet"; 4 | import { TileRequest } from "./TileSet"; 5 | export default class Raster { 6 | name: string; 7 | tileSet: TileSet; 8 | retrievalLocation: RetrievalLocation; 9 | constructor(name: string, tileSet: TileSet, retrievalLocation?: RetrievalLocation); 10 | getRasterURL(tileCoords: Vector2, zoom: number): string; 11 | doTileSave(request: TileRequest): void; 12 | } 13 | -------------------------------------------------------------------------------- /lib/Raster.js: -------------------------------------------------------------------------------- 1 | import { RetrievalLocation } from "./TileSet"; 2 | export default class Raster { 3 | constructor(name, tileSet, retrievalLocation = RetrievalLocation.Remote) { 4 | this.name = name; 5 | this.tileSet = tileSet; 6 | this.retrievalLocation = retrievalLocation; 7 | } 8 | getRasterURL(tileCoords, zoom) { 9 | return ""; 10 | } 11 | doTileSave(request) { 12 | } 13 | } 14 | //# sourceMappingURL=Raster.js.map -------------------------------------------------------------------------------- /lib/Raster.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Raster.js","sourceRoot":"","sources":["../src/Raster.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAG9C,MAAM,CAAC,OAAO,OAAO,MAAM;IAEvB,YAAmB,IAAW,EAAS,OAAgB,EAAS,oBAAkB,iBAAiB,CAAC,MAAM;QAAvF,SAAI,GAAJ,IAAI,CAAO;QAAS,YAAO,GAAP,OAAO,CAAS;QAAS,sBAAiB,GAAjB,iBAAiB,CAAyB;IAE1G,CAAC;IAEM,YAAY,CAAC,UAAmB,EAAE,IAAY;QAClD,OAAO,EAAE,CAAC;IACb,CAAC;IAEM,UAAU,CAAC,OAAoB;IAEtC,CAAC;CACJ","sourcesContent":["import { Vector2 } from \"@babylonjs/core/Maths/math\";\nimport TileSet from \"./TileSet\";\nimport { RetrievalLocation } from \"./TileSet\";\nimport {TileRequest} from \"./TileSet\";\n\nexport default class Raster {\n \n constructor(public name:string, public tileSet: TileSet, public retrievalLocation=RetrievalLocation.Remote){\n\n }\n\n public getRasterURL(tileCoords: Vector2, zoom: number): string {\n return \"\";\n }\n\n public doTileSave(request: TileRequest){\n\n }\n}"]} -------------------------------------------------------------------------------- /lib/RasterMB.d.ts: -------------------------------------------------------------------------------- 1 | import { Vector2 } from "@babylonjs/core/Maths/math"; 2 | import Raster from "./Raster"; 3 | import TileSet from "./TileSet"; 4 | export default class RasterMB extends Raster { 5 | accessToken: string; 6 | doResBoost: boolean; 7 | mapType: string; 8 | private mbServer; 9 | private skuToken; 10 | constructor(ts: TileSet); 11 | getRasterURL(tileCoords: Vector2, zoom: number): string; 12 | } 13 | -------------------------------------------------------------------------------- /lib/RasterMB.js: -------------------------------------------------------------------------------- 1 | import Raster from "./Raster"; 2 | export default class RasterMB extends Raster { 3 | constructor(ts) { 4 | super("MB", ts); 5 | this.accessToken = ""; 6 | this.doResBoost = false; 7 | this.mapType = "mapbox.satellite"; 8 | this.mbServer = "https://api.mapbox.com/v4/"; 9 | this.skuToken = this.tileSet.ourTileMath.generateSKU(); 10 | } 11 | //https://docs.mapbox.com/api/maps/raster-tiles/ 12 | getRasterURL(tileCoords, zoom) { 13 | const prefix = this.mbServer; 14 | const boostParam = this.doResBoost ? "@2x" : ""; 15 | let extension = ".jpg90"; //can do jpg70 to reduce quality & bandwidth 16 | const accessParam = "?access_token=" + this.accessToken; 17 | const skuParam = "?sku=" + this.skuToken; 18 | let url = prefix + this.mapType + "/" + zoom + "/" + (tileCoords.x) + "/" + (tileCoords.y) + boostParam + extension + accessParam; 19 | return url; 20 | } 21 | } 22 | //# sourceMappingURL=RasterMB.js.map -------------------------------------------------------------------------------- /lib/RasterMB.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"RasterMB.js","sourceRoot":"","sources":["../src/RasterMB.ts"],"names":[],"mappings":"AACA,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,MAAM;IAQxC,YAAY,EAAW;QACnB,KAAK,CAAC,IAAI,EAAC,EAAE,CAAC,CAAC;QARZ,gBAAW,GAAW,EAAE,CAAC;QACzB,eAAU,GAAC,KAAK,CAAC;QACjB,YAAO,GAAC,kBAAkB,CAAC;QAE1B,aAAQ,GAAW,4BAA4B,CAAC;QAMpD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;IAC3D,CAAC;IAED,gDAAgD;IAChC,YAAY,CAAC,UAAmB,EAAE,IAAY;QAC1D,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC7B,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAChD,IAAI,SAAS,GAAG,QAAQ,CAAC,CAAC,4CAA4C;QACtE,MAAM,WAAW,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;QACxD,MAAM,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;QAEzC,IAAI,GAAG,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;QAElI,OAAO,GAAG,CAAC;IACf,CAAC;CACJ","sourcesContent":["import { Vector2 } from \"@babylonjs/core/Maths/math\";\nimport Raster from \"./Raster\";\nimport TileSet from \"./TileSet\";\n\nexport default class RasterMB extends Raster{\n public accessToken: string = \"\";\n public doResBoost=false;\n public mapType=\"mapbox.satellite\";\n\n private mbServer: string = \"https://api.mapbox.com/v4/\";\n private skuToken: string;\n\n constructor(ts: TileSet) {\n super(\"MB\",ts);\n\n this.skuToken = this.tileSet.ourTileMath.generateSKU();\n }\n\n //https://docs.mapbox.com/api/maps/raster-tiles/\n public override getRasterURL(tileCoords: Vector2, zoom: number): string {\n const prefix = this.mbServer;\n const boostParam = this.doResBoost ? \"@2x\" : \"\";\n let extension = \".jpg90\"; //can do jpg70 to reduce quality & bandwidth\n const accessParam = \"?access_token=\" + this.accessToken;\n const skuParam = \"?sku=\" + this.skuToken;\n\n let url = prefix + this.mapType + \"/\" + zoom + \"/\" + (tileCoords.x) + \"/\" + (tileCoords.y) + boostParam + extension + accessParam;\n\n return url;\n }\n}"]} -------------------------------------------------------------------------------- /lib/RasterOSM.d.ts: -------------------------------------------------------------------------------- 1 | import { Vector2 } from "@babylonjs/core/Maths/math"; 2 | import Raster from "./Raster"; 3 | import TileSet from "./TileSet"; 4 | export default class RasterOSM extends Raster { 5 | private osmServers; 6 | private index; 7 | constructor(ts: TileSet); 8 | getRasterURL(tileCoords: Vector2, zoom: number): string; 9 | } 10 | -------------------------------------------------------------------------------- /lib/RasterOSM.js: -------------------------------------------------------------------------------- 1 | import Raster from "./Raster"; 2 | export default class RasterOSM extends Raster { 3 | constructor(ts) { 4 | super("OSM", ts); 5 | this.osmServers = ["https://a.tile.openstreetmap.org/", "https://b.tile.openstreetmap.org/", "https://c.tile.openstreetmap.org/"]; 6 | this.index = 0; 7 | } 8 | getRasterURL(tileCoords, zoom) { 9 | const extension = ".png"; 10 | const prefix = this.osmServers[this.index % 3]; 11 | this.index++; 12 | const url = prefix + zoom + "/" + (tileCoords.x) + "/" + (tileCoords.y) + extension; 13 | return url; 14 | } 15 | } 16 | //# sourceMappingURL=RasterOSM.js.map -------------------------------------------------------------------------------- /lib/RasterOSM.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"RasterOSM.js","sourceRoot":"","sources":["../src/RasterOSM.ts"],"names":[],"mappings":"AACA,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,MAAM;IAKzC,YAAY,EAAU;QAClB,KAAK,CAAC,KAAK,EAAC,EAAE,CAAC,CAAC;QAJZ,eAAU,GAAa,CAAC,mCAAmC,EAAE,mCAAmC,EAAE,mCAAmC,CAAC,CAAC;QACvI,UAAK,GAAC,CAAC,CAAC;IAIhB,CAAC;IAEe,YAAY,CAAC,UAAmB,EAAE,IAAY;QAC1D,MAAM,SAAS,GAAG,MAAM,CAAC;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAC/C,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,MAAM,GAAG,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;QAEpF,OAAO,GAAG,CAAC;IACf,CAAC;CACJ","sourcesContent":["import { Vector2 } from \"@babylonjs/core/Maths/math\";\nimport Raster from \"./Raster\";\nimport TileSet from \"./TileSet\";\n\nexport default class RasterOSM extends Raster {\n\n private osmServers: string[] = [\"https://a.tile.openstreetmap.org/\", \"https://b.tile.openstreetmap.org/\", \"https://c.tile.openstreetmap.org/\"];\n private index=0;\n\n constructor(ts:TileSet) {\n super(\"OSM\",ts);\n }\n\n public override getRasterURL(tileCoords: Vector2, zoom: number): string {\n const extension = \".png\";\n const prefix = this.osmServers[this.index % 3];\n this.index++;\n\n const url = prefix + zoom + \"/\" + (tileCoords.x) + \"/\" + (tileCoords.y) + extension; \n \n return url;\n }\n}"]} -------------------------------------------------------------------------------- /lib/RasterWMTS.d.ts: -------------------------------------------------------------------------------- 1 | import { Vector2 } from "@babylonjs/core/Maths/math"; 2 | import Raster from "./Raster"; 3 | import TileSet from "./TileSet"; 4 | import { RetrievalLocation } from "./TileSet"; 5 | import { TileRequest } from "./TileSet"; 6 | export default class RasterWMTS extends Raster { 7 | tileMatrixSet: string; 8 | style: string; 9 | extension: string; 10 | baseURL: string; 11 | layerName: string; 12 | downloadCount: number; 13 | downloadComplete: boolean; 14 | downloadQueue: TileRequest[]; 15 | constructor(ts: TileSet, retrievalLocation?: RetrievalLocation); 16 | setup(url: string, layer: string): void; 17 | getRasterURL(tileCoords: Vector2, zoom: number): string; 18 | doTileSave(request: TileRequest): void; 19 | processSingleRequest(request: TileRequest): Promise; 20 | } 21 | -------------------------------------------------------------------------------- /lib/TerrainMB.d.ts: -------------------------------------------------------------------------------- 1 | import { Scene } from "@babylonjs/core/scene"; 2 | import Tile from './Tile'; 3 | import TileSet from "./TileSet"; 4 | export default class TerrainMB { 5 | tileSet: TileSet; 6 | private scene; 7 | private mbServer; 8 | globalMinHeight: number; 9 | private index; 10 | accessToken: string; 11 | private heightScaleFixer; 12 | private skuToken; 13 | constructor(tileSet: TileSet, scene: Scene); 14 | setExaggeration(tileScale: number, exaggeration: number): void; 15 | private GetAsyncTexture; 16 | updateAllTerrainTiles(exaggeration: number): void; 17 | updateSingleTerrainTile(tile: Tile): Promise; 18 | private fixTileSeams; 19 | private convertRGBtoDEM; 20 | applyDEMToMesh(tile: Tile, meshPrecision: number): void; 21 | private computeIndexByPercent; 22 | fixNorthSeam(tile: Tile, tileUpper: Tile): void; 23 | fixEastSeam(tile: Tile, tileRight: Tile): void; 24 | fixNorthEastSeam(tile: Tile, tileUpperRight: Tile): void; 25 | } 26 | -------------------------------------------------------------------------------- /lib/Tile.d.ts: -------------------------------------------------------------------------------- 1 | import { Vector2 } from "@babylonjs/core/Maths/math"; 2 | import { Vector3 } from "@babylonjs/core/Maths/math"; 3 | import { Mesh } from "@babylonjs/core/Meshes/mesh"; 4 | import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial'; 5 | import TileBuilding from "./TileBuilding"; 6 | import { BoundingBox } from "@babylonjs/core/Culling/boundingBox"; 7 | import TileSet from "./TileSet"; 8 | export default class Tile { 9 | mesh: Mesh; 10 | tileSet: TileSet; 11 | material: StandardMaterial; 12 | tileCoords: Vector3; 13 | box2D: BoundingBox; 14 | buildings: TileBuilding[]; 15 | mergedBuildingMesh: Mesh | undefined; 16 | dem: number[]; 17 | demDimensions: Vector2; 18 | minHeight: number; 19 | maxHeight: number; 20 | terrainLoaded: boolean; 21 | eastSeamFixed: boolean; 22 | northSeamFixed: boolean; 23 | northEastSeamFixed: boolean; 24 | constructor(mesh: Mesh, tileSet: TileSet); 25 | private makeSphere; 26 | deleteBuildings(): void; 27 | hideIndividualBuildings(): void; 28 | getAllBuildingMeshes(): Mesh[]; 29 | isBuildingInsideTileBoundingBox(m: Mesh): Boolean; 30 | } 31 | -------------------------------------------------------------------------------- /lib/Tile.js: -------------------------------------------------------------------------------- 1 | import { Vector3 } from "@babylonjs/core/Maths/math"; 2 | import { BoundingBox } from "@babylonjs/core/Culling/boundingBox"; 3 | import { MeshBuilder } from "@babylonjs/core"; 4 | //import "@babylonjs/core/Materials/standardMaterial" 5 | //import "@babylonjs/inspector"; 6 | export default class Tile { 7 | constructor(mesh, tileSet) { 8 | this.mesh = mesh; 9 | this.tileSet = tileSet; 10 | ////////////////////////////////// 11 | // BUILDINGS 12 | ////////////////////////////////// 13 | this.buildings = []; 14 | this.mergedBuildingMesh = undefined; 15 | this.terrainLoaded = false; 16 | this.eastSeamFixed = false; 17 | this.northSeamFixed = false; 18 | this.northEastSeamFixed = false; 19 | mesh.computeWorldMatrix(true); //we were previously missing this, which caused a bug in the computation of the tile bounds! 20 | const originalBox = mesh.getBoundingInfo().boundingBox; 21 | const originalMin = originalBox.minimumWorld; 22 | const originalMax = originalBox.maximumWorld; 23 | const newMin = new Vector3(originalMin.x, -1, originalMin.z); 24 | const newMax = new Vector3(originalMax.x, 1, originalMax.z); 25 | this.box2D = new BoundingBox(newMin, newMax); 26 | //code for debugging the tile bounds 27 | /*const p1 = new Vector3(originalMin.x, 0, originalMin.z); 28 | const p2 = new Vector3(originalMax.x, 0, originalMax.z); 29 | const p3 = new Vector3(originalMin.x, 0, originalMax.z); 30 | const p4 = new Vector3(originalMax.x, 0, originalMin.z); 31 | 32 | this.makeSphere(p1, this.mesh.name + " p1"); 33 | this.makeSphere(p2, this.mesh.name + " p2"); 34 | this.makeSphere(p3, this.mesh.name + " p3"); 35 | this.makeSphere(p4, this.mesh.name + " p4"); 36 | */ 37 | } 38 | makeSphere(p, name) { 39 | const sphere = MeshBuilder.CreateSphere("sphere", { diameter: 1.0 }, this.tileSet.scene); 40 | sphere.position = p; 41 | sphere.name = name; 42 | } 43 | deleteBuildings() { 44 | for (let m of this.buildings) { 45 | m.dispose(); 46 | } 47 | this.buildings = []; 48 | if (this.mergedBuildingMesh !== undefined) { 49 | this.mergedBuildingMesh.dispose(); 50 | } 51 | } 52 | hideIndividualBuildings() { 53 | for (let m of this.buildings) { 54 | m.mesh.setEnabled(false); 55 | } 56 | } 57 | getAllBuildingMeshes() { 58 | const ourMeshes = []; 59 | for (let b of this.buildings) { 60 | ourMeshes.push(b.mesh); 61 | } 62 | return ourMeshes; 63 | } 64 | isBuildingInsideTileBoundingBox(m) { 65 | const b = m.getBoundingInfo(); 66 | return true; 67 | } 68 | } 69 | //# sourceMappingURL=Tile.js.map -------------------------------------------------------------------------------- /lib/TileBuilding.d.ts: -------------------------------------------------------------------------------- 1 | import { Vector2, Vector3 } from "@babylonjs/core/Maths/math"; 2 | import { Mesh } from "@babylonjs/core/Meshes/mesh"; 3 | import Tile from "./Tile"; 4 | import { coordinateArrayOfArrays } from "./GeoJSON"; 5 | export interface LineSegment { 6 | p1: Vector2; 7 | p2: Vector2; 8 | } 9 | export interface LineTestReturnPacket { 10 | p: Vector3; 11 | dir1: Vector3; 12 | dir2: Vector3; 13 | } 14 | export interface LineSegmentArray extends Array { 15 | } 16 | export default class TileBuilding { 17 | mesh: Mesh; 18 | tile: Tile; 19 | isBBoxContainedOnTile: boolean; 20 | ShapeType: String; 21 | LineArray: coordinateArrayOfArrays; 22 | LineSegments: LineSegmentArray; 23 | verticies: Vector3[]; 24 | private tm; 25 | constructor(mesh: Mesh, tile: Tile); 26 | computeLineSegments(): void; 27 | private computeDir; 28 | findLineIntersectionPoint(otherStreet: TileBuilding): LineTestReturnPacket | false; 29 | dispose(): void; 30 | getVerticies(): void; 31 | computeBuildingBoxInsideTile(): void; 32 | doVerticesMatch(otherBuilding: TileBuilding): boolean; 33 | } 34 | -------------------------------------------------------------------------------- /lib/TileMath.d.ts: -------------------------------------------------------------------------------- 1 | import { Vector2, Vector4 } from "@babylonjs/core/Maths/math"; 2 | import { Vector3 } from "@babylonjs/core/Maths/math"; 3 | import Tile from './Tile'; 4 | import TileSet from "./TileSet"; 5 | export declare enum EPSG_Type { 6 | EPSG_3857 = 0, 7 | EPSG_4326 = 1 8 | } 9 | export default class TileMath { 10 | private tileSet; 11 | constructor(tileSet: TileSet | undefined); 12 | lon_to_tile(lon: number, zoom: number): number; 13 | lat_to_tile(lat: number, zoom: number): number; 14 | lon_to_tileExact(lon: number, zoom: number): number; 15 | lat_to_tileExact(lat: number, zoom: number): number; 16 | tile_to_lon(x: number, z: number): number; 17 | tile_to_lat(y: number, z: number): number; 18 | tile_to_lonlat(tileCoords: Vector3): Vector2; 19 | epsg3857_to_Epsg4326(coord3857: Vector2): Vector2; 20 | epsg4326_to_Epsg3857(lonLat: Vector2): Vector2; 21 | sign(x: number): number; 22 | EPSG_to_Game(pos: Vector2, epsg: EPSG_Type, zoom?: number): Vector3; 23 | Game_to_LonLat(gamePos: Vector3): Vector2; 24 | EPSG_to_Tile(pos: Vector2, epsg: EPSG_Type, zoom?: number): Vector2; 25 | EPSG_to_TileExact(pos: Vector2, epsg: EPSG_Type, zoom?: number): Vector2; 26 | Tile_to_Game(pos: Vector2): Vector3; 27 | Game_to_Tile(gPos: Vector3): Vector3; 28 | computeBBOX_4326(tileCoords: Vector3): Vector4; 29 | computeBBOX_4326_Tileset(): Vector4; 30 | computeTileRealWidthMeters(lat: number, zoom: number): number; 31 | computeCornerTile(pos: Vector2, epsg: EPSG_Type, zoom?: number): Vector2; 32 | computeTileScale(): number; 33 | findBestTile(position: Vector3): Tile | undefined; 34 | generateSKU(): string; 35 | line_segment_intersect(p1: Vector2, p2: Vector2, p3: Vector2, p4: Vector2): Vector2 | false; 36 | v3_to_v2(v: Vector3): Vector2; 37 | v2_to_v3(v: Vector2): Vector3; 38 | } 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "babylonjs-mapping", 3 | "version": "1.1.42", 4 | "author": "David Zielinski ", 5 | "license": "MIT", 6 | "description": "module to help display map content from OpenStreetMaps, Mapbox, and AGOL natively in Babylon.js", 7 | "main": "lib/TileSet.js", 8 | "type": "module", 9 | "types": "lib/TileSet.d.ts", 10 | "dependencies": { 11 | "@babylonjs/core": "^6.49.0", 12 | "@babylonjs/gui": "^6.49.0", 13 | "@babylonjs/inspector": "^6.49.0", 14 | "@babylonjs/materials": "^6.49.0", 15 | "@turf/projection": "^6.5.0", 16 | "cross-fetch": "^4.0.0", 17 | "earcut": "^2.2.4", 18 | "replace": "^1.2.2", 19 | "rimraf": "^5.0.5", 20 | "ts-node": "^10.9.2" 21 | }, 22 | "devDependencies": { 23 | "@types/earcut": "^2.1.4", 24 | "typescript": "^5.3.3" 25 | }, 26 | "scripts": { 27 | "test": "node --experimental-specifier-resolution=node tests.js", 28 | "build": "tsc --build tsconfig.npm.json", 29 | "clean": "rimraf ./lib", 30 | "rebuild:playground": "npm run clean:playground && npm run build:playground && npm run fix:playground", 31 | "clean:playground": "rimraf ./lib_playground", 32 | "build:playground": "tsc --build tsconfig.playground.json", 33 | "fix:playground": "node fix_lib_playground.js" 34 | }, 35 | "repository": { 36 | "type": "git", 37 | "url": "git+https://github.com/djzielin/babylonjs-mapping.git" 38 | }, 39 | "bugs": { 40 | "url": "https://github.com/djzielin/babylonjs-mapping/issues" 41 | }, 42 | "keywords": [ 43 | "babylonjs", 44 | "mapping", 45 | "openstreetmaps", 46 | "OSM", 47 | "mapbox" 48 | ], 49 | "homepage": "https://github.com/djzielin/babylonjs-mapping#readme", 50 | "files": [ 51 | "lib/**/*", 52 | "src/**/*" 53 | ] 54 | } 55 | -------------------------------------------------------------------------------- /src/BuildingsOSM.ts: -------------------------------------------------------------------------------- 1 | import { EPSG_Type } from "./TileMath"; 2 | import { BuildingRequest } from "./Buildings"; 3 | import { BuildingRequestType } from "./Buildings"; 4 | import { RetrievalLocation, RetrievalType } from "./TileSet"; 5 | 6 | import Tile from "./Tile"; 7 | import TileSet from "./TileSet"; 8 | import Buildings from "./Buildings"; 9 | 10 | export default class BuildingsOSM extends Buildings { 11 | private serverNum = 0; 12 | public accessToken: string = ""; //new for 2024 osmbuildings seem to now be onegeo 13 | 14 | constructor(tileSet: TileSet, retrievalLocation=RetrievalLocation.Remote) { 15 | super("OSM", tileSet,retrievalLocation); 16 | } 17 | 18 | public override generateBuildings() { 19 | super.generateBuildings(); 20 | 21 | this.tileSet.ourAttribution.addAttribution("OSMB"); 22 | } 23 | 24 | private osmBuildingServers: string[] = [ 25 | "https://a-data.onegeo.co/maps/tiles/", //new for 2024 osmbuildings seem to now be onegeo 26 | "https://b-data.onegeo.co/maps/tiles/", 27 | "https://c-data.onegeo.co/maps/tiles/", 28 | "https://d-data.onegeo.co/maps/tiles/" 29 | 30 | //"https://a.data.osmbuildings.org/0.2/anonymous/tile/", 31 | //"https://b.data.osmbuildings.org/0.2/anonymous/tile/", 32 | //"https://c.data.osmbuildings.org/0.2/anonymous/tile/", 33 | //"https://d.data.osmbuildings.org/0.2/anonymous/tile/" 34 | ]; 35 | 36 | protected override stripFilePrefix(original: string): string { 37 | const prefixLength=35; //51 38 | const stripped = original.slice(prefixLength); 39 | //console.log("new file URL is: " + stripped); 40 | return stripped; 41 | } 42 | 43 | public SubmitLoadTileRequest(tile: Tile) { 44 | if (tile.tileCoords.z > 16) { 45 | console.error(this.prettyName() + "Zoom level of: " + tile.tileCoords.z + " is too large! This means that buildings won't work!"); 46 | return; 47 | } 48 | 49 | const storedCoords = tile.tileCoords.clone(); 50 | 51 | const url = this.osmBuildingServers[this.serverNum] + storedCoords.z + "/" + storedCoords.x + "/" + storedCoords.y + ".json"+"?token="+this.accessToken; 52 | this.serverNum = (this.serverNum + 1) % this.osmBuildingServers.length; //increment server to use with wrap around 53 | 54 | const request: BuildingRequest = { 55 | requestType: BuildingRequestType.LoadTile, 56 | tile: tile, 57 | tileCoords: storedCoords, 58 | epsgType: EPSG_Type.EPSG_4326, 59 | url: url, 60 | inProgress: false, 61 | flipWinding: true 62 | } 63 | this.buildingRequests.push(request); 64 | } 65 | 66 | public SubmitLoadAllRequest() { 67 | console.error("asking for all OSM data doesn't make sense, you should use the individual request type!"); 68 | } 69 | } 70 | 71 | -------------------------------------------------------------------------------- /src/BuildingsWFS.ts: -------------------------------------------------------------------------------- 1 | import { EPSG_Type } from "./TileMath"; 2 | import { BuildingRequest} from "./Buildings"; 3 | import { BuildingRequestType } from "./Buildings"; 4 | import { Vector4 } from "@babylonjs/core"; 5 | import { RetrievalLocation, RetrievalType } from "./TileSet"; 6 | 7 | import Tile from "./Tile"; 8 | import TileSet from "./TileSet"; 9 | import Buildings from "./Buildings"; 10 | 11 | export default class BuildingsWFS extends Buildings { 12 | public urlService = "service=WFS"; 13 | public urlOutput = ""; 14 | //public urlVersion = "&version=1.0.0"; 15 | public urlRequest = "&request=GetFeature"; 16 | public flipWinding = false; 17 | 18 | constructor(name: string, public url: string, public layerName: string, public epsg: EPSG_Type, tileSet: TileSet, retrievalLocation=RetrievalLocation.Remote) { 19 | super(name, tileSet, retrievalLocation); 20 | 21 | this.setupGeoServer(); 22 | } 23 | 24 | public setupAGOL() { 25 | this.urlOutput = "&outputFormat=GEOJSON"; 26 | this.flipWinding = true; 27 | } 28 | 29 | public setupGeoServer() { 30 | this.urlOutput = "&outputFormat=application%2Fjson"; 31 | this.flipWinding = false; 32 | } 33 | 34 | public SubmitLoadTileRequest(tile: Tile) { 35 | const bboxValues = this.tileSet.ourTileMath.computeBBOX_4326(tile.tileCoords); 36 | 37 | this.loadHelper(tile,bboxValues); 38 | } 39 | 40 | public SubmitLoadAllRequest() { 41 | const tile=this.tileSet.ourTiles[0]; //lets just choose the first tile so it has something 42 | const bboxValues = this.tileSet.ourTileMath.computeBBOX_4326_Tileset(); 43 | 44 | this.loadHelper(tile,bboxValues); 45 | } 46 | 47 | private loadHelper(tile: Tile, bboxValues: Vector4){ 48 | 49 | const urlFeature = "&typeName=" + this.layerName; 50 | const urlBox = "&bbox=" + 51 | bboxValues.x + "," + 52 | bboxValues.y + "," + 53 | bboxValues.z + "," + 54 | bboxValues.w + "," + 55 | "urn:ogc:def:crs:EPSG:4326"; 56 | 57 | let requestURL = this.url + this.urlService + this.urlRequest + urlFeature + this.urlOutput + urlBox; 58 | 59 | if(this.retrevialLocation==RetrievalLocation.Local && this.retrievalType==RetrievalType.AllData){ 60 | const baseUrl = window.location.href.replace(/\/[^/]*\.[^/]*$/, "").replace(/\/$/, "") + "/"; //TODO make this a util function 61 | requestURL = baseUrl + "map_cache/"+this.name + ".json"; //override requestURL for local file 62 | } 63 | 64 | const request: BuildingRequest = { 65 | requestType: BuildingRequestType.LoadTile, 66 | tile: tile, 67 | tileCoords: tile.tileCoords.clone(), 68 | epsgType: this.epsg, 69 | url: requestURL, 70 | inProgress: false, 71 | flipWinding: this.flipWinding 72 | } 73 | this.buildingRequests.push(request); 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/Raster.ts: -------------------------------------------------------------------------------- 1 | import { Vector2 } from "@babylonjs/core/Maths/math"; 2 | import TileSet from "./TileSet"; 3 | import { RetrievalLocation } from "./TileSet"; 4 | import {TileRequest} from "./TileSet"; 5 | 6 | export default class Raster { 7 | 8 | constructor(public name:string, public tileSet: TileSet, public retrievalLocation=RetrievalLocation.Remote){ 9 | 10 | } 11 | 12 | public getRasterURL(tileCoords: Vector2, zoom: number): string { 13 | return ""; 14 | } 15 | 16 | public doTileSave(request: TileRequest){ 17 | 18 | } 19 | } -------------------------------------------------------------------------------- /src/RasterMB.ts: -------------------------------------------------------------------------------- 1 | import { Vector2 } from "@babylonjs/core/Maths/math"; 2 | import Raster from "./Raster"; 3 | import TileSet from "./TileSet"; 4 | 5 | export default class RasterMB extends Raster{ 6 | public accessToken: string = ""; 7 | public doResBoost=false; 8 | public mapType="mapbox.satellite"; 9 | 10 | private mbServer: string = "https://api.mapbox.com/v4/"; 11 | private skuToken: string; 12 | 13 | constructor(ts: TileSet) { 14 | super("MB",ts); 15 | 16 | this.skuToken = this.tileSet.ourTileMath.generateSKU(); 17 | } 18 | 19 | //https://docs.mapbox.com/api/maps/raster-tiles/ 20 | public override getRasterURL(tileCoords: Vector2, zoom: number): string { 21 | const prefix = this.mbServer; 22 | const boostParam = this.doResBoost ? "@2x" : ""; 23 | let extension = ".jpg90"; //can do jpg70 to reduce quality & bandwidth 24 | const accessParam = "?access_token=" + this.accessToken; 25 | const skuParam = "?sku=" + this.skuToken; 26 | 27 | let url = prefix + this.mapType + "/" + zoom + "/" + (tileCoords.x) + "/" + (tileCoords.y) + boostParam + extension + accessParam; 28 | 29 | return url; 30 | } 31 | } -------------------------------------------------------------------------------- /src/RasterOSM.ts: -------------------------------------------------------------------------------- 1 | import { Vector2 } from "@babylonjs/core/Maths/math"; 2 | import Raster from "./Raster"; 3 | import TileSet from "./TileSet"; 4 | 5 | export default class RasterOSM extends Raster { 6 | 7 | private osmServers: string[] = ["https://a.tile.openstreetmap.org/", "https://b.tile.openstreetmap.org/", "https://c.tile.openstreetmap.org/"]; 8 | private index=0; 9 | 10 | constructor(ts:TileSet) { 11 | super("OSM",ts); 12 | } 13 | 14 | public override getRasterURL(tileCoords: Vector2, zoom: number): string { 15 | const extension = ".png"; 16 | const prefix = this.osmServers[this.index % 3]; 17 | this.index++; 18 | 19 | const url = prefix + zoom + "/" + (tileCoords.x) + "/" + (tileCoords.y) + extension; 20 | 21 | return url; 22 | } 23 | } -------------------------------------------------------------------------------- /tsconfig.npm.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "importHelpers": true, 4 | "moduleResolution": "node", 5 | "module": "ES2020", 6 | "target": "es2021", // esnext has an issue with class generation and our decoders. TODO - avoid using decorators until in standard 7 | "declaration": true, 8 | "sourceMap": true, 9 | "inlineSources": true, 10 | "experimentalDecorators": true, 11 | "noImplicitAny": true, 12 | "noImplicitOverride": true, 13 | "noImplicitReturns": true, 14 | "noImplicitThis": true, 15 | "noUnusedLocals": false, //was true in babylonjs config 16 | "strictNullChecks": true, 17 | "strictFunctionTypes": true, 18 | "skipLibCheck": true, 19 | "removeComments": false, 20 | "preserveConstEnums": true, 21 | "lib": ["es5", "dom", "es2015.promise", "es2015.collection", "es2015.iterable", "es2015.symbol.wellknown", "es2020.bigint", "es2017"], 22 | "outDir": "./lib" 23 | }, 24 | "include": [ 25 | "src"], 26 | "exclude": ["node_modules", "**/__tests__/*"] 27 | } --------------------------------------------------------------------------------