Merge 299c295 into ced5c79

docs/api-reference/deck.md

@@ -170,7 +170,7 @@ Otherwise, the callback can return an object with the following fields:
 * `style` (Object, optional) - An object of CSS styles to apply to the tooltip element, which can override the default styling.
 
 By default, the tooltip has the following CSS style:
-  
+
 ```css
 z-index: 1;
 position: absolute;
@@ -179,16 +179,20 @@ background-color: #29323c;
 padding: 10px;
 ```
 
-##### `useDevicePixels` (Boolean, optional)
+##### `useDevicePixels` (Boolean or Number, optional)
+
+When `true` (default), it will use device's full retina/HD resolution for rendering, when `false`, it will use the same resolution as the screen window (CSS window).
 
-When true, device's full resolution will be used for rendering, this value can change per frame, like when moving windows between screens or when changing zoom level of the browser.
+As an experimental API, a custom ratio (Number) can be set to be used instead of actual device pixel ratio. This allows using lower or higher resolution than CSS window for rendering.   
 
 Default value is `true`.
 
 Note:
 
 * Consider setting to `false` unless you require high resolution, as it affects rendering performance.
 
+* When it is set to a high value (like, 4 or more), it is possible to hit the system limit for allocating rendering buffer, such cases will log a warning and fallback to system allowed resolution.
+
 ##### `gl` (Object, optional)
 
 gl context, will be autocreated if not supplied.

modules/core/src/effects/lighting/lighting-effect.js

@@ -57,14 +57,14 @@ export default class LightingEffect extends Effect {
     this.shadow = this.directionalLights.some(light => light.shadow);
   }
 
-  prepare(gl, {layers, viewports, onViewportActive, views, pixelRatio}) {
+  prepare(gl, {layers, viewports, onViewportActive, views}) {
     if (!this.shadow) return {};
 
     // create light matrix every frame to make sure always updated from light source
     const shadowMatrices = this._createLightMatrix();
 
     if (this.shadowPasses.length === 0) {
-      this._createShadowPasses(gl, pixelRatio);
+      this._createShadowPasses(gl);
     }
     if (!this.programManager) {
       // TODO - support multiple contexts
@@ -145,9 +145,9 @@ export default class LightingEffect extends Effect {
     return lightMatrices;
   }
 
-  _createShadowPasses(gl, pixelRatio) {
+  _createShadowPasses(gl) {
     for (let i = 0; i < this.directionalLights.length; i++) {
-      this.shadowPasses.push(new ShadowPass(gl, {pixelRatio}));
+      this.shadowPasses.push(new ShadowPass(gl));
     }
   }
 

modules/core/src/lib/deck-picker.js

@@ -29,7 +29,6 @@ export default class DeckPicker {
     this.gl = gl;
     this.pickingFBO = null;
     this.pickLayersPass = new PickLayersPass(gl);
-    this.pixelRatio = cssToDeviceRatio(gl);
     this.layerFilter = null;
     this.pickingEvent = null;
     this.lastPickedInfo = {
@@ -45,7 +44,6 @@ export default class DeckPicker {
       this.layerFilter = props.layerFilter;
     }
     this.pickLayersPass.setProps({
-      pixelRatio: this.pixelRatio,
       layerFilter: this.layerFilter
     });
   }
@@ -136,7 +134,7 @@ export default class DeckPicker {
     // Convert from canvas top-left to WebGL bottom-left coordinates
     // Top-left coordinates [x, y] to bottom-left coordinates [deviceX, deviceY]
     // And compensate for pixelRatio
-    const pixelRatio = this.pixelRatio;
+    const pixelRatio = cssToDeviceRatio(this.gl);
     const devicePixelRange = cssToDevicePixels(this.gl, [x, y], true);
     const devicePixel = [
       devicePixelRange.x + Math.floor(devicePixelRange.width / 2),
@@ -228,7 +226,7 @@ export default class DeckPicker {
     this.updatePickingBuffer();
     // Convert from canvas top-left to WebGL bottom-left coordinates
     // And compensate for pixelRatio
-    const pixelRatio = this.pixelRatio;
+    const pixelRatio = cssToDeviceRatio(this.gl);
     const leftTop = cssToDevicePixels(this.gl, [x, y], true);
 
     // take left and top (y inverted in device pixels) from start location

modules/core/src/lib/deck-renderer.js

@@ -2,14 +2,13 @@ import log from '../utils/log';
 import DrawLayersPass from '../passes/draw-layers-pass';
 import PickLayersPass from '../passes/pick-layers-pass';
 import PostProcessEffect from '../effects/post-process-effect';
-import {Framebuffer, cssToDeviceRatio} from '@luma.gl/core';
+import {Framebuffer} from '@luma.gl/core';
 
 const LOG_PRIORITY_DRAW = 2;
 
 export default class DeckRenderer {
   constructor(gl) {
     this.gl = gl;
-    this.pixelRatio = cssToDeviceRatio(gl);
     this.layerFilter = null;
     this.drawPickingColors = false;
     this.drawLayersPass = new DrawLayersPass(gl);
@@ -36,14 +35,12 @@ export default class DeckRenderer {
       }
     }
 
-    const {pixelRatio, layerFilter} = this;
+    const {layerFilter} = this;
 
     this.drawLayersPass.setProps({
-      pixelRatio,
       layerFilter
     });
     this.pickLayersPass.setProps({
-      pixelRatio,
       layerFilter
     });
   }
@@ -65,8 +62,7 @@ export default class DeckRenderer {
       viewports,
       onViewportActive: activateViewport,
       views,
-      effects,
-      pixelRatio: this.pixelRatio
+      effects
     });
     const outputBuffer = this.lastPostProcessEffect
       ? this.screenBuffer

modules/core/src/lib/deck.js

@@ -69,7 +69,7 @@ function getPropTypes(PropTypes) {
     glOptions: PropTypes.object,
     parameters: PropTypes.object,
     pickingRadius: PropTypes.number,
-    useDevicePixels: PropTypes.bool,
+    useDevicePixels: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
     touchAction: PropTypes.string,
 
     // Callbacks

modules/core/src/lib/layer-manager.js

@@ -47,9 +47,6 @@ const INITIAL_CONTEXT = Object.seal({
   deck: null,
   gl: null,
 
-  // Settings
-  useDevicePixels: true, // Exposed in case custom layers need to adjust sizes
-
   // General resources
   stats: null, // for tracking lifecycle performance
 
@@ -149,12 +146,7 @@ export default class LayerManager {
       : this.layers;
   }
 
-  /**
-   * Set props needed for layer rendering and picking.
-   * Parameters are to be passed as a single object, with the following values:
-   * @param {Boolean} useDevicePixels
-   */
-  /* eslint-disable complexity, max-statements */
+  // Set props needed for layer rendering and picking.
   setProps(props) {
     if ('debug' in props) {
       this._debug = props.debug;
@@ -165,16 +157,11 @@ export default class LayerManager {
       this.context.userData = props.userData;
     }
 
-    if ('useDevicePixels' in props) {
-      this.context.useDevicePixels = props.useDevicePixels;
-    }
-
     // TODO - For now we set layers before viewports to preserve changeFlags
     if ('layers' in props) {
       this.setLayers(props.layers);
     }
   }
-  /* eslint-enable complexity, max-statements */
 
   // Supply a new layer list, initiating sublayer generation and layer matching
   setLayers(newLayers, forceUpdate = false) {

modules/core/src/passes/layers-pass.js

@@ -1,6 +1,6 @@
 import GL from '@luma.gl/constants';
 import Pass from './pass';
-import {clear, setParameters, withParameters} from '@luma.gl/core';
+import {clear, setParameters, withParameters, cssToDeviceRatio} from '@luma.gl/core';
 
 export default class LayersPass extends Pass {
   render(params) {
@@ -160,7 +160,7 @@ export default class LayersPass extends Pass {
       viewport: layer.context.viewport,
       mousePosition: layer.context.mousePosition,
       pickingActive: 0,
-      devicePixelRatio: this.props.pixelRatio
+      devicePixelRatio: cssToDeviceRatio(this.gl)
     });
     return moduleParameters;
   }
@@ -183,7 +183,7 @@ export default class LayersPass extends Pass {
     const height = gl.canvas ? gl.canvas.clientHeight || gl.canvas.height : 100;
     // Convert viewport top-left CSS coordinates to bottom up WebGL coordinates
     const dimensions = viewport;
-    const pixelRatio = this.props.pixelRatio;
+    const pixelRatio = cssToDeviceRatio(this.gl);
     return [
       dimensions.x * pixelRatio,
       (height - dimensions.y - dimensions.height) * pixelRatio,

modules/core/src/passes/pick-layers-pass.js

@@ -1,5 +1,5 @@
 import LayersPass from './layers-pass';
-import {withParameters} from '@luma.gl/core';
+import {withParameters, cssToDeviceRatio} from '@luma.gl/core';
 
 export default class PickLayersPass extends LayersPass {
   render(props) {
@@ -78,7 +78,7 @@ export default class PickLayersPass extends LayersPass {
     const moduleParameters = Object.assign(Object.create(layer.props), {
       viewport: layer.context.viewport,
       pickingActive: 1,
-      devicePixelRatio: this.props.pixelRatio
+      devicePixelRatio: cssToDeviceRatio(this.gl)
     });
 
     Object.assign(moduleParameters, effectProps);

modules/core/src/passes/shadow-pass.js

@@ -1,5 +1,11 @@
 import {default as LayersPass} from './layers-pass';
-import {Framebuffer, Texture2D, Renderbuffer, withParameters} from '@luma.gl/core';
+import {
+  Framebuffer,
+  Texture2D,
+  Renderbuffer,
+  withParameters,
+  cssToDeviceRatio
+} from '@luma.gl/core';
 
 export default class ShadowPass extends LayersPass {
   constructor(gl, props) {
@@ -48,8 +54,9 @@ export default class ShadowPass extends LayersPass {
       },
       () => {
         const viewport = params.viewports[0];
-        const width = viewport.width * this.props.pixelRatio;
-        const height = viewport.height * this.props.pixelRatio;
+        const pixelRatio = cssToDeviceRatio(this.gl);
+        const width = viewport.width * pixelRatio;
+        const height = viewport.height * pixelRatio;
         if (width !== target.width || height !== target.height) {
           target.resize({width, height});
         }
@@ -64,7 +71,7 @@ export default class ShadowPass extends LayersPass {
       viewport: layer.context.viewport,
       pickingActive: 0,
       drawToShadowMap: true,
-      devicePixelRatio: this.props.pixelRatio
+      devicePixelRatio: cssToDeviceRatio(this.gl)
     });
 
     Object.assign(moduleParameters, effectProps);