From 5f7920db91237eff5ac293fcec88a8033bc312ec Mon Sep 17 00:00:00 2001 From: Lucas Wojciechowski Date: Thu, 11 Aug 2016 08:37:35 -0700 Subject: [PATCH] Increase max glyph atlas size --- debug/chinese.html | 67 ++++++++++++++++++++++++++++++ js/data/bucket/symbol_bucket.js | 33 ++++++++------- js/symbol/glyph_atlas.js | 38 +++++++++-------- js/symbol/glyph_source.js | 2 +- package.json | 4 +- test/js/data/symbol_bucket.test.js | 2 +- 6 files changed, 109 insertions(+), 37 deletions(-) create mode 100644 debug/chinese.html diff --git a/debug/chinese.html b/debug/chinese.html new file mode 100644 index 00000000000..4da63e62185 --- /dev/null +++ b/debug/chinese.html @@ -0,0 +1,67 @@ + + + + Mapbox GL JS debug page + + + + + + + + +
+ + + + + + + + diff --git a/js/data/bucket/symbol_bucket.js b/js/data/bucket/symbol_bucket.js index b4438db3fab..12404232dcf 100644 --- a/js/data/bucket/symbol_bucket.js +++ b/js/data/bucket/symbol_bucket.js @@ -60,12 +60,12 @@ 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' }]); @@ -73,20 +73,23 @@ 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 index 01aabc6e211..93d39b043a1 100644 --- 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 index 6224c1cc532..1b3649d749e 100644 --- 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 index ea78ad46751..f61f2ea5f93 100644 --- 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 index 9838f29e379..c651cab237d 100644 --- 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);