fix: "Incorrect 2D axes rendering with vertical scaling #1957"

typescript/packages/subsurface-viewer/src/layers/axes2d/label-fragment.glsl.js

@@ -1,6 +1,6 @@
 export default `\
 #version 300 es
-#define SHADER_NAME graph-layer-fragment-shader
+#define SHADER_NAME axes2d-layer-fragment-shader
 
 precision highp float;
 
@@ -32,6 +32,5 @@ void main(void) {
   float b = x * text_b + (1.0 - x) * bg_b;
 
   fragColor = vec4(r, g, b, 1.0);
-  return;
 }
 `;

typescript/packages/subsurface-viewer/src/layers/axes2d/label-vertex.glsl.js

@@ -1,20 +1,18 @@
 export default `\
 #version 300 es
-#define SHADER_NAME graph-layer-axis-vertex-shader
+#define SHADER_NAME axes2d-layer-vertex-shader
 
 precision highp float;
 
-in  vec3 positions;
+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
+   vec3 position_commonspace = project_position(positions);
+   gl_Position = project_common_position_to_clipspace(vec4(position_commonspace, 1.0));
 }
 `;

typescript/packages/subsurface-viewer/src/layers/axes2d/line-fragment.glsl.js

@@ -1,6 +1,6 @@
 export default `\
 #version 300 es
-#define SHADER_NAME axes2d-layer-fragment-shader
+#define SHADER_NAME axes2dlayer-line-fragment-shader
 
 precision highp float;
 

typescript/packages/subsurface-viewer/src/layers/axes2d/line-vertex.glsl.js

@@ -1,6 +1,6 @@
 export default `\
 #version 300 es
-#define SHADER_NAME axes2d-layer-vertex-shader
+#define SHADER_NAME axes2dlayer-line-vertex-shader
 
 precision highp float;
 

typescript/packages/subsurface-viewer/src/storybook/examples/CameraControlExamples.stories.tsx

@@ -63,11 +63,11 @@ const SQUARE = {
         type: "Polygon",
         coordinates: [
             [
+                [-5, -5],
+                [-5, 5],
                 [5, 5],
-                [5, 1500],
-                [1500, 1500],
-                [1500, 5],
-                [5, 5],
+                [5, -5],
+                [-5, -5],
             ],
         ],
     },
@@ -528,10 +528,11 @@ export const AddLayer: StoryObj<typeof SubsurfaceViewer> = {
 const ScaleYComponent = ({ verticalScale }: { verticalScale: number }) => {
     const viewerProps: SubsurfaceViewerProps = {
         id: "ScaleY",
-        bounds: [-1000, -1000, 3000, 3000],
+        bounds: [-10, -10, 10, 10],
         layers: [
             new Axes2DLayer({
                 id: "axes",
+                backgroundColor: [0, 155, 155],
             }),
             new GeoJsonLayer({
                 ...customLayerWithPolygonDataProps,

typescript/packages/subsurface-viewer/src/storybook/sharedSettings.tsx

@@ -235,11 +235,12 @@ export const customLayerWithPolygonDataProps: GeoJsonLayerProps = {
             ],
         },
     },
-    getLineWidth: 20,
-    lineWidthMinPixels: 2,
-    getLineColor: [0, 255, 255],
-    getFillColor: [0, 255, 0],
-    opacity: 0.3,
+    getLineWidth: 1,
+    lineWidthMinPixels: 1,
+    lineWidthMaxPixels: 1,
+    getLineColor: [0, 0, 0],
+    getFillColor: [255, 255, 0],
+    opacity: 1.0,
 };
 
 export const customLayerWithPolygonData = {