[.CommandBufferContext]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0

[matsprea]

I've got this error

[.CommandBufferContext]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0 WebGL: too many errors, no more errors will be reported to the console for this context.

and a lot of partialy rendered tile in my maps.

To get this error I just put the cinnabar-style ìdemo inside an ionic 2 app using Chrome 49.

The plain cinnabar demo works fine

This is the typescript source code of the page with the map

/// <reference path="../../../typings/leaflet/leaflet.d.ts" />

import {Page} from 'ionic-angular';

declare let L: any;
declare let Tangram: any;

@Page({
  templateUrl: 'build/pages/map/map.html'
})
export class MapPage {

  constructor() {}

  onPageLoaded() {
    // workaround map is not correctly displayed
    // maybe this should be done in some other event
    setTimeout(this.loadMap.bind(this), 100);

  }

  loadMap() {

      let map = L.map('map');
      var layer = Tangram.leafletLayer({
        scene: 'scene.yaml',
        attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | &copy; OSM contributors | <a href="https://mapzen.com/" target="_blank">Mapzen</a>'
      });
      layer.addTo(map);
      map.setView([40.70531887544228, -74.00976419448853], 15);  var layer = Tangram.leafletLayer({ scene: 'scene.yaml' });
      layer.addTo(map);
  }

}

[bcamper]

Hi Matteo, thanks for the report. We're going to have to think about this a bit more, as we don't have any prior experience with Ionic, and the nature of the behavior is unusual -- it's clearly getting a WebGL context since some things are drawing, but there appears to be some aspect of the GL API that isn't responding as standalone Chrome does (also surprising since I'd expect an embedded Chrome to behave the same). Sometimes these types of situations are caused by behavior that is technically undefined by the spec, and is implemented in a commonsense way that "just works" on most GL drivers, with the occasional one that fails.

[matsprea]

I'm sorry, I was not clear in my report, I was using a "desktop" Chrome in both cases.

I'll try the Chrome on Android asap and report back.

[matsprea]

The previus report was made on Chrome 49.0.2623.108 m (64-bit) on Windows 10.

On Firefox (desktop) 43.0.4 and 45.0.1 I have the same problem as in Chrome, this is the relevant console log

: mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create tangram.min.js:3:0
Error: WebGL: drawArrays: bound vertex attribute buffers do not have sufficient size for given first and count tangram.min.js:7:10924
Error: WebGL: No further warnings will be reported for this WebGL context. (already reported 32 warnings)

on an Android device using webview ( chrome 48.0.2564.106) the result is the same as form chrome desktop and this is the console log

[GroupMarkerNotSet(crbug.com/242999)!:54E44A95]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0
index.html:1 WebGL: too many errors, no more errors will be reported to the console for this context.

and the android screenshot

Surprisingly on Edge 20.10240.16384.0 (desktop) it works fine! :)

[sprattek]

Hey guys,

we are using tangram alongside with leaflet map plugin as a one of layers and we are getting the same error after toggling to tangram layer multiple times. The first initialization is just fine but after selecting another layer and then back to tangram, map goes a bit distorted with lot of partials.

[olavk]

For us, this problem occurs when trying to instantiate two Tangram maps side-by-side or even when calling remove() on one and then instantiating another one

[dmvaldman]

A new version (0.8.0) was released last Friday, and we render the geometry differently. Could you try upgrading and seeing if this problem persists?

[fncmedia]

With Version 0.8.0 the problem stays the same when switching between layers:

[meetar]

@olavk, can you give us your browser/platform details?

[meetar]

@fncmedia You should be able to layer a Tangram map with any other kind of Leaflet layer, unless it is another Tangram map. Tangram isn't currently architected to allow multiple maps within the same browsing context. (This applies to @olavk's situation as well.)

In your case, what is the content of the other Leaflet layer?

[fncmedia]

We are actually using one instance of tangram in combination with a bing maps layer. Our issue occurs when switching between.

2016-06-14 20:46 GMT+02:00 Peter Richardson notifications@github.com:

@fncmedia https://github.com/fncmedia You should be able to layer a Tangram map with any other kind of Leaflet layer, unless it is another Tangram map. Tangram isn't currently architected to allow multiple maps within the same browsing context. (This applies to @olavk https://github.com/olavk's situation as well.)

In your case, what is the content of the other Leaflet layer?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tangrams/tangram/issues/280#issuecomment-225978468, or mute the thread https://github.com/notifications/unsubscribe/AFoBlOF5djYCfeODms4m7a8yLYQ80AGjks5qLvcTgaJpZM4H5AyW .

[bcamper]

By switching between do you mean using Leaflet add() and remove() calls (followed by another add())? If so, this has worked previously, but it is not something we do in regular practice so it certainly could have broken (I believe there's an automated test for this series of actions, but without visual verification it is hard to know when they stop working as expected).

On Tue, Jun 14, 2016 at 3:11 PM, fncmedia notifications@github.com wrote:

We are actually using one instance of tangram in combination with a bing maps layer. Our issue occurs when switching between.

2016-06-14 20:46 GMT+02:00 Peter Richardson notifications@github.com:

@fncmedia https://github.com/fncmedia You should be able to layer a Tangram map with any other kind of Leaflet layer, unless it is another Tangram map. Tangram isn't currently architected to allow multiple maps within the same browsing context. (This applies to @olavk https://github.com/olavk's situation as well.)

In your case, what is the content of the other Leaflet layer?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tangrams/tangram/issues/280#issuecomment-225978468, or mute the thread < https://github.com/notifications/unsubscribe/AFoBlOF5djYCfeODms4m7a8yLYQ80AGjks5qLvcTgaJpZM4H5AyW

.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/tangrams/tangram/issues/280#issuecomment-225985591, or mute the thread https://github.com/notifications/unsubscribe/AABBXcU5uPnc2WJfcgREf8V3xsroMfZdks5qLvzJgaJpZM4H5AyW .

[olavk]

@meetar Any browser/platform I could find. Chromium 50 on Ubuntu Firefox on Ubuntu Edge on Windows 10

[fncmedia]

@bcamper Yes in that case the issue comes up. I debugged before but without diving deep into WEG GL. Actually it blocks me from using in production.

I pushed an (unclean and not well structured) example to https://github.com/fncmedia/tangram-issue-example

[meetar]

Confirmed on Chrome 51.0.2704.84 64, fails with:

[.CommandBufferContext.Offscreen-MainThread-0x7fc8b3dcaa60]GL ERROR :GL_INVALID_OPERATION : glDrawElements: range out of bounds for buffer

And in Safari 9.1:

[Warning] WebGL: INVALID_OPERATION: drawElements: request out of bounds for current ELEMENT_ARRAY_BUFFER (tangram.debug.js, line 17164, x25)

Fails silently in Firefox.

[bcamper]

@sprattek @olavk @fncmedia Thanks for the reports. I've isolated the issue (failure to clear internal cache of WebGL Vertex Array Objects) and can have a fix soon. I will create a separate issue for this and post updates here as well.

[bcamper]

@matsprea I do not know if the fix discussed above will resolve your original issue, but it is worth a try. I was re-reading your original and I noticed something I hadn't before, these lines:

      layer.addTo(map);
      map.setView([40.70531887544228, -74.00976419448853], 15);  var layer = Tangram.leafletLayer({ scene: 'scene.yaml' });
      layer.addTo(map);

This implies the Tangram layer is being added multiple times to the same Leaflet map. It's possible that this is related and is causing your issue, as Tangram doesn't support multiple map instances at the same time, and it's possible that Leaflet is not checking for multiple adds of the same layer and something is going awry. Anyway that's speculative, but if you are still interested in using Tangram I suggest you 1) try without the duplicate layer.addTo(map) call, and then 2) try with the upcoming fix for layer remove/re-add pattern (I will post here when it is released).

Thanks to all for your bug reports!

[bcamper]

Also related are some non-fatal texture reference count errors in the console, which should be resolved by https://github.com/tangrams/tangram/commit/665e6c309e3e3747adc8f0355455e9bb6ff68ff6.

[matsprea]

@bcamper I'm definitely interested in Tangram, I'll try to follow your suggestion over the weekend and report back. Thanks!

[bcamper]

Layer remove/add should be fixed in master now w/https://github.com/tangrams/tangram/commit/d47ed12971f96775291ba5e91d9f04406d04a5c0, additional Leaflet 0.7.x issues fixed in https://github.com/tangrams/tangram/commit/b2e66316acbac623eef2a0ffe8a684ac30d869ec and https://github.com/tangrams/tangram/commit/a6bb3da222f38236a5f70516b7544153acec6a77. All will be released in Tangram 0.8.1.

[sprattek]

great, thank you guys

[matsprea]

Thanks, it works also on my tests

[bcamper]

This fix was released in version v0.8.1, which is available here:

https://mapzen.com/tangram/0.8/tangram.min.js (latest 0.8.x) https://mapzen.com/tangram/0.8.1/tangram.min.js

@fncmedia I verified this fix with a local copy of your demo, but please let us know if you have further issues.

[fncmedia]

@bcamper We were able to check - it works perfectly! Thx for fixing

[bcamper]

👍