Dynamic preview resolution (#73)

* scale preview res dynamically

* don't render preview on first frame

* add missing code

* comments

* rename class

* actually average benchmark

* improve benchmarking; get time from requestAnimationFrame

* use renderer.time(), improvements

* rename renderer.time to renderer.sync; tweak scaling values; update examples

Author: Lucas Crane

scenes/renderer-test/main.js

@@ -38,10 +38,11 @@ function resize() {
 window.addEventListener('resize', resize);
 resize();
 
-const tick = () => {
+const tick = (time) => {
   controls.update();
   camera.focus = controls.target.distanceTo(camera.position);
   stats.begin();
+  renderer.sync(time);
   renderer.render(scene, camera);
   stats.end();
   requestAnimationFrame(tick);

scenes/sample-models/main.js

@@ -85,10 +85,11 @@ function resize() {
 
 let animationFrameId;
 
-const tick = () => {
+const tick = (time) => {
   controls.update();
   camera.focus = controls.target.distanceTo(camera.position);
   stats.begin();
+  renderer.sync(time);
   renderer.render(scene, camera);
   stats.end();
   animationFrameId = requestAnimationFrame(tick);

scenes/webgl-comparison/main.js

@@ -72,12 +72,18 @@ function resize() {
   }
 }
 
-function tick() {
+function tick(time) {
   controls.update();
   camera.focus = controls.target.distanceTo(camera.position);
   stats.begin();
+
+  if (renderer.sync) {
+    renderer.sync(time);
+  }
+
   renderer.render(scene, camera);
   stats.end();
+
   requestAnimationFrame(tick);
 }
 

src/RayTracingRenderer.js

@@ -37,7 +37,6 @@ export function RayTracingRenderer(params = {}) {
     needsUpdate: true,
     onSampleRendered: null,
     renderWhenOffFocus: true,
-    renderToScreen: true,
     toneMapping: THREE.LinearToneMapping,
     toneMappingExposure: 1,
     toneMappingWhitePoint: 1,
@@ -66,12 +65,6 @@ export function RayTracingRenderer(params = {}) {
     module.needsUpdate = false;
   }
 
-  function restartTimer() {
-    if (pipeline) {
-      pipeline.restartTimer();
-    }
-  }
-
   module.setSize = (width, height, updateStyle = true) => {
     size.set(width, height);
     canvas.width = size.width * pixelRatio;
@@ -111,13 +104,22 @@ export function RayTracingRenderer(params = {}) {
     }
   };
 
-  module.sendToScreen = () => {
-    if (pipeline) {
-      pipeline.hdrBufferToScreen();
-    }
+  let isValidTime = 1;
+  let currentTime = NaN;
+  let syncWarning = false;
+
+  function restartTimer() {
+    isValidTime = NaN;
+  }
+
+  module.sync = (t) => {
+    // the first call to the callback of requestAnimationFrame does not have a time parameter
+    // use performance.now() in this case
+    currentTime = t || performance.now();
   };
 
   let lastFocus = false;
+
   module.render = (scene, camera) => {
     if (!module.renderWhenOffFocus) {
       const hasFocus = document.hasFocus();
@@ -134,19 +136,28 @@ export function RayTracingRenderer(params = {}) {
       initScene(scene);
     }
 
-    camera.updateMatrixWorld();
-
-    if (module.renderToScreen) {
-      if(module.maxHardwareUsage) {
-        // render new sample for the entire screen
-        pipeline.drawFull(camera);
-      } else {
-        // render new sample for a tiled subset of the screen
-        pipeline.draw(camera);
+    if (isNaN(currentTime)) {
+      if (!syncWarning) {
+        console.warn('Ray Tracing Renderer warning: For improved performance, please call renderer.sync(time) before render.render(scene, camera), with the time parameter equalling the parameter passed to the callback of requestAnimationFrame');
+        syncWarning = true;
       }
 
+      currentTime = performance.now(); // less accurate than requestAnimationFrame's time parameter
+    }
+
+    pipeline.time(isValidTime * currentTime);
+
+    isValidTime = 1;
+    currentTime = NaN;
+
+    camera.updateMatrixWorld();
+
+    if(module.maxHardwareUsage) {
+      // render new sample for the entire screen
+      pipeline.drawFull(camera);
     } else {
-      pipeline.drawOffscreenTile(camera);
+      // render new sample for a tiled subset of the screen
+      pipeline.draw(camera);
     }
   };
 

src/renderer/RenderSize.js

@@ -0,0 +1,67 @@
+import { clamp } from './util';
+import { Vector2 } from 'three';
+
+export function makeRenderSize(gl) {
+  const desiredMsPerFrame = 20;
+
+  let fullWidth;
+  let fullHeight;
+
+  let renderWidth;
+  let renderHeight;
+  let scale = new Vector2(1, 1);
+
+  let pixelsPerFrame = pixelsPerFrameEstimate(gl);
+
+  function setSize(w, h) {
+    fullWidth = w;
+    fullHeight = h;
+    calcDimensions();
+  }
+
+  function calcDimensions() {
+    const aspectRatio = fullWidth / fullHeight;
+    renderWidth = Math.round(clamp(Math.sqrt(pixelsPerFrame * aspectRatio), 1, fullWidth));
+    renderHeight = Math.round(clamp(renderWidth / aspectRatio, 1, fullHeight));
+    scale.set(renderWidth / fullWidth, renderHeight / fullHeight);
+  }
+
+  function adjustSize(elapsedFrameMs) {
+    if (!elapsedFrameMs) {
+      return;
+    }
+
+     // tweak to find balance. higher = faster convergence, lower = less fluctuations to microstutters
+    const strength = 600;
+
+    const error = desiredMsPerFrame - elapsedFrameMs;
+
+    pixelsPerFrame += strength * error;
+    pixelsPerFrame = clamp(pixelsPerFrame, 8192, fullWidth * fullHeight);
+    calcDimensions();
+  }
+
+  return {
+    adjustSize,
+    setSize,
+    scale,
+    get width() {
+      return renderWidth;
+    },
+    get height() {
+      return renderHeight;
+    }
+  };
+}
+
+function pixelsPerFrameEstimate(gl) {
+  const maxRenderbufferSize = gl.getParameter(gl.MAX_RENDERBUFFER_SIZE);
+
+  if (maxRenderbufferSize <= 8192) {
+    return 80000;
+  } else if (maxRenderbufferSize === 16384) {
+    return 150000;
+  } else if (maxRenderbufferSize >= 32768) {
+    return 400000;
+  }
+}