New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to animate ArcLayer arcs individually? #633

Closed
JunShern opened this Issue May 6, 2017 · 6 comments

Comments

Projects
None yet
6 participants
@JunShern
Copy link

JunShern commented May 6, 2017

Hi, I'm working on a project to visualize flight trips on a map, and I would like to animate this such that I can see flight paths appearing and disappearing (similarly to the Trips example, but using ArcsLayer instead of TripsLayer).

Following the Trips example, I managed to use _animate() to get a time property into my render() function. The render() function then creates an ArcLayer of flight trips, selectively displaying the relevant flight trips of a given time by manipulating the source and target color (opacity) based on time.

This is what I tried:

new ArcLayer({
  id: 'arc-layer',
  data: arcs,
  strokeWidth,
  opacity,
  getSourcePosition: d => d.sourcePosition,
  getTargetPosition: d => d.targetPosition,
  getSourceColor: d => this.timeIsInInterval(time, d.tripStartTime, d.tripEndTime) ? sourceColor : [0,0,0,0],
  getTargetColor: d => this.timeIsInInterval(time, d.tripStartTime d.tripEndTime) ? targetColor : [0,0,0,0]
}),

This renders but it doesn't move past what I am guessing is the first frame of the animation - the render doesn't seem to update even though when I print the time variable in the console I can see it updating.

I have successfully used time in other properties of the ArcLayer (for example, setting strokeWidth: time % 5 does get me a rapidly updating stroke width animation), so I am guessing that this is related to the fact that getSourceColor and getTargetColor take function arguments instead of values, but I do not know how to solve this.

Alternatively, it would be good to just 'turn off' the arc instead of rendering a zero-opacity arc but I have not been able to figure out how to do this either.

Please help!

@ibgreen

This comment has been minimized.

Copy link
Contributor

ibgreen commented May 7, 2017

@JunShern
Since WebGL vertex attributes are expensive to update, they are not updated every frame. Instead, deck.gl uses an updateTriggers mechanism to control when to actually update attributes.

You'll want to specify that the attributes affected by those accessors need to be updated when time changes, something like:

updateTriggers: {
   getSourceColor: time,
   getTargetColor: time
}

Clearly, this important feature is not nearly as well documented as it should be.

@junshernchan-zz

This comment has been minimized.

Copy link

junshernchan-zz commented May 7, 2017

Hi @ibgreen, thanks that answered my question!

updateTriggers worked perfectly, however upon rendering I found that the 0-opacity lines are erasing part of the lines that I do want displayed, resulting in the following partially 'broken' lines:

image

Is there a property or method for the ArcLayer to completely turn lines off or on, for example setting visible: false or strokeWidth: 0 for individual data points?

@ibgreen

This comment has been minimized.

Copy link
Contributor

ibgreen commented May 7, 2017

@JunShern
Even though the arcs are transparent they are still being rendered which affects the Z buffer and hides arcs behind.

You can discard the fragment in GLSL fragment shader whenever alpha is zero, something like this should work:

const TRANSPARENT_FRAGMENT_SHADER = `\
#define SHADER_NAME arc-layer-fragment-shader
#ifdef GL_ES
precision highp float;
#endif
varying vec4 vColor;
void main(void) {
  if (vColor.a == 0.) {
   discard;
  }
  gl_FragColor = vColor;
}
`;

class TransparentArcLayer extends ArcLayer {
  getShaders() {
    return Object.assign({}, super.getShaders(), {
       fs: TRANSPARENT_FRAGMENT_SHADER
    });
 }
}
@ibgreen

This comment has been minimized.

Copy link
Contributor

ibgreen commented May 7, 2017

@JunShern
Updated the code to actually include the discard.

@cc-ch

This comment has been minimized.

Copy link

cc-ch commented Dec 13, 2018

Hello
I saw that you solved the problem of the ArcLayer before, I want to know how you use the updateTriggers to visualize flight trips on a map
Please help!

@hijiangtao

This comment has been minimized.

Copy link
Contributor

hijiangtao commented Dec 29, 2018

@cc-ch Currently, you can visualize it by Brushing arcs and shaders. More details at #2531 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment