first working version of webgl map

Author: jacobsjo

package.json

@@ -19,18 +19,20 @@
     "@types/lodash": "^4.14.172",
     "@types/uniqid": "^5.3.1",
     "copy-webpack-plugin": "^9.0.1",
-    "license-webpack-plugin": "4.0.0",
     "gh-pages": "^3.2.3",
+    "license-webpack-plugin": "4.0.0",
     "ts-loader": "^9.2.5",
     "typescript": "^4.4.3",
     "webpack": "^5.52.1",
     "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.2.1"
+    "webpack-dev-server": "^4.2.1",
+    "webpack-glsl-loader": "^1.0.1"
   },
   "dependencies": {
     "d3": "^7.1.1",
     "deepslate": "0.9.0-beta.5",
     "leaflet": "^1.7.1",
+    "leaflet.tilelayer.gl": "2.4.1",
     "lodash": "^4.17.21",
     "marchingsquares": "^1.3.3",
     "tilelayer-canvas": "^1.1.3",

src/main/BuilderData/BiomeBuilder.ts

@@ -18,6 +18,7 @@ export type MultiNoiseIndexes = { d: number, w: number, c: number, e: number, h:
 export type PartialMultiNoiseIndexes = { d?: number, w?: number, c?: number, e?: number, h?: number, t?: number }
 
 export type NoiseSetting = { firstOctave: number, amplitudes: number[] }
+export type NoiseType = "continentalness" | "weirdness" | "erosion" | "temperature" | "humidity" | "shift"
 
 export class BiomeBuilder {
     hasChanges: boolean

src/main/UI/VisualizationManager.ts

@@ -4,6 +4,7 @@ import { last } from "lodash";
 import { BiomeBuilder } from "../BuilderData/BiomeBuilder";
 import { GridElementUnassigned } from "../BuilderData/GridElementUnassigned";
 import { BiomeLayer } from "../Visualization/BiomeLayer";
+import { BiomeLayerGL } from "../Visualization/BiomeLayerGL";
 import { ContourLayer } from "../Visualization/ContourLayer";
 import { GridMultiNoise } from "../Visualization/GridMultiNoise";
 import { GridMultiNoiseIndicesManager } from "../Visualization/GridMultiNoiseIndicesManager";
@@ -24,6 +25,7 @@ export class VisualizationManger{
     constructor(builder: BiomeBuilder){
         this.builder = builder
 
+
         const panel = document.getElementById('visualization')
 
         this.closeContainer = panel.parentElement.parentElement;
@@ -37,14 +39,20 @@ export class VisualizationManger{
         this.map = L.map('visualization_map')
         this.map.setView([0,0], 15)
         this.map.setMaxZoom(18)
-        this.map.setMinZoom(13)
+        this.map.setMinZoom(11)
 
         this.indicesManger = new GridMultiNoiseIndicesManager(this.builder, this.biomeSource)
 
         this.updateNoises()
 
+        //const glLayerManager = new GLLayerManager()
+        //glLayerManager.addLayerTo(this.map)
+
+        const biomeLayerGL = new BiomeLayerGL();
+        biomeLayerGL.addTo(this.map);
+
         this.biomeLayer = new BiomeLayer(this.builder, this.indicesManger);
-        this.biomeLayer.addTo(this.map)
+        //this.biomeLayer.addTo(this.map)
 
         this.contourLayer = new ContourLayer(this.builder, this.indicesManger);
         //this.contourLayer.addTo(this.map)
@@ -133,6 +141,9 @@ export class VisualizationManger{
 
         this.map.addEventListener("mousemove", (evt: L.LeafletMouseEvent) => {
           const idxs = this.getIdxs(evt.latlng);
+          if (idxs === undefined){
+            return
+          }
           const lookup = idxs ? this.builder.lookupRecursiveWithTracking(idxs.idx) : undefined
 
           tooltip.style.left = (Math.min(evt.originalEvent.pageX + 20, document.body.clientWidth - tooltip.clientWidth)) + "px"