Welcome Guest Search | Active Topics | Sign In | Register

Failed to initialize WebGL Options
Christian Porzio
Posted: Tuesday, October 10, 2017 9:58:02 AM
Rank: Advanced Member
Groups: Member

Joined: 10/4/2016
Posts: 104
Hi,

I have this team currently experiencing this error when loading their page:
Error: Failed to initialize WebGL

They use MapBox maps to be loaded on WebGL canvas. I have asked them to provide me with a repeatable page, right now their site is not accessible from outside the company.

Any idea for now?

Thanks a lot!
Christian Porzio
Posted: Tuesday, October 10, 2017 1:48:23 PM
Rank: Advanced Member
Groups: Member

Joined: 10/4/2016
Posts: 104
FYI... The team provided me with a small web page where we can reproduce the problem.

They are under the impression this must run in Chrome v61

Code: HTML/ASPX
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY3Jpc2thbGVzaCIsImEiOiJjajhsc2g3NnMwc21wMndxaXZ4dmEwNGtjIn0.PiwopeFa1mUOCVIwVhhw4A';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [0, 0],
    zoom: 2
});

var radius = 20;

function pointOnCircle(angle) {
    return {
        "type": "Point",
        "coordinates": [
            Math.cos(angle) * radius,
            Math.sin(angle) * radius
        ]
    };
}

map.on('load', function () {
    // Add a source and layer displaying a point which will be animated in a circle.
    map.addSource('point', {
        "type": "geojson",
        "data": pointOnCircle(0)
    });

    map.addLayer({
        "id": "point",
        "source": "point",
        "type": "circle",
        "paint": {
            "circle-radius": 10,
            "circle-color": "#007cbf"
        }
    });

    function animateMarker(timestamp) {
        // Update the data to a new position based on the animation timestamp. The
        // divisor in the expression `timestamp / 1000` controls the animation speed.
        map.getSource('point').setData(pointOnCircle(timestamp / 1000));

        // Request the next frame of the animation.
        requestAnimationFrame(animateMarker);
    }

    // Start the animation.
    animateMarker(0);
});
</script>

</body>
</html>
Christian Porzio
Posted: Wednesday, October 11, 2017 6:28:39 PM
Rank: Advanced Member
Groups: Member

Joined: 10/4/2016
Posts: 104
Alright, I found my mistake...

All my wrappers were built with the option: EO.WebBrowser.Runtime.DisableGPU = true to prevent an older issue we experienced with PCs connected to multiple monitors.

In that case using the default setting: EO.WebBrowser.Runtime.DisableGPU = false, allowed this plugin to run just fine.

Whistle
eo_support
Posted: Thursday, October 12, 2017 8:08:17 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,225
Ah..that makes sense. Thanks for the update!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.