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);