Git Product home page Git Product logo

Comments (7)

kachkaev avatar kachkaev commented on April 29, 2024

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

from deck.gl.

kachkaev avatar kachkaev commented on April 29, 2024

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

from deck.gl.

ibgreen avatar ibgreen commented on April 29, 2024

@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.

from deck.gl.

kachkaev avatar kachkaev commented on April 29, 2024

@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

from deck.gl.

kachkaev avatar kachkaev commented on April 29, 2024

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)?

from deck.gl.

gnavvy avatar gnavvy commented on April 29, 2024

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?

from deck.gl.

kachkaev avatar kachkaev commented on April 29, 2024

@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 ;-)

from deck.gl.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.