update camera/handle helper on pixelRatio changes

CHANGELOG.md

@@ -6,7 +6,8 @@ Note that since we don't clearly distinguish between a public and private interf
 
 ## [Unreleased]
 
-Fix wrong offset when rendering text with orthographic projection
+- Fix wrong offset when rendering text with orthographic projection
+- Update camera/handle helper when `devicePixelRatio` changes
 
 ## [v3.30.0] - 2023-01-29
 

src/mol-canvas3d/helper/camera-helper.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -57,6 +57,7 @@ export class CameraHelper {
     };
 
     private renderObject: GraphicsRenderObject | undefined;
+    private pixelRatio = 1;
 
     constructor(private webgl: WebGLContext, props: Partial<CameraHelperProps> = {}) {
         this.scene = Scene.create(webgl, GraphicsRenderVariantsBlended);
@@ -74,7 +75,11 @@ export class CameraHelper {
                 p.axes.name = props.axes.name;
                 if (props.axes.name === 'on') {
                     this.scene.clear();
-                    const params = { ...props.axes.params, scale: props.axes.params.scale * this.webgl.pixelRatio };
+                    this.pixelRatio = this.webgl.pixelRatio;
+                    const params = {
+                        ...props.axes.params,
+                        scale: props.axes.params.scale * this.webgl.pixelRatio
+                    };
                     this.renderObject = createAxesRenderObject(params);
                     this.scene.add(this.renderObject);
                     this.scene.commit();
@@ -123,6 +128,10 @@ export class CameraHelper {
     update(camera: ICamera) {
         if (!this.renderObject) return;
 
+        if (this.pixelRatio !== this.webgl.pixelRatio) {
+            this.setProps(this.props);
+        }
+
         updateCamera(this.camera, camera.viewport, camera.viewOffset);
         Mat4.extractRotation(this.scene.view, camera.view);
 

src/mol-canvas3d/helper/handle-helper.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -54,6 +54,7 @@ export class HandleHelper {
     };
 
     private renderObject: GraphicsRenderObject | undefined;
+    private pixelRatio = 1;
 
     private _transform = Mat4();
     getBoundingSphere(out: Sphere3D, instanceId: number) {
@@ -71,7 +72,11 @@ export class HandleHelper {
                 p.handle.name = props.handle.name;
                 if (props.handle.name === 'on') {
                     this.scene.clear();
-                    const params = { ...props.handle.params, scale: props.handle.params.scale * this.webgl.pixelRatio };
+                    this.pixelRatio = this.webgl.pixelRatio;
+                    const params = {
+                        ...props.handle.params,
+                        scale: props.handle.params.scale * this.webgl.pixelRatio
+                    };
                     this.renderObject = createHandleRenderObject(params);
                     this.scene.add(this.renderObject);
                     this.scene.commit();
@@ -91,6 +96,10 @@ export class HandleHelper {
     update(camera: Camera, position: Vec3, rotation: Mat3) {
         if (!this.renderObject) return;
 
+        if (this.pixelRatio !== this.webgl.pixelRatio) {
+            this.setProps(this.props);
+        }
+
         Mat4.setTranslation(this.renderObject.values.aTransform.ref.value as unknown as Mat4, position);
         Mat4.fromMat3(this.renderObject.values.aTransform.ref.value as unknown as Mat4, rotation);