Deck.gl: TypeError: Cannot read property 'location' of null when using HexagonLayer

[michalczmiel]

Description

Recently I came across this weird behaviour when the layer was not displayed on the map. The mapbox map is displayed correctly, but the deck.gl layer is not visible. Oddly enough this issue occurs only on this specific Ubuntu distribution and only in Chrome. It works fine on the latest Ubuntu and other browsers. Could this be a hardware issue? The issue started when switched from vanilla mapbox to react-map-gl wrapper. Maybe my react-map-gl and deck.gl connection is wrong?

Code

const getCityPosition = props(["longitude", "latitude"]);

function getCityColorValue(data: DeckGLBarColor) {
  const cityElevationValue = getCityElevationValue(data);

  if (cityElevationValue === 0) {
    return 0;
  }

  const cityElevationValuePower = Math.pow(cityElevationValue, 0.3);

  const oneColorRange = MAX_ELEVATION_POWER / NUMBER_OF_COLORS;
  const restColorsRange = MAX_ELEVATION_POWER - oneColorRange;
  const restColorsPercent = restColorsRange / MAX_ELEVATION_POWER;

  return cityElevationValuePower * restColorsPercent + oneColorRange;
}

const getCityElevationValue = pipe(
  map(prop("countJobSeekers")) as ((
    data: SeekerItem | DeckGLBarColor,
  ) => number[]),
  sum,
);

const layer = HexagonLayer({
      id: "city-layer",
      data,
      radius: 4000,
      coverage: 2,
      elevationRange: [0, MAX_ELEVATION_VALUE],
      elevationScale: 3,
      extruded: true,
      pickable: true,
      transitions: {
        getElevationValue: 250,
        getColorValue: 250,
      },
      parameters: {
        depthTest: false,
      },
      lightSettings: LIGHT_SETTINGS,
      colorRange: CITIES_COLORS_RANGE,
      colorDomain: [0, MAX_ELEVATION_POWER],
      getPosition: getCityPosition,
      getElevationValue: getCityElevationValue,
      getColorValue: getCityColorValue,
      onHover,
    });

<MapGL
      {...viewport}
      height="calc(100vh - 88px)"
      width="100%"
      ref={mapRef}
      dragRotate={false}
      onViewportChange={handleOnViewportChange}
      onMouseUp={debounce(handleLimit, 100)}
      mapStyle={MAP_STYLE}
      mapboxApiAccessToken={config.mapsApiKey}
    >
      <DeckGL useDevicePixels={false} {...viewport} layers={[layer]} />
</MapGL>

Environment:

• Framework Version: deck.gl 6.4.5
• Browser Version: 72.0.3626.96 (Official Build) (64-bit)
• OS: Ubuntu 16.04.5 LTS
  
  
  
  • Additional: react-map-gl 4.0.13, mapbox-gl 0.52.0
  
  

Logs

deck: error while initializing HexagonCellLayer({id: 'city-view-hexagon-cell'})
TypeError: Cannot read property 'location' of null
   at TransformFeedback._getVaryingIndex (transform-feedback.js:125)
   at TransformFeedback.setBuffer (transform-feedback.js:64)
   at transform-feedback.js:57
   at TransformFeedback.bind (resource.js:85)
   at TransformFeedback.setBuffers (transform-feedback.js:55)
   at TransformFeedback.setProps (transform-feedback.js:50)
   at TransformFeedback.initialize (transform-feedback.js:35)
   at new TransformFeedback (transform-feedback.js:19)
   at Transform._setupTransformFeedback (transform.js:529)
   at Transform._buildModel (transform.js:515)
_initializeLayer @ layer-manager.js:507
layer-manager.js:552 deck: error during update of HexagonCellLayer({id: 'city-view-hexagon-cell'}) TypeError: Cannot read property 'location' of null
   at TransformFeedback._getVaryingIndex (transform-feedback.js:125)
   at TransformFeedback.setBuffer (transform-feedback.js:64)
   at transform-feedback.js:57
   at TransformFeedback.bind (resource.js:85)
   at TransformFeedback.setBuffers (transform-feedback.js:55)
   at TransformFeedback.setProps (transform-feedback.js:50)
   at TransformFeedback.initialize (transform-feedback.js:35)
   at new TransformFeedback (transform-feedback.js:19)
   at Transform._setupTransformFeedback (transform.js:529)
   at Transform._buildModel (transform.js:515)
_updateLayer @ layer-manager.js:552
layer-manager.js:507 deck: error while initializing SolidPolygonLayer({id: 'region-view-polygons-fill'})
TypeError: Cannot read property 'location' of null
   at TransformFeedback._getVaryingIndex (transform-feedback.js:125)
   at TransformFeedback.setBuffer (transform-feedback.js:64)
   at transform-feedback.js:57
   at TransformFeedback.bind (resource.js:85)
   at TransformFeedback.setBuffers (transform-feedback.js:55)
   at TransformFeedback.setProps (transform-feedback.js:50)
   at TransformFeedback.initialize (transform-feedback.js:35)
   at new TransformFeedback (transform-feedback.js:19)
   at Transform._setupTransformFeedback (transform.js:529)
   at Transform._buildModel (transform.js:515)
_initializeLayer @ layer-manager.js:507
2seekers:1 [.WebGL-0x3bc206b00500]GL ERROR :GL_INVALID_OPERATION : glDrawElements: bound to target 0x8893 : no buffer
layer-manager.js:552 deck: error during update of SolidPolygonLayer({id: 'region-view-polygons-fill'}) TypeError: Cannot read property 'location' of null
   at TransformFeedback._getVaryingIndex (transform-feedback.js:125)
   at TransformFeedback.setBuffer (transform-feedback.js:64)
   at transform-feedback.js:57
   at TransformFeedback.bind (resource.js:85)
   at TransformFeedback.setBuffers (transform-feedback.js:55)
   at TransformFeedback.setProps (transform-feedback.js:50)
   at TransformFeedback.initialize (transform-feedback.js:35)
   at new TransformFeedback (transform-feedback.js:19)
   at Transform._setupTransformFeedback (transform.js:529)
   at Transform._buildModel (transform.js:515)
_updateLayer @ layer-manager.js:552
2seekers:1 [.WebGL-0x3bc206b00500]GL ERROR :GL_INVALID_OPERATION : glDrawElements: bound to target 0x8893 : no buffer

[jianhuang01]

@michalczmiel Transitions need webGL2.0 and transform feedback support, you can check if your browser support them, or remove transitions in your layer props.

[michalczmiel]

@jianhuang01 Disabling the animations helped, thank you. Now I need to think of way how to detect if webGL2.0 is supported. I have found this library https://www.npmjs.com/package/is-webgl2-context Do you have better solution to detect this?

[Pessimistress]

We do check if the TransformFeedback is supported before enabling transition. It can be verified by opening your page in Safari. Maybe there is an issue in our feature detection.

This sounds rather odd since you're using Chrome - Is Chrome launched with custom flags?

[tsherif]

@Pessimistress the line that's failing is this one in Luma.gl. It's trying to get info on varying in the program that doesn't exist. Is it possible some variables would be optimized out on certain platforms?

[ibgreen]

As far as I can see, if running on WebGL1, the ProgramConfiguration class (correctly) avoids trying to read varyings on initialization.

My question would be, why is the ProgramConfiguration instance being asked for varyings later? Some other part of the code does not contain the proper check for WebGL2?

[michalczmiel]

The installed chrome has no extensions or enabled flags. Tried to programmatically detect the WebGL2 but the tests always returned positive results

[flowsipher]

Have the same issue with a GeoJson layer. Adding transitions property results in the same error; I'm running on ChromeOS Vers. 73, DeckGL 7 and have verified it currently supports WebGL2.0.

[Pessimistress]

The version referred to by this issue is no longer maintained. Please open a new bug if this is still observed in the latest release.