4.1 release patch (#889)

* Fixes #855

CHANGELOG.md

@@ -17,6 +17,23 @@ Ref: http://keepachangelog.com/en/0.3.0/
 
 ## Official Releases
 
+#### [4.1.1] - 2017-8-25
+
+- Example fixes. (#884)
+- getShaders() : update docs and examples. (#876)
+- Make sure blend modes override layer parameters during picking (#879)
+- Add depthTest:false to ScreenGridLayer (#875)
+- Layer.parameters: Update docs and forward in GeojsonLayer (#874)
+- Fix S2Layer fill color (#870)
+- Fix Maximum call stack size exceeded error in grid aggregator (#868)
+- Fix S2Layer base class and props. (#869)
+- Doc paragraph reformatting. Bump code links to 4.1-release (#854)
+- A pass on refreshing picking and event handling docs (#850)
+- Update dependencies to use luma 4.0.1 version (#849)
+- interaction bug fixes (#817)
+
+### deck.gl v4.1
+
 ### deck.gl v4.0
 
 #### [4.0.0] - 2017-4-6 Major deck.gl Release

docs/advanced/subclassed-layers.md

@@ -59,17 +59,22 @@ export default MultiColorPathLayer extends PathLayer {
 
 You can replace the shaders used in a layer by overriding the `getShaders()`
 method. Every core layer calls this method during initialization. It
-returns the shaders used by the layer in an object:
+returns the shaders and modules used by the layer in an object:
 - `vs`: string, GLSL source of the vertex shader
 - `fs`: string, GLSL source of the fragment shader
+- `modules`: Array, list of shader modules to be used
 
 Read about [writing your own shaders](/docs/advanced/writing-shaders.md).
 
-When you are implementing your own custom layers, it is encouraged that you
-also define a `getShaders()` function to retreive your shaders.
+When you are implementing your own custom layers, and want to change the shaders
+it is encouraged that you also define a `getShaders()` function and selectively
+overwrite required shader(s) with custom shaders.
 This makes it much easier for others to subclass your layer and make small
 changes to the shaders.
 
+Note: When overwriting `getShaders()` you should pass down any unmodified shader(s)
+and `modules` as is. See code example below.
+
 ## Defining Additional Uniforms
 
 The best way to pass additional uniforms to your custom shader is to override
@@ -79,7 +84,7 @@ the `draw()` method:
 /// my-scatterplot-layer.js
 // Example to draw rounded rectangles instead of circles in ScatterplotLayer
 import {ScatterplotLayer} from 'deck.gl';
-import fragmentShader from 'my-scatterplot-layer-fragment';
+import customFragmentShader from 'my-scatterplot-layer-fragment';
 
 export default RoundedRectangleLayer extends ScatterplotLayer {
 
@@ -94,10 +99,11 @@ export default RoundedRectangleLayer extends ScatterplotLayer {
   }
 
   getShaders() {
-    return {
-      vs: super.getShaders().vs,
-      fs: fragmentShader
-    }
+    // use object.assign to make sure we don't overwrite existing fields like `vs`, `modules`...
+    const shaders = Object.assign({}, super.getShaders(), {
+      fs: customFragmentShader
+    });
+    return shaders;
   }
 }
 RoundedRectangleLayer.defaultProps = {

docs/advanced/tips-and-tricks.md

@@ -1,5 +1,10 @@
 # Tips and Tricks
 
+## Notes on Rendering Control
+
+The base `Layer` class (which is inherited by all layers) supports a new property `parameters` that allows applications to specify the state of WebGL parameters such as blending mode, depth testing etc. This provides a tremendous amount of extra flexibility to applications. The new `parameters` prop leverages the luma.gl v4 [setParameters](http://uber.github.io/luma.gl/#/documentation/api-reference/get-parameter) API, which allows all WebGL parameters to be specified as keys in a single parameter object.
+
+
 ## Notes on Blending Modes
 
 To get a handle on blending modes, it helps to consider that deck.gl

docs/api-reference/base-layer.md

@@ -252,6 +252,13 @@ prop.
 
 ### Render Properties
 
+##### `parameters` (Function, optional)
+
+The `parameters` allows applications to specify values for WebGL parameters such as blending mode, depth testing etc. Any `parameters` will be applied temporarily while rendering this layer only.
+
+Please refer to the luma.gl v4 [setParameters](http://uber.github.io/luma.gl/#/documentation/api-reference/get-parameter) API for documentation on supported parameters and values.
+
+
 ##### `getPolygonOffset` (Function, optional)
 
 - Default: `({layerIndex}) => [0, -layerIndex * 100]`
@@ -275,6 +282,7 @@ If the accessor is assigned a falsy value, polygon offset will be set to `[0, 0]
 might return because of the precision error of 32-bit projection matrices. Try set the
 `fp64` prop to `true` in this case.*
 
+
 ## Members
 
 *Remarks: Layer members are designed to support the creation of new layers or

docs/layers/hexagon-cell-layer.md

@@ -67,7 +67,7 @@ they will be used to calculate primitive hexagon instead of `hexagonVertices`
 - Default: `1`
 
 Hexagon radius multiplier, between 0 - 1. The radius of hexagon is calculated by
-`coverage * getRadius(d)`
+`coverage * radius`
 
 ##### `elevationScale` (Number, optional)
 

docs/whats-new.md

@@ -14,6 +14,10 @@ Two new functions - `DeckGL.queryObject` and `DeckGL.queryVisibleObjects` allow
 
 For developers that write their own custome layers, the `shadertools` shader assembly system is now in place to replace the existing `assembleShaders` function in deck.gl. The new shader assembler system supports organizing shader codes into modules and is integrated with luma.gl's [`Model`]() so users no longer need to call `assembleShaders` before creating the `Model` for the layer.
 
+## Per-Layer control of WebGL Parameters
+
+The base `Layer` class (which is inherited by all layers) supports a new property `parameters` that allows applications to specify the state of WebGL parameters such as blending mode, depth testing etc. This provides significant control over the detailed rendering of layers to applications. Note that the new `parameters` prop directly leverages the luma.gl v4 [setParameters](http://uber.github.io/luma.gl/#/documentation/api-reference/get-parameter) API, which allows all WebGL parameters to be specified as keys in a single parameter object.
+
 ## CompositeLayer
 
 Composite layers, which were introduced in v4.0, have received some polish and performance improvements. `CompositeLayer.renderLayers` function now returns a nested array that could contain `null` values, and deck.gl will automatically flatten, filter and render all layers in the array. This is a small convenience that makes using the `renderLayers` methods in complex composite layers a little more readable. deck.gl now also avoids rerendering sublayers of `CompositeLayer` whose props haven't changed.

examples/brushing/arc-brushing-layer/arc-brushing-layer.js

@@ -40,7 +40,10 @@ export default class ArcBrushingLayer extends ArcLayer {
 
   getShaders() {
     // use customized shaders
-    return {vs: arcVertex, fs: arcFragment, modules: []};
+    return Object.assign({}, super.getShaders(), {
+      vs: arcVertex,
+      fs: arcFragment
+    });
   }
 
   draw({uniforms}) {

examples/brushing/deckgl-overlay.js

@@ -160,7 +160,8 @@ export default class DeckGLOverlay extends Component {
         pickable: false,
         // only show source points when brushing
         radiusScale: startBrushing ? 3000 : 0,
-        getColor: d => (d.gain > 0 ? targetColor : sourceColor)
+        getColor: d => (d.gain > 0 ? targetColor : sourceColor),
+        getTargetPosition: d => [d[0], d[1], 0]
       }),
       new ScatterplotBrushingLayer({
         id: 'targets-ring',

examples/brushing/scatterplot-brushing-layer/scatterplot-brushing-layer.js

@@ -38,7 +38,10 @@ export default class ScatterplotBrushingLayer extends ScatterplotLayer {
 
   getShaders() {
     // get customized shaders
-    return {vs: scatterplotVertex, fs: scatterplotFragment, modules: []};
+    return Object.assign({}, super.getShaders(), {
+      vs: scatterplotVertex,
+      fs: scatterplotFragment
+    });
   }
 
   // add instanceSourcePositions as attribute

examples/layer-browser/src/examples/core-layers.js

@@ -87,7 +87,8 @@ const GeoJsonLayerExample = {
     getElevation: f => 500,
     lineWidthScale: 10,
     lineWidthMinPixels: 1,
-    pickable: true
+    pickable: true,
+    fp64: true
   }
 };
 

examples/layer-browser/src/examples/sample-layers.js

@@ -10,7 +10,7 @@ const S2LayerExample = {
     opacity: 0.6,
     getS2Token: f => f.token,
     getPath: f => f.path,
-    getFillColor: f => [f.value * 256, (1 - f.value) * 256, (1 - f.value) * 128],
+    getFillColor: f => [f.value * 255, (1 - f.value) * 255, (1 - f.value) * 128],
     getStrokeWidth: f => 10,
     pickable: true
   }

examples/sample-layers/s2-layer/s2-layer.js

@@ -38,7 +38,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {Layer, PolygonLayer} from 'deck.gl';
+import {CompositeLayer, PolygonLayer} from 'deck.gl';
 
 import {getS2Polygon} from './s2-utils';
 
@@ -47,9 +47,9 @@ const defaultFillColor = [0xBD, 0xE2, 0x7A, 0xFF];
 
 const defaultProps = {
   drawCells: true,
-  fillCells: true,
+  filled: true,
 
-  extrusion: false,
+  extruded: false,
   wireframe: false,
 
   // Cell geometry
@@ -64,13 +64,13 @@ const defaultProps = {
   getFillColor: f => f.fillColor || defaultFillColor
 };
 
-export default class S2Layer extends Layer {
+export default class S2Layer extends CompositeLayer {
   initializeState() {
   }
 
   renderLayers() {
     const {id, getS2Token, getFillColor, getHeight} = this.props;
-    const {extruded, wireframe} = this.props;
+    const {extruded, wireframe, filled} = this.props;
 
     // Filled Polygon Layer
     // TODO - use a composite polygon layer that renders outlines etc
@@ -81,6 +81,7 @@ export default class S2Layer extends Layer {
       getColor: getFillColor,
       extruded,
       wireframe,
+      filled,
       updateTriggers: Object.assign({}, this.props.updateTriggers, {
         getColor: this.props.updateTriggers.getFillColor
       })

package.json

@@ -2,7 +2,7 @@
   "name": "deck.gl",
   "description": "A suite of 3D-enabled data visualization overlays, suitable for react-map-gl",
   "license": "MIT",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "keywords": [
     "webgl",
     "visualization",