Merge pull request #6999 from hborchardt/hborchardt/3dsurface_offset_…

…precision Improve precision of surface3d worldPosition calculation
plotly · May 17, 2024 · 380fa8c · 380fa8c
2 parents c7b1003 + 8cb8caa
commit 380fa8c
Show file tree

Hide file tree

Showing 27 changed files with 63 additions and 18 deletions.
diff --git a/draftlogs/6999_fix.md b/draftlogs/6999_fix.md
@@ -0,0 +1,2 @@
+ - Fix numerical precision of drawing surface trace [[6999](https://github.com/plotly/plotly.js/pull/6999)],
+   with thanks to @hborchardt for the contribution!
diff --git a/stackgl_modules/index.js b/stackgl_modules/index.js
@@ -24945,9 +24945,9 @@ module.exports.createTubeMesh = function(gl, params) {
 var createShader = __webpack_require__(9405)
 var glslify = __webpack_require__(3236)
 
-var vertSrc = glslify(["precision highp float;\n#define GLSLIFY 1\n\nattribute vec4 uv;\nattribute vec3 f;\nattribute vec3 normal;\n\nuniform vec3 objectOffset;\nuniform mat4 model, view, projection, inverseModel;\nuniform vec3 lightPosition, eyePosition;\nuniform sampler2D colormap;\n\nvarying float value, kill;\nvarying vec3 worldCoordinate;\nvarying vec2 planeCoordinate;\nvarying vec3 lightDirection, eyeDirection, surfaceNormal;\nvarying vec4 vColor;\n\nvoid main() {\n  vec3 localCoordinate = vec3(uv.zw, f.x);\n  worldCoordinate = objectOffset + localCoordinate;\n  vec4 worldPosition = model * vec4(worldCoordinate, 1.0);\n  vec4 clipPosition = projection * (view * worldPosition);\n  gl_Position = clipPosition;\n  kill = f.y;\n  value = f.z;\n  planeCoordinate = uv.xy;\n\n  vColor = texture2D(colormap, vec2(value, value));\n\n  //Lighting geometry parameters\n  vec4 cameraCoordinate = view * worldPosition;\n  cameraCoordinate.xyz /= cameraCoordinate.w;\n  lightDirection = lightPosition - cameraCoordinate.xyz;\n  eyeDirection   = eyePosition - cameraCoordinate.xyz;\n  surfaceNormal  = normalize((vec4(normal,0) * inverseModel).xyz);\n}\n"])
+var vertSrc = glslify(["precision highp float;\n#define GLSLIFY 1\n\nattribute vec4 uv;\nattribute vec3 f;\nattribute vec3 normal;\n\nuniform vec3 objectOffset;\nuniform mat4 model, view, projection, inverseModel;\nuniform vec3 lightPosition, eyePosition;\nuniform sampler2D colormap;\n\nvarying float value, kill;\nvarying vec3 worldCoordinate;\nvarying vec2 planeCoordinate;\nvarying vec3 lightDirection, eyeDirection, surfaceNormal;\nvarying vec4 vColor;\n\nvoid main() {\n  vec3 localCoordinate = vec3(uv.zw, f.x);\n  worldCoordinate = objectOffset + localCoordinate;\n  mat4 objectOffsetTranslation = mat4(1.0) + mat4(vec4(0), vec4(0), vec4(0), vec4(objectOffset, 0));\n  vec4 worldPosition = (model * objectOffsetTranslation) * vec4(localCoordinate, 1.0);\n  vec4 clipPosition = projection * (view * worldPosition);\n  gl_Position = clipPosition;\n  kill = f.y;\n  value = f.z;\n  planeCoordinate = uv.xy;\n\n  vColor = texture2D(colormap, vec2(value, value));\n\n  //Lighting geometry parameters\n  vec4 cameraCoordinate = view * worldPosition;\n  cameraCoordinate.xyz /= cameraCoordinate.w;\n  lightDirection = lightPosition - cameraCoordinate.xyz;\n  eyeDirection   = eyePosition - cameraCoordinate.xyz;\n  surfaceNormal  = normalize((vec4(normal,0) * inverseModel).xyz);\n}\n"])
 var fragSrc = glslify(["precision highp float;\n#define GLSLIFY 1\n\nfloat beckmannDistribution(float x, float roughness) {\n  float NdotH = max(x, 0.0001);\n  float cos2Alpha = NdotH * NdotH;\n  float tan2Alpha = (cos2Alpha - 1.0) / cos2Alpha;\n  float roughness2 = roughness * roughness;\n  float denom = 3.141592653589793 * roughness2 * cos2Alpha * cos2Alpha;\n  return exp(tan2Alpha / roughness2) / denom;\n}\n\nfloat beckmannSpecular(\n  vec3 lightDirection,\n  vec3 viewDirection,\n  vec3 surfaceNormal,\n  float roughness) {\n  return beckmannDistribution(dot(surfaceNormal, normalize(lightDirection + viewDirection)), roughness);\n}\n\nbool outOfRange(float a, float b, float p) {\n  return ((p > max(a, b)) || \n          (p < min(a, b)));\n}\n\nbool outOfRange(vec2 a, vec2 b, vec2 p) {\n  return (outOfRange(a.x, b.x, p.x) ||\n          outOfRange(a.y, b.y, p.y));\n}\n\nbool outOfRange(vec3 a, vec3 b, vec3 p) {\n  return (outOfRange(a.x, b.x, p.x) ||\n          outOfRange(a.y, b.y, p.y) ||\n          outOfRange(a.z, b.z, p.z));\n}\n\nbool outOfRange(vec4 a, vec4 b, vec4 p) {\n  return outOfRange(a.xyz, b.xyz, p.xyz);\n}\n\nuniform vec3 lowerBound, upperBound;\nuniform float contourTint;\nuniform vec4 contourColor;\nuniform sampler2D colormap;\nuniform vec3 clipBounds[2];\nuniform float roughness, fresnel, kambient, kdiffuse, kspecular, opacity;\nuniform float vertexColor;\n\nvarying float value, kill;\nvarying vec3 worldCoordinate;\nvarying vec3 lightDirection, eyeDirection, surfaceNormal;\nvarying vec4 vColor;\n\nvoid main() {\n  if (\n    kill > 0.0 ||\n    vColor.a == 0.0 ||\n    outOfRange(clipBounds[0], clipBounds[1], worldCoordinate)\n  ) discard;\n\n  vec3 N = normalize(surfaceNormal);\n  vec3 V = normalize(eyeDirection);\n  vec3 L = normalize(lightDirection);\n\n  if(gl_FrontFacing) {\n    N = -N;\n  }\n\n  float specular = max(beckmannSpecular(L, V, N, roughness), 0.);\n  float diffuse  = min(kambient + kdiffuse * max(dot(N, L), 0.0), 1.0);\n\n  //decide how to interpolate color — in vertex or in fragment\n  vec4 surfaceColor =\n    step(vertexColor, .5) * texture2D(colormap, vec2(value, value)) +\n    step(.5, vertexColor) * vColor;\n\n  vec4 litColor = surfaceColor.a * vec4(diffuse * surfaceColor.rgb + kspecular * vec3(1,1,1) * specular,  1.0);\n\n  gl_FragColor = mix(litColor, contourColor, contourTint) * opacity;\n}\n"])
-var contourVertSrc = glslify(["precision highp float;\n#define GLSLIFY 1\n\nattribute vec4 uv;\nattribute float f;\n\nuniform vec3 objectOffset;\nuniform mat3 permutation;\nuniform mat4 model, view, projection;\nuniform float height, zOffset;\nuniform sampler2D colormap;\n\nvarying float value, kill;\nvarying vec3 worldCoordinate;\nvarying vec2 planeCoordinate;\nvarying vec3 lightDirection, eyeDirection, surfaceNormal;\nvarying vec4 vColor;\n\nvoid main() {\n  vec3 dataCoordinate = permutation * vec3(uv.xy, height);\n  worldCoordinate = objectOffset + dataCoordinate;\n  vec4 worldPosition = model * vec4(worldCoordinate, 1.0);\n\n  vec4 clipPosition = projection * (view * worldPosition);\n  clipPosition.z += zOffset;\n\n  gl_Position = clipPosition;\n  value = f + objectOffset.z;\n  kill = -1.0;\n  planeCoordinate = uv.zw;\n\n  vColor = texture2D(colormap, vec2(value, value));\n\n  //Don't do lighting for contours\n  surfaceNormal   = vec3(1,0,0);\n  eyeDirection    = vec3(0,1,0);\n  lightDirection  = vec3(0,0,1);\n}\n"])
+var contourVertSrc = glslify(["precision highp float;\n#define GLSLIFY 1\n\nattribute vec4 uv;\nattribute float f;\n\nuniform vec3 objectOffset;\nuniform mat3 permutation;\nuniform mat4 model, view, projection;\nuniform float height, zOffset;\nuniform sampler2D colormap;\n\nvarying float value, kill;\nvarying vec3 worldCoordinate;\nvarying vec2 planeCoordinate;\nvarying vec3 lightDirection, eyeDirection, surfaceNormal;\nvarying vec4 vColor;\n\nvoid main() {\n  vec3 dataCoordinate = permutation * vec3(uv.xy, height);\n  worldCoordinate = objectOffset + dataCoordinate;\n  mat4 objectOffsetTranslation = mat4(1.0) + mat4(vec4(0), vec4(0), vec4(0), vec4(objectOffset, 0));\n  vec4 worldPosition = (model * objectOffsetTranslation) * vec4(dataCoordinate, 1.0);\n\n  vec4 clipPosition = projection * (view * worldPosition);\n  clipPosition.z += zOffset;\n\n  gl_Position = clipPosition;\n  value = f + objectOffset.z;\n  kill = -1.0;\n  planeCoordinate = uv.zw;\n\n  vColor = texture2D(colormap, vec2(value, value));\n\n  //Don't do lighting for contours\n  surfaceNormal   = vec3(1,0,0);\n  eyeDirection    = vec3(0,1,0);\n  lightDirection  = vec3(0,0,1);\n}\n"])
 var pickSrc = glslify(["precision highp float;\n#define GLSLIFY 1\n\nbool outOfRange(float a, float b, float p) {\n  return ((p > max(a, b)) || \n          (p < min(a, b)));\n}\n\nbool outOfRange(vec2 a, vec2 b, vec2 p) {\n  return (outOfRange(a.x, b.x, p.x) ||\n          outOfRange(a.y, b.y, p.y));\n}\n\nbool outOfRange(vec3 a, vec3 b, vec3 p) {\n  return (outOfRange(a.x, b.x, p.x) ||\n          outOfRange(a.y, b.y, p.y) ||\n          outOfRange(a.z, b.z, p.z));\n}\n\nbool outOfRange(vec4 a, vec4 b, vec4 p) {\n  return outOfRange(a.xyz, b.xyz, p.xyz);\n}\n\nuniform vec2 shape;\nuniform vec3 clipBounds[2];\nuniform float pickId;\n\nvarying float value, kill;\nvarying vec3 worldCoordinate;\nvarying vec2 planeCoordinate;\nvarying vec3 surfaceNormal;\n\nvec2 splitFloat(float v) {\n  float vh = 255.0 * v;\n  float upper = floor(vh);\n  float lower = fract(vh);\n  return vec2(upper / 255.0, floor(lower * 16.0) / 16.0);\n}\n\nvoid main() {\n  if ((kill > 0.0) ||\n      (outOfRange(clipBounds[0], clipBounds[1], worldCoordinate))) discard;\n\n  vec2 ux = splitFloat(planeCoordinate.x / shape.x);\n  vec2 uy = splitFloat(planeCoordinate.y / shape.y);\n  gl_FragColor = vec4(pickId, ux.x, uy.x, ux.y + (uy.y/16.0));\n}\n"])
 
 exports.createShader = function (gl) {

diff --git a/stackgl_modules/package-lock.json b/stackgl_modules/package-lock.json
diff --git a/stackgl_modules/package.json b/stackgl_modules/package.json
@@ -28,7 +28,7 @@
     "gl-spikes2d": "^1.0.2",
     "gl-spikes3d": "^1.0.11",
     "gl-streamtube3d": "^1.4.2",
-    "gl-surface3d": "^1.6.1",
+    "gl-surface3d": "^1.6.2",
     "glslify": "^7.1.1",
     "incremental-convex-hull": "plotly/incremental-convex-hull#v1.1.0",
     "is-mobile": "^4.0.0",

diff --git a/test/image/baselines/gl3d_autocolorscale.png b/test/image/baselines/gl3d_autocolorscale.png
diff --git a/test/image/baselines/gl3d_autorange-zero.png b/test/image/baselines/gl3d_autorange-zero.png
diff --git a/test/image/baselines/gl3d_chrisp-nan-1.png b/test/image/baselines/gl3d_chrisp-nan-1.png
diff --git a/test/image/baselines/gl3d_contour-lines.png b/test/image/baselines/gl3d_contour-lines.png
diff --git a/test/image/baselines/gl3d_contour-lines2.png b/test/image/baselines/gl3d_contour-lines2.png
diff --git a/test/image/baselines/gl3d_cufflinks.png b/test/image/baselines/gl3d_cufflinks.png
diff --git a/test/image/baselines/gl3d_ibm-plot.png b/test/image/baselines/gl3d_ibm-plot.png
diff --git a/test/image/baselines/gl3d_parametric_surface_data_precision.png b/test/image/baselines/gl3d_parametric_surface_data_precision.png
diff --git a/test/image/baselines/gl3d_perspective_tick_distances.png b/test/image/baselines/gl3d_perspective_tick_distances.png
diff --git a/test/image/baselines/gl3d_ribbons.png b/test/image/baselines/gl3d_ribbons.png
diff --git a/test/image/baselines/gl3d_surface-circular-colorscale.png b/test/image/baselines/gl3d_surface-circular-colorscale.png
diff --git a/test/image/baselines/gl3d_surface-circular-opacityscale.png b/test/image/baselines/gl3d_surface-circular-opacityscale.png
diff --git a/test/image/baselines/gl3d_surface-lighting.png b/test/image/baselines/gl3d_surface-lighting.png
diff --git a/test/image/baselines/gl3d_surface_connectgaps.png b/test/image/baselines/gl3d_surface_connectgaps.png
diff --git a/test/image/baselines/gl3d_surface_contour_precision.png b/test/image/baselines/gl3d_surface_contour_precision.png
diff --git a/test/image/baselines/gl3d_surface_contour_start-end-size.png b/test/image/baselines/gl3d_surface_contour_start-end-size.png
diff --git a/test/image/baselines/gl3d_surface_opacityscale_contour.png b/test/image/baselines/gl3d_surface_opacityscale_contour.png
diff --git a/test/image/baselines/gl3d_surface_transparent-with-contours.png b/test/image/baselines/gl3d_surface_transparent-with-contours.png
diff --git a/test/image/baselines/gl3d_world-cals.png b/test/image/baselines/gl3d_world-cals.png
diff --git a/test/image/baselines/gl3d_xy-defined-ticks.png b/test/image/baselines/gl3d_xy-defined-ticks.png
diff --git a/test/image/baselines/trace_metatext.png b/test/image/baselines/trace_metatext.png
diff --git a/test/image/baselines/zz-gl3d_surface_small_timerange.png b/test/image/baselines/zz-gl3d_surface_small_timerange.png
diff --git a/test/image/mocks/zz-gl3d_surface_small_timerange.json b/test/image/mocks/zz-gl3d_surface_small_timerange.json
@@ -0,0 +1,43 @@
+{
+    "data": [
+      {
+        "type": "surface",
+        "x": [0.1, 0.2],
+        "y": [
+          "2024-02-03T10:00:00",
+          "2024-02-03T11:00:00"
+        ],
+        "z": [
+          [1001, 1002],
+          [1002, 1001]
+        ]
+      }
+    ],
+    "layout": {
+        "title": {"text": "Surface plot with time axis with small timerange"},
+        "width": 600,
+        "height": 400,
+        "scene": {
+            "yaxis": {
+                "type": "date"
+            },
+            "aspectratio": {
+                "x": 1,
+                "y": 2,
+                "z": 0.5
+            },
+            "camera": {
+                "center": {
+                    "x": 0.11,
+                    "y": 0.19,
+                    "z": -0.3
+                },
+                "eye": {
+                    "x": 1.44,
+                    "y": 1.53,
+                    "z": 1.02
+                }
+            }
+        }
+    }
+}