ThinkGeo.com    |     Documentation    |     Premium Support

Context_lost_webgl

#1

I have been running into an error when zooming the map - particularly, when zooming in with the map maximized on a 4K screen using the shift+click draw box to zoom into a city from pretty much the world extent. The map will throw an error saying:

WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost [http://localhost:5000/InsertMapPageNameHere]

I am unsure what is causing this error nor how to recover from it when it throws. The map becomes blank and unresponsive while the rest of the application continues to work fine. If I attempt to refresh the page, I get an exception thrown in the javascript:

Microsoft.JSInterop.JSException: 'Cannot read property 'getExtension' of null
TypeError: Cannot read property 'getExtension' of null
    at new ol.webgl.Context (eval at <anonymous> (http://localhost:5000/js/ThinkGeo/1.0.0/blazor.js:1:1), <anonymous>:1:1001908)
    at new ol.renderer.webgl.Map (eval at <anonymous> (http://localhost:5000/js/ThinkGeo/1.0.0/blazor.js:1:1), <anonymous>:1:1118205)
    at Function.ol.renderer.webgl.Map.create (eval at <anonymous> (http://localhost:5000/js/ThinkGeo/1.0.0/blazor.js:1:1), <anonymous>:1:1119483)
    at t.ol.PluggableMap [as constructor] (eval at <anonymous> (http://localhost:5000/js/ThinkGeo/1.0.0/blazor.js:1:1), <anonymous>:1:215878)
    at t.ol.Map [as constructor] (eval at <anonymous> (http://localhost:5000/js/ThinkGeo/1.0.0/blazor.js:1:1), <anonymous>:1:1148628)
    at new t (http://localhost:5000/js/ThinkGeo/1.0.0/blazor.js:2:2386)
    at Object.createMap (http://localhost:5000/js/ThinkGeo/1.0.0/blazor.js:2:24613)
    at http://localhost:5000/_framework/blazor.server.js:8:31421
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (http://localhost:5000/_framework/blazor.server.js:8:31390)'

The javascript error will cause the application to become unresponsive. Any ideas on how to resolve this issue?

#2

Hi Brandon,

Thanks to let us know your issue.

We will try to get some information from the exception information.

I want to know what’s the step to reproduce it? I tried it in our samples: https://github.com/ThinkGeo?utf8=✓&q=blazor&type=&language= but hadn’t met the same exception.

Regards,

Ethan

#3

Ethan,

I have tried to recreate the issue with the sample, but I haven’t been able to recreate it. I can recreate it consistently with my application however. I started to implement my application into the sample, but that is going to take quite a bit of time to edit all the layers and get sample data together to demonstrate the error. Plus, I don’t want to publish too many details of my application.

I think the issue must be a combination of overlay/layers that may be the distinguishing factor here.

Here’s my setup:

  1. I have PNG tile cache as the background layer. (LayerOverlay, isCacheOnly=true, FileRasterTileCache, tile size is 512,512 )

  2. I have a sqlite layer that shows color-coded data dots on the map. (about 100 or so dots. The dots are just point shapes.)

  3. I have a raster image layer showing an image. (a png with a world file to locate it)

Each layer is in its own overlay.

When I maximize the browser window and I zoom in quickly or by a large amount, I get the error that I posted about. Consistently. I was able to recreate it just now as of typing this.

What can we do?

#4

Hi Brandon,

Thanks for your information.

We modify our sample but still hadn’t reproduce this issue.

After research the exception information, we found it should thrown by the webgl, and it’s should related with your system specs, mainly related with the browser.

You can did a quickly test to open this page: https://get.webgl.org/, in the browser which met this exception, if this page doesn’t works and you cannot view the spinning cube, it should be a bug in your browser to work with webgl. And if you are using chrome, please try the following possible solutions:

  1. Open “Use hardware acceleration when available” in system setting for chrome, then restart chrome
  2. Add parameter for chrome “–enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files”
  3. If your system is XP you can found related topics also

I hope the information is helpful.

Regards,

Ethan

#5

That information did not resolve the issue, but I appreciate the effort. There is still an issue, but without using TeamViewer or me uploading my entire project, I am not sure there is much that can be done.

#6

Hi Brandon,

In fact I think you can try to simplify your project. You can remove unnecessary layers one by one, and then get a simple project with as few custom code and data as possible.

If that sample still can reproduce this issue, you can upload it here or upload it in a ticket(it’s private).

This way also be helpful to let you know which code cause it.

Regards,

Ethan

#7

http://downloads.surveytech.com.s3-us-west-2.amazonaws.com/uqdi28ow9h/TGSample/thinkgeo4kBreakSample.zip

I managed to recreate the issue here. This is a simplified project. The image is located in the Quickstart folder for reference. It needs to have the .pgw located with it to locate the image on the map. It is located at some location in Portland, Oregon.

It appears the NativeRasterImage layer is the one causing the issue. My requirement is that the user gives me an image that must be manually located and then displayed on the map at the specified location in all subsequent operations, including being able to reload the image in right place next time upon reloading. Data must be able to be shown on a layer above the image and the image must be above the FileRasterTileCache layers.

I have hardcoded some locations in the Map.razor. Please adjust those locations as appropriate. Again, the image is located in the Quickstart folder.

Recreate the issue:

  1. Run the project using Chrome.
  2. Ensure tile data has been loaded.
  3. Ensure the image has been loaded.
  4. Ensure the map is zoomed out far enough to see nearly the entire planet.
  5. Shift + Click and draw a box around the Portland, Oregon area
  6. Observe that the map starts to draw then fails to draw.
  7. Attempt to use the map.
  8. Notice the map has fails to respond.
  9. View Visual Studio output window.
  10. Notice the Context_lost_webgl

While I have you here, on what element does the map size itself when the map size unit is set to percentage? It doesn’t just resize itself to its container, and it is extremely temperamental, even if I use the map-container class. For example, getting this quick sample to expand to fill the entire screen, it was a challenge. It wouldn’t just fill the parent div or the parent’s parent div or even the nth parent’s div. Even if I were to set each div to map-container, it wouldn’t actually expand, and it would have a height/width of 0.

Thanks for your help. Hopefully, we can get this resolved quickly. I am behind schedule trying to get these map issues resolved.

Sincerely,
Brandon Cook
“In fact I think you can try to…”

#8

Brandon,
Does this only happen on the 4K monitor or any 19201080 monitor? It works good on my 19201080 monitor. I attached you the code and the video. one thing I found we may need specify the fixed value for the size of map container.

Map.zip (1.6 KB)
I hardcode the path of the png file.

I will do more test on the 4K monitor tomorrow morning.

Thanks

Frank

#9

I use two 4k Monitors to develop on. It only happens when the map is full-screen at 4k resolution. If I decrease the resolution to 1080, then it doesn’t seem to happen. Even on a 4k screen, if I don’t have it at full-screen, it works fine.

Check out the video. I have two errors in that video alone; I can reproduce it on command. You’ll also notice that at less than full-screen it does not show the error.

My goal is to have a fluid map container. Ideally, I want the user be able to show the map at full-screen for presentations and other applications. The map is a huge deliverable for us. The information on the map is very important to our customers. Limiting them to a 1080 screen, won’t be ideal. Plus, that makes ensuring the rest of the UI is laid out appropriately much more complicated. This product is in alpha/beta testing at the moment. We want to be able to release as soon as possible. That’s why we are hitting hard on these bugs. These bugs are some of the “must fix” before release.

Features disappearing, the map crashing, the map failing to update, are things that would embarrass a customer giving a presentation and would embarrass us as the software that provides the map they are using to give the presentation. It is a less than ideal solution to tell a customer to limit themselves to a less than 4k monitor - or to suggest that they can’t display the map at full-screen if they so choose.

I know you’re doing everything you can to fix this. I really appreciate it.

EDIT: That video was made using the exact project that I linked. I made no changes other than the file locations.

#10

Brandon,
Quick update. I got the 4k monitor . I seems able to reproduce the “map crashing” issue on the 4k monitor with full screen chrome mode. The whole chrome screen get black then the map not work anymore until you refresh the page. I am keep looking into more detail.

Thanks

Frank

#11

That’s good news. Hopefully, it is a simple fix. Yep, black screen and then the map does not respond until a browser refresh. Sounds like you got it. If the monitor is a good one, I hope you get to keep it. Really appreciate your efforts, Frank.

#12

Brandon,
I did more test. It not happen today. It only happen on my machine once or twice last week. Here is the video:

Can you let me know you video card specification. My video card(GTX970M) has 3 gigabytes memory. As talked with my supervisor to support 4k map rendering. We’d better have a powerful video card.

We could schedule a Teamviewer or Zoom session to dig into more detail for your case if you want. At least we need a way to constantly reproduce it.

Thanks

Frank

#13

I have two GTX 1080-TI (11GB in video memory. 64GB RAM. i7-8700k processor.).

I wouldn’t mind a teamviewer session or something.

#14

Thanks Brandon,
Let’s have a meeting tomorrow morning 10 am US Central Time. I will email the meeting detail. It work for you?

Thanks

Frank

#15

Frank,

That’s a little early for me. I am a night owl on Pacific Time. Can we find a different time?

#16

Sure. How about 4:00 PM. It is your 2:00 PM? Thanks

Frank