Factor pixel ratio into resize check

src/lib/scene-manager.ts

@@ -11,7 +11,6 @@ export class SceneManager {
 
   constructor() {
     this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
-    this.renderer.setPixelRatio(window.devicePixelRatio);
     this.camera = new THREE.PerspectiveCamera();
     this.camera.fov = 20;
     this.scene = new THREE.Scene();
@@ -43,7 +42,7 @@ export class SceneManager {
     requestAnimationFrame(this.animate.bind(this));
 
     const delta = this.clock.getDelta();
-    this.syncRendererSize();
+    this.resizeRendererToDisplaySize();
     this.rotateSynthesizerUntilRest(delta);
     this.maintainSafeCameraDistance();
 
@@ -87,15 +86,19 @@ export class SceneManager {
 
   /**
    * Sync the renderer size with the current canvas size.
+   *
+   * @see https://threejs.org/manual/en/responsive.html
    */
-  private syncRendererSize(): void {
+  private resizeRendererToDisplaySize(): void {
     const canvas = this.renderer.domElement;
-    const width = canvas.clientWidth;
-    const height = canvas.clientHeight;
+    const pixelRatio = window.devicePixelRatio;
+    const width = Math.floor(canvas.clientWidth * pixelRatio);
+    const height = Math.floor(canvas.clientHeight * pixelRatio);
+    const needResize = canvas.width !== width || canvas.height !== height;
 
-    if (canvas.width !== width || canvas.height !== height) {
+    if (needResize) {
       this.renderer.setSize(width, height, false);
-      this.camera.aspect = width / height;
+      this.camera.aspect = canvas.clientWidth / canvas.clientHeight;
       this.camera.updateProjectionMatrix();
     }
   }