Colors being ignored?

[kachkaev]

I cloned your repo and tried to play with the example, but noticed that the rendered colors do not match the declared ones in scatter plots and archs. Here is what I did:

git clone ...
npm install
MAPBOX_API_KEY=xxx npm start

And here is the result after a bit of tilting and rotating:

Here is what I see after a click (this changes the data behind the hex mesh):

My attempts to change the colors did not bring any results. However, adding console.log into various places showed that the values do propagate down to the layer classes.

I ran the experiment in Chrome on Win 7 and in Chrome and FF on Ubuntu VM that sits on the same Windows host. Can this be some incompatibility with the graphics driver? Haven't tried the example on other machines yet.

UPD:
40d32d3 (2016-05-20) works:

UPD2:
Tested 2 more versions:
7ad568d (2016-05-26) colors work
a654bf6 (2016-07-05) not any more

[kachkaev]

I ran the same example on OSX and confirm that the same issue with colours takes place on another machine too.

[kachkaev]

@ibgreen, could you please have a quick look at this when there is a free minute?

[ibgreen]

@kachkaev Thanks for investigating this. This seems related to the arc-layer being improved to support "per arc" color, rather than global colors for all arcs.

You can see the new calculateInstanceColors method on master
https://github.com/uber/deck.gl/blob/master/src/layers/arc-layer/arc-layer.js#L125
https://github.com/uber/deck.gl/blob/master/src/layers/arc-layer/arc-layer-vertex.glsl#L67

For now, you could either make a copy of the old layer inside your app, or change your app to use per-instance colors.

@gnavvy We should create a CHANGELOG.md. Also update docs and example to correctly reflect the new API.

[kachkaev]

@ibgreen it's good to see that it's a result of a change in the API rather than something's wrong with how I run your demo. Could you please give a quick and small hint on what to change the color of a scatter plot in your example, for instance? I'm playing with deck.gl now and am just about exploring this.

UPD Or a test layer, if that's quicker to explain

[kachkaev]

Maybe this little example will make it easier to give a hint:

<DeckGLOverlay
  width={width}
  height={height}
  {...mapViewState}
  layers={[
    new ScatterplotLayer({
      id: 'layer1',
      width,
      height,
      latitude: mapViewState.latitude,
      longitude: mapViewState.longitude,
      zoom: mapViewState.zoom,
      radius: 10,
      data: [
        { position: {x: -0.1, y:  -0.2, z: 10}, color: [255, 0, 255] },
        { position: {x: -0.3, y:  0.3, z: 0}, color: [255, 0, 255] },
        { position: {x: 0.2, y: -0.4, z: 0}, color: [255, 0, 255] },
        { position: {x: 0.2, y: 0.3, z: 0}, color: [255, 0, 255] },
      ],
    }),
  ]}
/>

@gnavvy what should be done here to see a color that is different than red in 2.2.4? Hope it takes just a few seconds to answer ;-)

UPD Can the size be made dynamic too (e.g. with some relative size in data)?

[gnavvy]

Hi @kachkaev
The problem was due to the point colors were set to constant in the scatterplot-layer-fragment shader, sorry about that.
I just pushed 2.2.5 to fix this. Could you take a look and see if it works?

[kachkaev]

@gnavvy thanks for having a look! The library is still 2.2.4 on npm, could you please publish? I'm also a bit curious about bring the colors back in other layers such as in arcs.

It would be nice if the example was up-to-date with the library - this is likely to save a good portion of time by reducing more stupid questions like mine ;-)