Increase max glyph atlas size

mapbox · Aug 11, 2016 · 5f7920d · 5f7920d
1 parent 9318aaf
commit 5f7920d
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 37 deletions.
diff --git a/debug/chinese.html b/debug/chinese.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+
+    <link rel='stylesheet' href='../dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+
+        .mapboxgl-marker {
+            width: 10px;
+            height: 10px;
+            background: red;
+            margin-top: -5px;
+            margin-left: -5px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='mapbox-gl.js'></script>
+<script src='access-token.js'></script>
+
+<script>
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-70.751953125, 43.38904828677382],
+    style: 'mapbox://styles/mapbox/streets-v9',
+    hash: true
+});
+
+map.addControl(new mapboxgl.Navigation());
+
+map.on('load', function () {
+    map.addSource("points", {
+        "type": "geojson",
+        "data": '/mapbox-gl-test-suite/data/chinese.geojson'
+    });
+
+    map.addLayer({
+        "id": "points",
+        "type": "symbol",
+        "source": "points",
+        "layout": {
+            "icon-image": "{icon}-15",
+            "text-field": "{name}",
+            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
+            "text-offset": [0, 0.6],
+            "text-anchor": "top",
+            "text-allow-overlap": true,
+            "icon-allow-overlap": true
+        }
+    });
+});
+
+</script>
+
+</body>
+</html>
diff --git a/js/data/bucket/symbol_bucket.js b/js/data/bucket/symbol_bucket.js
@@ -60,33 +60,36 @@ var layoutVertexArrayType = new Bucket.VertexArrayType([{
     components: 2,
     type: 'Int16'
 }, {
-    name: 'a_data1',
-    components: 4,
-    type: 'Uint8'
-}, {
-    name: 'a_data2',
+    name: 'a_texture_pos',
     components: 2,
+    type: 'Uint16'
+}, {
+    name: 'a_data',
+    components: 4,
     type: 'Uint8'
 }]);
 
 var elementArrayType = new Bucket.ElementArrayType();
 
 function addVertex(array, x, y, ox, oy, tx, ty, minzoom, maxzoom, labelminzoom, labelangle) {
     return array.emplaceBack(
-            // pos
+            // a_pos
             x,
             y,
-            // offset
-            Math.round(ox * 64), // use 1/64 pixels for placement
+
+            // a_offset
+            Math.round(ox * 64),
             Math.round(oy * 64),
-            // data1
-            tx / 4,                   // tex
-            ty / 4,                   // tex
+
+            // a_texture_pos
+            tx / 4, // x coordinate of symbol on glyph atlas texture
+            ty / 4, // y coordinate of symbol on glyph atlas texture
+
+            // a_data
             (labelminzoom || 0) * 10, // labelminzoom
-            labelangle,               // labelangle
-            // data2
-            (minzoom || 0) * 10,               // minzoom
-            Math.min(maxzoom || 25, 25) * 10); // minzoom
+            labelangle, // labelangle
+            (minzoom || 0) * 10, // minzoom
+            Math.min(maxzoom || 25, 25) * 10); // maxzoom
 }
 
 SymbolBucket.prototype.addCollisionBoxVertex = function(layoutVertexArray, point, extrude, maxZoom, placementZoom) {

diff --git a/js/symbol/glyph_atlas.js b/js/symbol/glyph_atlas.js
@@ -3,15 +3,20 @@
 var ShelfPack = require('shelf-pack');
 var util = require('../util/util');
 
+var SIZE_GROWTH_RATE = 4;
+var DEFAULT_SIZE = 128;
+// must be "DEFAULT_SIZE * SIZE_GROWTH_RATE ^ n" for some integer n
+var MAX_SIZE = 2048;
+
 module.exports = GlyphAtlas;
-function GlyphAtlas(width, height) {
-    this.width = width;
-    this.height = height;
+function GlyphAtlas() {
+    this.width = DEFAULT_SIZE;
+    this.height = DEFAULT_SIZE;
 
-    this.bin = new ShelfPack(width, height);
+    this.bin = new ShelfPack(this.width, this.height);
     this.index = {};
     this.ids = {};
-    this.data = new Uint8Array(width * height);
+    this.data = new Uint8Array(this.width * this.height);
 }
 
 GlyphAtlas.prototype.getGlyphs = function() {
@@ -79,7 +84,7 @@ GlyphAtlas.prototype.addGlyph = function(id, name, glyph, buffer) {
 
     // Increase to next number divisible by 4, but at least 1.
     // This is so we can scale down the texture coordinates and pack them
-    // into 2 bytes rather than 4 bytes.
+    // into fewer bytes.
     packWidth += (4 - packWidth % 4);
     packHeight += (4 - packHeight % 4);
 
@@ -112,12 +117,10 @@ GlyphAtlas.prototype.addGlyph = function(id, name, glyph, buffer) {
 };
 
 GlyphAtlas.prototype.resize = function() {
-    var origw = this.width,
-        origh = this.height;
+    var prevWidth = this.width;
+    var prevHeight = this.height;
 
-    // For now, don't grow the atlas beyond 1024x1024 because of how
-    // texture coords pack into unsigned byte in symbol bucket.
-    if (origw > 512 || origh > 512) return;
+    if (prevWidth >= MAX_SIZE || prevHeight >= MAX_SIZE) return;
 
     if (this.texture) {
         if (this.gl) {
@@ -126,15 +129,14 @@ GlyphAtlas.prototype.resize = function() {
         this.texture = null;
     }
 
-    this.width *= 2;
-    this.height *= 2;
+    this.width *= SIZE_GROWTH_RATE;
+    this.height *= SIZE_GROWTH_RATE;
     this.bin.resize(this.width, this.height);
 
-    var buf = new ArrayBuffer(this.width * this.height),
-        src, dst;
-    for (var i = 0; i < origh; i++) {
-        src = new Uint8Array(this.data.buffer, origh * i, origw);
-        dst = new Uint8Array(buf, origh * i * 2, origw);
+    var buf = new ArrayBuffer(this.width * this.height);
+    for (var i = 0; i < prevHeight; i++) {
+        var src = new Uint8Array(this.data.buffer, prevHeight * i, prevWidth);
+        var dst = new Uint8Array(buf, prevHeight * i * SIZE_GROWTH_RATE, prevWidth);
         dst.set(src);
     }
     this.data = new Uint8Array(buf);

diff --git a/js/symbol/glyph_source.js b/js/symbol/glyph_source.js
@@ -28,7 +28,7 @@ GlyphSource.prototype.getSimpleGlyphs = function(fontstack, glyphIDs, uid, callb
         this.stacks[fontstack] = {};
     }
     if (this.atlases[fontstack] === undefined) {
-        this.atlases[fontstack] = new GlyphAtlas(128, 128);
+        this.atlases[fontstack] = new GlyphAtlas();
     }
 
     var glyphs = {};

diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "gl-matrix": "^2.3.1",
     "grid-index": "^1.0.0",
     "mapbox-gl-function": "^1.2.1",
-    "mapbox-gl-shaders": "mapbox/mapbox-gl-shaders#4d1f89514bf03536c8e682439df165c33a37122a",
+    "mapbox-gl-shaders": "mapbox/mapbox-gl-shaders#de2ab007455aa2587c552694c68583f94c9f2747",
     "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#83b1a3e5837d785af582efd5ed1a212f2df6a4ae",
     "mapbox-gl-supported": "^1.2.0",
     "pbf": "^1.3.2",
@@ -62,7 +62,7 @@
     "istanbul": "^0.4.2",
     "json-loader": "^0.5.4",
     "lodash": "^4.13.1",
-    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#0ed5d988d81072e4b44b02581825979cbcfcf30b",
+    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#304729f1e66645e0d77e8cbd5d7093a496ee033e",
     "memory-fs": "^0.3.0",
     "minifyify": "^7.0.1",
     "nyc": "6.4.0",

diff --git a/test/js/data/symbol_bucket.test.js b/test/js/data/symbol_bucket.test.js
@@ -25,7 +25,7 @@ test('SymbolBucket', function(t) {
     var symbolQuadsArray = new SymbolQuadsArray();
     var symbolInstancesArray = new SymbolInstancesArray();
     var collision = new Collision(0, 0, collisionBoxArray);
-    var atlas = new GlyphAtlas(1024, 1024);
+    var atlas = new GlyphAtlas();
     for (var id in glyphs) {
         glyphs[id].bitmap = true;
         glyphs[id].rect = atlas.addGlyph(id, 'Test', glyphs[id], 3);