Add a utility to adjust rendering quality based on rendering performance.

samples/beachdemo/beachdemo.js

 /*
  * Copyright 2009, Google Inc.
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 31 matching lines @@
 o3djs.require('o3djs.quaternions');
 o3djs.require('o3djs.dump');
 o3djs.require('o3djs.camera');
 o3djs.require('o3djs.primitives');
 o3djs.require('o3djs.loader');
 o3djs.require('o3djs.picking');
 o3djs.require('o3djs.canvas');
 o3djs.require('o3djs.fps');
 o3djs.require('o3djs.debug');
 o3djs.require('o3djs.particles');
+o3djs.require('o3djs.performance');
 
-var RENDER_TARGET_WIDTH = 256;
-var RENDER_TARGET_HEIGHT = 256;
 var PROXY_HEIGHT = 5150;
 
 //        client.root
 //            |
 //        g_mainRoot
 //            |
 //      +-----+--------+----------------+
 //      |              |                |
 //  g_baseRoot   g_waterTransform    g_skyDomeTransform
 //      |
@@ skipping 56 matching lines @@
 var g_loadInfo;
 var g_reflectionClipState;
 var g_refractionClipState;
 var g_mainRenderGraphRoot;
 var g_reflectionSurfaceSet;
 var g_refractionSurfaceSet;
 var g_skyDomeTransform;
 var g_waterTransform;
 var g_reflectionTexture;
 var g_refractionTexture;
+var g_reflectionImage;
+var g_refrectionImage;
+var g_depthSurface;
 var g_globalParams;
 var g_globalClockParam;
 var g_clipHeightParam;
 var g_lightPositionParam;
 var g_lightDirectionParam;
 var g_lightColorParam;
 var g_proxyOffsetParam;
 var g_originalLightColor;
 var g_viewPositionParam;
 var g_underwaterMaterials;
@@ skipping 32 matching lines @@
 var g_waterColor = [0.13, 0.19, 0.22, 1];
 var g_hudQuad;
 var g_fpsManager;
 var g_fpsVisible = false;
 var g_particleSystem;
 var g_particleLoader;
 var g_downloadPercent = -1;
 var g_showError = false;
 var g_sceneEffects = [];
 var g_sceneTexturesByURI;
+var g_renderTargetWidth = 256;
+var g_renderTargetHeight = 256;
+var g_perfMon;
 
 var g_camera = {
   farPlane: 80000,
   nearPlane: 10,
   up: [0, 0, 1],
   fieldOfView: Math.PI / 4,  // 45 degrees
   eye: [-9662, -10927, 1920],
   targetVector: [0.43, 0.90, 0.02],
   xAxis: [0.8335, -0.5522, -0.0157],
   minFieldOfView: 5 * Math.PI / 180,
@@ skipping 1341 matching lines @@
 
         o3djs.dump.dump('---dump g_scenePack effects---\n');
         var effects = g_scenePack.getObjectsByClassName('o3d.Effect');
         for (var t = 0; t < effects.length; t++) {
           o3djs.dump.dump ('  ' + t + ' : ' + effects[t].className +
                   ' : "' + effects[t].name + '"\n');
           o3djs.dump.dumpParams(effects[t], '    ');
         }
       }
     }
+    g_perfMon = o3djs.performance.createPerformanceMonitor(
+        25, 35, increaseRenderTargetResolution, decreaseRenderTargetResolution);
   }
 
   try {
     // We need to make a subloader because we can't make the particles
     // until both the scene and the particle textures are loaded.
     g_loadInfo = g_loader.loadInfo;
     g_particleLoader = g_loader.createLoader(setupParticles);
     g_particleLoader.loadTexture(
         g_mainPack,
         o3djs.util.getAbsoluteURI('assets/pe_fire.jpg'),
@@ skipping 254 matching lines @@
   setSpeedTransforms(true, false, false);
   g_clipHeightParam.value = g_mainClipHeight;
   g_client.root.identity();
   g_client.renderTree(g_mainViewInfo.root);
 
   // Render the HUD.
   g_client.renderTree(g_hudViewInfo.root);
 
   // Render the FPS display.
   g_client.renderTree(g_fpsManager.viewInfo.root);
+
+  if (g_perfMon) {
+    g_perfMon.onRender(renderEvent.elapsedTime);
+  }
 }
 
 function onAllLoadingFinished() {
   g_loader = null;
   g_animateCamera = true;
 
   showHint();
 
   window.g_finished = true;  // for selenium testing.
 }
 
 /**
  * Creates the client area.
  */
 function init() {
   // These are here so they are shared by both V8 and the browser.
   window.g_finished = false;  // for selenium
   window.g_timeMult = 1;
   window.g_clock = 0;
 
   // Comment out the line below to run the sample in the browser JavaScript
   // engine. This may be helpful for debugging.
   o3djs.util.setMainEngine(o3djs.util.Engine.V8);
 
   o3djs.util.addScriptUri('');
   o3djs.util.makeClients(initStep2, 'LargeGeometry');
 }
 
+function setupRenderTargets() {
+  var oldReflectionTexture;
+  var oldRefractionTexture;
+  var oldDepthSurface;
+
+  if (g_reflectionTexture) {
+    g_mainPack.removeObject(g_reflectionSurfaceSet.renderSurface);
+    g_mainPack.removeObject(g_refractionSurfaceSet.renderSurface);
+    g_mainPack.removeObject(g_reflectionTexture);
+    g_mainPack.removeObject(g_refractionTexture);
+    g_mainPack.removeObject(g_depthSurface);
+  } else {
+    // First time only.
+    g_reflectionSurfaceSet = g_mainPack.createObject('RenderSurfaceSet');
+    g_refractionSurfaceSet = g_mainPack.createObject('RenderSurfaceSet');
+  }
+
+  // Create Render Targets for the reflection and refraction.
+  g_reflectionTexture = g_mainPack.createTexture2D(g_renderTargetWidth,
+                                                   g_renderTargetHeight,
+                                                   g_o3d.Texture.ARGB8, 1,
+                                                   true);
+  var reflectionSurface = g_reflectionTexture.getRenderSurface(0, g_mainPack);
+  g_refractionTexture = g_mainPack.createTexture2D(g_renderTargetWidth,
+                                                   g_renderTargetHeight,
+                                                   g_o3d.Texture.XRGB8, 1,
+                                                   true);
+  var refractionSurface = g_refractionTexture.getRenderSurface(0, g_mainPack);
+  g_depthSurface = g_mainPack.createDepthStencilSurface(g_renderTargetWidth,
+                                                        g_renderTargetHeight);
+
+  // Set up the render graph to generate them.
+  g_reflectionSurfaceSet.renderSurface = reflectionSurface;
+  g_reflectionSurfaceSet.renderDepthStencilSurface = g_depthSurface;
+
+  g_refractionSurfaceSet.renderSurface = refractionSurface;
+  g_refractionSurfaceSet.renderDepthStencilSurface = g_depthSurface;
+
+  g_updateRenderTargets = true;
+
+  if (g_waterMaterial) {  // Every time after the first.
+    var sampler = g_waterMaterial.getParam('reflectionSampler').value;
+    sampler.texture = g_reflectionTexture;
+    sampler = g_waterMaterial.getParam('refractionSampler').value;
+    sampler.texture = g_refractionTexture;
+    g_reflectionImage.sampler.texture = g_reflectionTexture;
+    g_refractionImage.sampler.texture = g_refractionTexture;
+  }
+}
+
+function increaseRenderTargetResolution() {
+  var changed;
+  if (g_renderTargetWidth < 2048) {
+    g_renderTargetWidth <<= 1;
+    changed = true;
+  }
+  if (g_renderTargetHeight < 2048) {
+    g_renderTargetHeight <<= 1;
+    changed = true;
+  }
+  setupRenderTargets();
+}
+
+function decreaseRenderTargetResolution() {
+  var changed;
+  if (g_renderTargetWidth > 256) {
+    g_renderTargetWidth >>= 1;
+    changed = true;
+  }
+  if (g_renderTargetHeight > 256) {
+    g_renderTargetHeight >>= 1;
+    changed = true;
+  }
+  setupRenderTargets();
+}
+
 /**
  * Initializes O3D and loads the scene into the transform graph.
  * @param {Array} clientElements Array of o3d object elements.
  */
 function initStep2(clientElements) {
   g_materialPanelElement = o3djs.util.getElementById('materialpanel');
   g_propPanelElement = o3djs.util.getElementById('proppanel');
   g_effectPanelElement = o3djs.util.getElementById('effectpanel');
   g_upperPanelElement = o3djs.util.getElementById('upperpanel');
   g_effectTabsElement = o3djs.util.getElementById('effecttabs');
   g_effectTextAreaElement = o3djs.util.getElementById('effecttextarea');
   g_sceneElement = o3djs.util.getElementById('o3d');
 
   g_o3dElement = clientElements[0];
   g_o3d = g_o3dElement.o3d;
   g_math = o3djs.math;
   g_quaternions = o3djs.quaternions;
   window.g_client = g_client = g_o3dElement.client;
 
   g_mainPack = g_client.createPack();
   g_scenePack = g_client.createPack();
 
-  // Create Render Targets for the reflection and refraction.
-  g_reflectionTexture = g_mainPack.createTexture2D(RENDER_TARGET_WIDTH,
-                                                   RENDER_TARGET_HEIGHT,
-                                                   g_o3d.Texture.ARGB8, 1,
-                                                   true);
-  var reflectionSurface = g_reflectionTexture.getRenderSurface(0, g_mainPack);
-  g_refractionTexture = g_mainPack.createTexture2D(RENDER_TARGET_WIDTH,
-                                                   RENDER_TARGET_HEIGHT,
-                                                   g_o3d.Texture.XRGB8, 1,
-                                                   true);
-  var refractionSurface = g_refractionTexture.getRenderSurface(0, g_mainPack);
-  var depthSurface = g_mainPack.createDepthStencilSurface(RENDER_TARGET_WIDTH,
-                                                          RENDER_TARGET_HEIGHT);
-
   g_mainRoot = g_mainPack.createObject('Transform');
   g_baseRoot = g_scenePack.createObject('Transform');
   g_baseRoot.parent = g_mainRoot;
   g_sceneRoot = g_scenePack.createObject('Transform');
   g_sceneRoot.parent = g_baseRoot;
   g_mainRoot.parent = g_client.root;
   g_sceneRoot.translate(0, 0, -g_waterLevel);
 
-  // Setup the render graph to generate them.
-  g_reflectionSurfaceSet = g_mainPack.createObject('RenderSurfaceSet');
-  g_reflectionSurfaceSet.renderSurface = reflectionSurface;
-  g_reflectionSurfaceSet.renderDepthStencilSurface = depthSurface;
-
-  g_refractionSurfaceSet = g_mainPack.createObject('RenderSurfaceSet');
-  g_refractionSurfaceSet.renderSurface = refractionSurface;
-  g_refractionSurfaceSet.renderDepthStencilSurface = depthSurface;
+  setupRenderTargets();
 
   // Create states to set clipping.
   g_reflectionClipState = g_mainPack.createObject('State');
   g_reflectionClipState.getStateParam('AlphaTestEnable').value = true;
   g_reflectionClipState.getStateParam('AlphaComparisonFunction').value =
       g_o3d.State.CMP_GREATER;
   var reflectionStateSet = g_mainPack.createObject('StateSet');
   reflectionStateSet.state = g_reflectionClipState;
   reflectionStateSet.parent = g_reflectionSurfaceSet;
 
@@ skipping 625 matching lines @@
   var backTexture = g_mainPack.createTexture2D(
       1, 1, g_o3d.Texture.XRGB8, 1, false);
   backTexture.set(0, [1, 1, 1]);
 
   g_whiteTexture = backTexture;
   g_whiteSampler = g_mainPack.createObject('Sampler');
   g_whiteSampler.texture = g_whiteTexture;
 
   // Make images to show the render targets.
   for (var ii = 0; ii < 2; ++ii) {
+    var textureDisplaySquareSize = 256;
     var renderTargetTexture = (ii == 0) ? g_reflectionTexture :
                                           g_refractionTexture;
-    var scale = 1;
     var x = 10;
-    var y = 10 + ii * (g_reflectionTexture.height * scale + 10);
+    var y = 10 + ii * (textureDisplaySquareSize + 10);
     var borderSize = 2;
     var image;
     // make a back image to create a border around render target.
     image = new Image(g_renderTargetDisplayRoot, backTexture, true);
     image.transform.translate(x - borderSize, y - borderSize, -3);
-    image.transform.scale(renderTargetTexture.width * scale + borderSize * 2,
-                          renderTargetTexture.height * scale + borderSize * 2,
+    image.transform.scale(textureDisplaySquareSize + borderSize * 2,
+                          textureDisplaySquareSize + borderSize * 2,
                           1);
     image = new Image(g_renderTargetDisplayRoot, renderTargetTexture, true);
     image.transform.translate(x, y, -2);
-    image.transform.scale(scale, scale, 1);
+    image.transform.scale(textureDisplaySquareSize / g_renderTargetWidth,
+        textureDisplaySquareSize / g_renderTargetHeight, 1);
+    if (ii == 0) {
+      g_reflectionImage = image;
+    } else {
+      g_refractionImage = image;
+    }
   }
 
   // Make a fader plane.
   {
     var image = new Image(g_hudRoot, backTexture, true);
     g_faderTransform = image.transform;
     g_faderTransform.visible = false;
     g_faderColorParam = image.colorParam;
     updateFaderPlane();
   }
@@ skipping 85 matching lines @@
 
 /**
  * Removes any callbacks so they don't get called after the page has unloaded.
  */
 function uninit() {
   if (g_client) {
     g_client.cleanup();
   }
 }