diff --git a/CHANGELOG.md b/CHANGELOG.md index aa6f60b0a7eb784023e66113dd17e57096464f9b..a18b2cf4fc7b76a809f28936971231908bd3d26b 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/mol-canvas3d/helper/camera-helper.ts b/src/mol-canvas3d/helper/camera-helper.ts index facc81a7af2a0d03988e773f3fed58c417cc40cf..0215ac444ab4d7523279127884be439488bb061d 100644 --- a/src/mol-canvas3d/helper/camera-helper.ts +++ b/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); diff --git a/src/mol-canvas3d/helper/handle-helper.ts b/src/mol-canvas3d/helper/handle-helper.ts index 367663273ec8f3e72e020e6fec2e0ccc9176858e..904d52c5444d2d11a6b61927ba8a18cc878c95ab 100644 --- a/src/mol-canvas3d/helper/handle-helper.ts +++ b/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);