Set pixel ratio to prevent blurring

src/lib/scene-manager.ts

@@ -3,14 +3,15 @@ import * as ThreeUtils from './three-utils';
 import { Synthesizer } from './synthesizer';
 
 export class SceneManager {
-  private readonly renderer: THREE.Renderer;
+  private readonly renderer: THREE.WebGLRenderer;
   private readonly camera: THREE.PerspectiveCamera;
   private readonly scene: THREE.Scene;
   private readonly clock: THREE.Clock;
   private readonly synthesizer: Synthesizer;
 
   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();
@@ -39,14 +40,14 @@ export class SceneManager {
    * Render the current frame.
    */
   private animate(): void {
-    const delta = this.clock.getDelta();
+    requestAnimationFrame(this.animate.bind(this));
 
+    const delta = this.clock.getDelta();
     this.syncRendererSize();
     this.rotateSynthesizerUntilRest(delta);
     this.maintainSafeCameraDistance();
 
     this.renderer.render(this.scene, this.camera);
-    requestAnimationFrame(this.animate.bind(this));
   }
 
   /**