Fixes: "Axes2D flickering #1341" (#1379)

* Fixes: "Axes2D flickering #1341" * Added package-lock.json * In progress * Made font atlas png image inline. * Lint fix. * Code comment fix. Use webpack to load image. * Removed unused package * Fixed ts condition. * Fixed some ts type conditions. Co-authored-by: Havard Bjerke <[email protected]>
equinor · Jan 16, 2023 · e04bfe3 · e04bfe3
1 parent 218ac97
commit e04bfe3
Show file tree

Hide file tree

Showing 12 changed files with 506 additions and 287 deletions.
diff --git a/react/package-lock.json b/react/package-lock.json
diff --git a/react/package.json b/react/package.json
@@ -77,6 +77,7 @@
         "deck.gl": "^8.8.11",
         "deep-equal": "^2.0.5",
         "fast-json-patch": "^3.0.0-1",
+        "gl-matrix": "^3.4.3",
         "jsonschema": "^1.4.0",
         "jsverify": "^0.8.4",
         "leaflet": "^1.6.0",

diff --git a/react/src/custom.d.ts b/react/src/custom.d.ts
@@ -4,6 +4,7 @@ declare module "*.svg" {
     const src: string;
     export default src;
 }
+declare module "*.png";
 declare module "addon-redux/withRedux";
 declare module "addon-redux/enhancer";
 declare module "@emerson-eps/color-tables";
diff --git a/react/src/lib/components/DeckGLMap/layers/axes2d/axes-fragment.glsl.js b/react/src/lib/components/DeckGLMap/layers/axes2d/axes-fragment.glsl.js
@@ -0,0 +1,17 @@
+export default `\
+#version 300 es
+#define SHADER_NAME graph-layer-fragment-shader
+
+precision highp float;
+
+out vec4 fragColor;
+
+uniform sampler2D fontTexture;
+
+in vec2 _vTexCoord;
+
+void main(void) {
+  vec4 color = texture(fontTexture, _vTexCoord);
+  fragColor = color;
+}
+`;
diff --git a/react/src/lib/components/DeckGLMap/layers/axes2d/axes-fragment.glsl.ts b/react/src/lib/components/DeckGLMap/layers/axes2d/axes-fragment.glsl.ts
diff --git a/react/src/lib/components/DeckGLMap/layers/axes2d/axes-vertex.glsl.js b/react/src/lib/components/DeckGLMap/layers/axes2d/axes-vertex.glsl.js
@@ -0,0 +1,20 @@
+export default `\
+#version 300 es
+#define SHADER_NAME graph-layer-axis-vertex-shader
+
+precision highp float;
+
+in  vec3 positions;
+
+in vec2 vTexCoord;
+out vec2 _vTexCoord;
+
+uniform mat4 projectionMatrix;
+
+void main(void) {
+   _vTexCoord = vTexCoord;
+
+   vec3 position_commonspace = positions; // These positions are in view space.
+   gl_Position = projectionMatrix * vec4(position_commonspace, 1.0); // From viewspace to clip
+}
+`;
diff --git a/react/src/lib/components/DeckGLMap/layers/axes2d/axes2DLayer.stories.tsx b/react/src/lib/components/DeckGLMap/layers/axes2d/axes2DLayer.stories.tsx
@@ -8,7 +8,7 @@ export default {
 } as ComponentMeta<typeof DeckGLMap>;
 
 const layerProps = {
-    marginH: 80, // Horizontal margin (in pixels)
+    marginH: 100, // Horizontal margin (in pixels)
     marginV: 40, // Vertical margin (in pixels)
 };
 
@@ -31,6 +31,12 @@ const meshMapLayerPng = {
     colorMapName: "Physics",
 };
 
+const axes_hugin = {
+    "@@type": "AxesLayer",
+    id: "axes-layer2",
+    bounds: [432150, 6475800, -3500, 439400, 6481500, 0],
+};
+
 const axes2D = {
     "@@type": "Axes2DLayer",
     id: "axes-layer2D",
@@ -43,14 +49,15 @@ export const Base: ComponentStory<typeof DeckGLMap> = (args) => {
 
 Base.args = {
     id: "map",
-    layers: [axes2D, meshMapLayerPng],
+    layers: [axes_hugin, meshMapLayerPng, axes2D],
 
     bounds: [432150, 6475800, 439400, 6481500],
     views: {
         layout: [1, 1],
         viewports: [
             {
                 id: "view_1",
+                zoom: -3.5,
                 show3D: false,
             },
         ],