WebGL polyline tessellation with MapBox-GL-JS

update 09/20015 : test of tesspathy.js library here . Other sources to look:

  1.  http://mattdesl.svbtle.com/drawing-lines-is-hard
  2.  https://github.com/mattdesl/extrude-polyline
  3. https://forum.libcinder.org/topic/smooth-thick-lines-using-geometry-shader

*** original post ***

This post attempted to use pixi.js tessellation of the polyline, this time let’s look on how mapbox-gl-js can do this. In short much more better than pixi.js.

it took slightly more time to get the right routines from mapbox-gl-js and find-out where the tessellation is calculated and drawn. It is actually on two places – in LinBucket.js  and in line shader. FireFox shader editor helped a lot to simplify and extract needed calculations and bring it into the JavaScript (for simplification, note however that shader based approach is the right one as you can influence dynamically thickness of lines, while having precaluclated mesh means each time you need to change thickness of line you have to recalculate whol e mesh and update buffers )

 

// — module require mockups so we can use orig files unmodified
 module = {};
 reqMap = {
‘./elementgroups.js’: ‘ElementGroups’,
‘./buffer.js’ : ‘Buffer’
};
require = function (jsFile) { return eval(reqMap[jsFile]); };

 

   <!-- all mapbox dependency for tesselation of the polyline -->
 <script src="http://www.sumbera.com/gist/js/mapbox/pointGeometry.js"></script>
    <script src="http://www.sumbera.com/gist/js/mapbox/buffer.js"></script>
    <script src="http://www.sumbera.com/gist/js/mapbox/linevertexbuffer.js"></script>
    <script src="http://www.sumbera.com/gist/js/mapbox/lineelementbuffer.js"></script>
    <script src="http://www.sumbera.com/gist/js/mapbox/elementgroups.js"></script>
    <script src="http://www.sumbera.com/gist/js/mapbox/linebucket.js"></script>
    <script src="http://www.sumbera.com/gist/data/route.js" charset="utf-8"></script>
 // -- we don't use these buffers, override them later, just set them for addLine func
 var bucket = new LineBucket({}, {
 lineVertex: (LineVertexBuffer.prototype.defaultLength = 16, new LineVertexBuffer()),
 lineElement: (LineElementBuffer.prototype.defaultLength = 16, new LineElementBuffer())
 });

var u_linewidth = { x: 0.00015 };
// override .add to get calculated points
LineVertexBuffer.prototype.add = function (point, extrude, tx, ty, linesofar) {
    point.x = point.x + (u_linewidth.x * LineVertexBuffer.extrudeScale * extrude.x * 0.015873);
    point.y = point.y + (u_linewidth.x * LineVertexBuffer.extrudeScale * extrude.y * 0.015873);
    verts.push( point.x, point.y);
    return this.index;
};

// — pass vertexes into the addLine func that will calculate points
bucket.addLine(rawVerts,“miter”,“butt”,2,1);

prototype  code posted here

 

This entry was posted in Code, MapBox, OpenSource, Uncategorized, WebGL and tagged , , , , . Bookmark the permalink.

2 Responses to WebGL polyline tessellation with MapBox-GL-JS

  1. Vojtech Klecanda says:

    Dobrý den pane Šumbera,

    jmenuji se Vojtěch Klecanda a jsem diplomant na katedře aplikované
    geoinformatiky a kartografie UK v Praze a píši magisterskou práci na téma:
    Vizualizace historie změn v katastrální mapě. Pro tento účel bych chtěl ve
    zkratce: vytvořit geodatabázi, která bude obsahovat kresbu a popisné
    informace z katastrální mapy, včetně historických změn (od stabilního
    katastru) pro konkretní k.ú. a dále navrhnout a vytvořt geoportál, kde by se
    tato data co nejlépe zobrazovala. Moje myšlenka je webový server s daty a
    Node.js + openlayers + .js doplňky, jako slider, apod.

    Na webu jsem narazil na Váš blog, na kterém popisujete mimo jiné řadu
    nových technologií ze světa web-GIS. Chtěl jsem Vás proto poprosit o radu/
    pomoc. Nyní jsem ve fázi, kdy se snažím zobrazit rastrová data (staré kat.
    mapy) pomocí dlaždic, ale zde mám trochu problém. Pro tailování jsem použil
    gdal2tiles.py, který produkuje tlies v nevím jakém systému (čísla
    neodpovídají těm, které chce openslayers3 s ol.source.OS (openstreetmap)
    tile system (XYZ)). Neni to podle mě ani TMS tile system, protože ani X
    souřadnice nesedí a OSM vs TMS je změna jen v Y souřadnicich. Jiný nástroj
    na XYZ tiles jsem nenašel. A na to, jak nastavit openlayers3 aby zobrazil
    to, co leze z gdal2tiles.py jsem bohužel také nepřišel. Nenapsal byste mi
    prosím svoji zkušenost, jak jednoduše na tuto problematiku? Chtěl bych v
    openlayers pomocí XYZ tiles, nebo TMS tiles zobrazovat staré mapy, které mám
    georeferencované v sjtsk (EPSG:5514).

    Předem moc děkuji a přeji hodně zdaru v Novém roce!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s