Fix WebGL scaling of antialising by pixel ratio (#13783)

* Fix webgl handling of pixel ratio

* Fix spelling mistake

bokehjs/src/lib/models/glyphs/webgl/base.ts

@@ -39,10 +39,11 @@ export abstract class BaseGLGlyph {
       return
     }
     const {width, height} = this.glyph.renderer.plot_view.canvas_view.webgl!.canvas
+    const {pixel_ratio} = this.glyph.renderer.plot_view.canvas_view
     const trans = {
-      pixel_ratio: this.glyph.renderer.plot_view.canvas_view.pixel_ratio,  // pass pixel_ratio to webgl
-      width,
-      height,
+      pixel_ratio,  // Needed to scale antialiasing
+      width:  width / pixel_ratio,
+      height: height / pixel_ratio,
     }
     this.draw(indices, mainglyph, trans)
   }

bokehjs/src/lib/models/glyphs/webgl/base_line.ts

@@ -46,8 +46,7 @@ export abstract class BaseLineGL extends BaseGLGlyph {
       scissor: this.regl_wrapper.scissor,
       viewport: this.regl_wrapper.viewport,
       canvas_size: [transform.width, transform.height],
-      pixel_ratio: transform.pixel_ratio,
-      antialias: this._antialias,
+      antialias: this._antialias / transform.pixel_ratio,
       miter_limit: this._miter_limit,
       points: main_gl_glyph._points!,
       show: show ?? main_gl_glyph._show!,

bokehjs/src/lib/models/glyphs/webgl/base_marker.ts

@@ -94,10 +94,9 @@ export abstract class BaseMarkerGL extends BaseGLGlyph {
       scissor: this.regl_wrapper.scissor,
       viewport: this.regl_wrapper.viewport,
       canvas_size: [transform.width, transform.height],
-      pixel_ratio: transform.pixel_ratio,
       size_hint: marker_type_to_size_hint(marker_type),
       nmarkers: main_gl_glyph.nvertices,
-      antialias: this._antialias,
+      antialias: this._antialias / transform.pixel_ratio,
       show: this._show,
       center: main_gl_glyph._centers,
       ...this.marker_props(main_gl_glyph),

bokehjs/src/lib/models/glyphs/webgl/image.ts

@@ -54,7 +54,6 @@ export class ImageGL extends BaseGLGlyph {
         scissor: this.regl_wrapper.scissor,
         viewport: this.regl_wrapper.viewport,
         canvas_size: [transform.width, transform.height],
-        pixel_ratio: transform.pixel_ratio,
         bounds: main_gl_glyph._bounds[i]!,
         tex: main_gl_glyph._tex[i]!,
         global_alpha: global_alpha.get(i),

bokehjs/src/lib/models/glyphs/webgl/image.vert

@@ -3,7 +3,6 @@ precision mediump float;
 attribute vec2 a_position;
 attribute vec4 a_bounds;
 
-uniform float u_pixel_ratio;
 uniform vec2 u_canvas_size;
 
 varying vec2 v_tex_coords;
@@ -17,6 +16,6 @@ void main()
   vec2 xy = vec2(x, y);
 
   vec2 pos = xy + 0.5;  // Bokeh's offset.
-  pos /= u_canvas_size / u_pixel_ratio;  // in 0..1
+  pos /= u_canvas_size;  // in 0..1
   gl_Position = vec4(2.0*pos.x - 1.0, 1.0 - 2.0*pos.y, 0.0, 1.0);
 }

bokehjs/src/lib/models/glyphs/webgl/marker.vert

@@ -20,7 +20,6 @@ attribute float a_hatch_weight;
 attribute vec4 a_hatch_color;
 #endif
 
-uniform float u_pixel_ratio;
 uniform vec2 u_canvas_size;
 uniform float u_antialias;
 
@@ -203,6 +202,6 @@ void main()
 #endif
 
   pos += 0.5; // Make up for Bokeh's offset.
-  pos /= u_canvas_size / u_pixel_ratio; // 0 to 1.
+  pos /= u_canvas_size; // 0 to 1.
   gl_Position = vec4(2.0*pos.x - 1.0, 1.0 - 2.0*pos.y, 0.0, 1.0);
 }

bokehjs/src/lib/models/glyphs/webgl/regl_line.vert

@@ -27,7 +27,6 @@ attribute float a_dash_scale;
 attribute float a_dash_offset;
 #endif
 
-uniform float u_pixel_ratio;
 uniform vec2 u_canvas_size;
 uniform float u_antialias;
 uniform float u_miter_limit;
@@ -202,7 +201,7 @@ void main()
     }
 
     vec2 pos = xy + 0.5;  // Bokeh's offset.
-    pos /= u_canvas_size / u_pixel_ratio;  // in 0..1
+    pos /= u_canvas_size;  // in 0..1
     gl_Position = vec4(2.0*pos.x - 1.0, 1.0 - 2.0*pos.y, 0.0, 1.0);
 
     bool turn_right_start = sin_turn_angle_start >= 0.0;

bokehjs/src/lib/models/glyphs/webgl/regl_wrap.ts

@@ -277,7 +277,6 @@ function regl_image(regl: Regl, geometry: Buffer, triangles: Elements): ReglRend
 
     uniforms: {
       u_canvas_size: regl.prop<Props, "canvas_size">("canvas_size"),
-      u_pixel_ratio: regl.prop<Props, "pixel_ratio">("pixel_ratio"),
       u_tex: regl.prop<Props, "tex">("tex"),
       u_global_alpha: regl.prop<Props, "global_alpha">("global_alpha"),
     },
@@ -367,7 +366,6 @@ function regl_solid_line(regl: Regl, line_geometry: Buffer, line_triangles: Elem
 
     uniforms: {
       u_canvas_size: regl.prop<Props, "canvas_size">("canvas_size"),
-      u_pixel_ratio: regl.prop<Props, "pixel_ratio">("pixel_ratio"),
       u_antialias: regl.prop<Props, "antialias">("antialias"),
       u_miter_limit: regl.prop<Props, "miter_limit">("miter_limit"),
     },
@@ -466,7 +464,6 @@ ${line_fragment_shader}
 
     uniforms: {
       u_canvas_size: regl.prop<Props, "canvas_size">("canvas_size"),
-      u_pixel_ratio: regl.prop<Props, "pixel_ratio">("pixel_ratio"),
       u_antialias: regl.prop<Props, "antialias">("antialias"),
       u_miter_limit: regl.prop<Props, "miter_limit">("miter_limit"),
       u_dash_tex: regl.prop<Props, "dash_tex">("dash_tex"),
@@ -568,7 +565,6 @@ ${marker_fragment_shader}
 
     uniforms: {
       u_canvas_size: regl.prop<Props, "canvas_size">("canvas_size"),
-      u_pixel_ratio: regl.prop<Props, "pixel_ratio">("pixel_ratio"),
       u_antialias: regl.prop<Props, "antialias">("antialias"),
       u_size_hint: regl.prop<Props, "size_hint">("size_hint"),
       u_border_radius: regl.prop<Props, "border_radius">("border_radius"),

bokehjs/src/lib/models/glyphs/webgl/types.ts

@@ -15,7 +15,6 @@ type CommonProps = {
   scissor: BoundingBox
   viewport: BoundingBox
   canvas_size: Vec2
-  pixel_ratio: number
 }
 
 type CommonLineProps = CommonProps & {
@@ -87,7 +86,6 @@ export type AccumulateUniforms = {
 
 export type CommonUniforms = {
   u_canvas_size: Vec2
-  u_pixel_ratio: number
 }
 
 export type CommonLineUniforms = CommonUniforms & {

bokehjs/test/baselines/linux/Bug__in_issue_#13692__doesn't_scale_webgl_antialiasing_by_pixel_ratio__with_devicePixelRatio_==_1.blf

@@ -0,0 +1,16 @@
+Row bbox=[0, 0, 450, 150]
+  Plot bbox=[0, 0, 150, 150]
+    CartesianFrame bbox=[29, 27, 116, 101]
+    LinearAxis bbox=[29, 128, 116, 22]
+    LinearAxis bbox=[0, 27, 29, 101]
+    Title bbox=[29, 0, 116, 27]
+  Plot bbox=[150, 0, 150, 150]
+    CartesianFrame bbox=[29, 27, 116, 101]
+    LinearAxis bbox=[29, 128, 116, 22]
+    LinearAxis bbox=[0, 27, 29, 101]
+    Title bbox=[29, 0, 116, 27]
+  Plot bbox=[300, 0, 150, 150]
+    CartesianFrame bbox=[29, 27, 116, 101]
+    LinearAxis bbox=[29, 128, 116, 22]
+    LinearAxis bbox=[0, 27, 29, 101]
+    Title bbox=[29, 0, 116, 27]

bokehjs/test/baselines/linux/Bug__in_issue_#13692__doesn't_scale_webgl_antialiasing_by_pixel_ratio__with_devicePixelRatio_==_2.blf

@@ -0,0 +1,16 @@
+Row bbox=[0, 0, 450, 150]
+  Plot bbox=[0, 0, 150, 150]
+    CartesianFrame bbox=[29, 27, 116, 101]
+    LinearAxis bbox=[29, 128, 116, 22]
+    LinearAxis bbox=[0, 27, 29, 101]
+    Title bbox=[29, 0, 116, 27]
+  Plot bbox=[150, 0, 150, 150]
+    CartesianFrame bbox=[29, 27, 116, 101]
+    LinearAxis bbox=[29, 128, 116, 22]
+    LinearAxis bbox=[0, 27, 29, 101]
+    Title bbox=[29, 0, 116, 27]
+  Plot bbox=[300, 0, 150, 150]
+    CartesianFrame bbox=[29, 27, 116, 101]
+    LinearAxis bbox=[29, 128, 116, 22]
+    LinearAxis bbox=[0, 27, 29, 101]
+    Title bbox=[29, 0, 116, 27]

bokehjs/test/baselines/linux/Bug__in_issue_#13692__doesn't_scale_webgl_antialiasing_by_pixel_ratio__with_devicePixelRatio_==_3.blf

@@ -0,0 +1,16 @@
+Row bbox=[0, 0, 450, 150]
+  Plot bbox=[0, 0, 150, 150]
+    CartesianFrame bbox=[29, 27, 116, 101]
+    LinearAxis bbox=[29, 128, 116, 22]
+    LinearAxis bbox=[0, 27, 29, 101]
+    Title bbox=[29, 0, 116, 27]
+  Plot bbox=[150, 0, 150, 150]
+    CartesianFrame bbox=[29, 27, 116, 101]
+    LinearAxis bbox=[29, 128, 116, 22]
+    LinearAxis bbox=[0, 27, 29, 101]
+    Title bbox=[29, 0, 116, 27]
+  Plot bbox=[300, 0, 150, 150]
+    CartesianFrame bbox=[29, 27, 116, 101]
+    LinearAxis bbox=[29, 128, 116, 22]
+    LinearAxis bbox=[0, 27, 29, 101]
+    Title bbox=[29, 0, 116, 27]

bokehjs/test/integration/regressions.ts

@@ -3744,4 +3744,26 @@ describe("Bug", () => {
       await display(p, [p.width! + left + 50, p.height! + top + 50])
     })
   })
+
+  describe("in issue #13692", () => {
+    describe("doesn't scale webgl antialiasing by pixel ratio", () => {
+      function plot(output_backend: OutputBackend) {
+        const p = fig([150, 150], {output_backend, title: output_backend})
+        p.line({x: [0, 1], y: [0, 1], line_width: 10})
+        return p
+      }
+
+      it.dpr(1)("with devicePixelRatio == 1", async () => {
+        await display(row([plot("canvas"), plot("svg"), plot("webgl")]))
+      })
+
+      it.dpr(2)("with devicePixelRatio == 2", async () => {
+        await display(row([plot("canvas"), plot("svg"), plot("webgl")]))
+      })
+
+      it.dpr(3)("with devicePixelRatio == 3", async () => {
+        await display(row([plot("canvas"), plot("svg"), plot("webgl")]))
+      })
+    })
+  })
 })