Implemented Max-Rects packing #15

soimy · 2017-08-10T14:37:48Z

Major improvement:

Implemented Max-Rects packing, which is more efficient than multi-bin-pack.
Add Decimal round option for json simplification and image pixel snapping.

Bug fixed:

Font edge rendering artifacts on msdf output
Glyph bounding-box and x/y offset issue.
Alpha channel for monochrome sdf output.

According to BMFont format, channel 15 means use all rgba channel for glyph. Also, the recent commit on bounding box computing fix present weird positioning on msdfgen output image data, so I revert the first command fix.

SDF distanceRange should be taken into account for padding and baseline computation. Also for accurate and platform dependent metric computation, we should use os2 table sTypoAscender instead of font.ascender.

According to BMFont format, channel 15 means use all rgba channel for glyph. Also, the recent commit on bounding box computing fix present weird positioning on msdfgen output image data, so I revert the first command fix.

Typically set it to 0 for pixel snapping

# Conflicts: # index.js

msdfgen xOffset should be computed from boundBox.left + pad Also x/y offset decimal round have been added for accurate result. (With small bitmap font, decimal >=1 is recommended for accurate result)

arilotter

If we're using the Dimbo font to test instead of Roboto, we should remove the Roboto ttf.

arilotter · 2017-08-10T15:03:15Z

index.js

-      context.fillStyle = '#ffffff';
-      context.fillRect(0, 0, canvas.width, canvas.height);
-      // context.clearRect(0, 0, canvas.width, canvas.height);
+      if(fieldType == "msdf") {


Please use === for equality checks

arilotter · 2017-08-10T15:06:09Z

.eslintrc

@@ -0,0 +1,16 @@
+{


I'd rather use prettier to explicitly format code than eslint to enforce a code style.

arilotter · 2017-08-10T15:07:01Z

index.js

@@ -136,6 +137,7 @@ function generateBMFont (fontPath, opt, callback) {
      },
      kernings: kernings
    };
+    if(roundDecimal != null) RoundAllValue(fontData, roundDecimal);


Use strict equality checking !==

arilotter · 2017-08-10T15:07:37Z

index.js

@@ -248,3 +250,37 @@ function generateImage (opt, callback) {
    callback(null, container);
  });
 }
+
+function RoundAllValue (obj, decimal = 0) {


function names should be camelCased

arilotter · 2017-08-10T15:09:14Z

index.js

@@ -248,3 +250,37 @@ function generateImage (opt, callback) {
    callback(null, container);
  });
 }
+
+function RoundAllValue (obj, decimal = 0) {
+  for (var key in obj) {


use let and const rather than var

arilotter · 2017-08-10T15:13:32Z

index.js

+  for (var key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (obj[key] !== null) {
+        if (typeof(obj[key]) == "object") {


arilotter · 2017-08-10T15:17:32Z

index.js

+}
+
+function isNumeric (n) {
+  return !isNaN(parseFloat(n)) && isFinite(n);


I believe global.isNaN coerces its argument to a number anyways, so the parseFloat call is unnecessary. Additionally, isFinite(NaN) will return false, so I believe use of this function can just be replaced with isFinite.

These codes are based on this solution Validate decimal numbers in JavaScript.
I'm new to js, not sure whether all nodejs version uses ES6. If so we could use Number.isFinite() instead?

arilotter · 2017-08-10T15:17:48Z

index.js

+  if(!("" + num).includes("e")) {
+    return +(Math.round(num + "e+" + scale)  + "e-" + scale);
+  } else {
+    var arr = ("" + num).split("e");


Use let and const

arilotter · 2017-08-10T15:19:58Z

lib/maxrectpacker.js

@@ -0,0 +1,35 @@
+"use strict";


I think this would serve better as a separate node module that we could introduce as a dependency.

I will try to package it in npm module after finished the fine-tuning of these codes. This is my first node.js project, still a lot to learn ;)

arilotter · 2017-08-10T15:20:11Z

index.js

+function RoundAllValue (obj, decimal = 0) {
+  for (var key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (obj[key] !== null) {


Maybe refactor this to

if(typeof(obj[key]) === "object" && obj[key] !== null) { ... } so we don't have to do the null check if it's a number?

Main reason of these artifacts is because msdfgen 1.4 invert both msdf/sdf output channel, so the bg color for msdf atlas should be black now.

This reverts commit 5adb655.

This font will show glyph feather much better, also visual represent of kerning and alignment is more obvious.

soimy · 2017-08-11T04:31:12Z

Code review fixed.
Also find the cause of msdf font edge artifacts, fixed. 🍺

neurolabusc · 2017-08-12T02:39:51Z

@soimy thanks for this terrific PR. The fonts are packed much more efficiently, and the edge artifacts are gone. Fantastic work! I did have one minor issue with running this on my 10.11.6 MacOS computer. Specifically, the executable generated the error Reason: Incompatible library version: msdfgen.osx requires version 21.0.0 or later, but libfreetype.6.dylib provides version 19.0.0. This was not a problem for me, as it was easy to recompile msdfgen. However, to make it easier for others, I would recommend building this on an older machine. I am happy to share my executable. I am very impressed by your work.

soimy · 2017-08-12T06:00:27Z

@neurolabusc msdfgen 1.4 osx binary in this repo is built on freetype v2.8.
In your case, u just need to run brew update && brew upgrade freetype to update your freetype to the newest version.
But you are right, for more user-friendly approach, we need to either:

use private dynamic library with msdf binary, just like the windows version.
use msdfgen as a nodejs native add-on ( built with node-gyp ) as mentioned msdfgen should be included as a native addon #3

soimy · 2017-08-12T07:01:38Z

@neurolabusc Can you help me test the private dynamic library version of the msdf binary?
Just made a commit in my repo soimy/msdf-bmfont-xml@f154f92

neurolabusc · 2017-08-12T17:57:57Z

@soimy the new version generates the error dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib Referenced from: /Users/rorden/Downloads/msdf-bmfont-xml/bin/libfreetype.6.dylib Reason: Incompatible library version: libfreetype.6.dylib requires version 46.0.0 or later, but libpng16.16.dylib provides version 37.0.0. I have sent you an email with a dropbox link to the version I built, maybe using an older SDK and libraries will provide a solution for more users.

neurolabusc · 2017-08-13T18:21:04Z

@soimy your inclusion of the additional libraries works. Thanks again. Future versions of my MRIcroGL and Surfice will benefit from your work.

soimy · 2017-08-14T12:33:12Z

@neurolabusc Happy to hear that! Keep an eye on my dev branch for more feature and fixes.

arilotter · 2017-08-14T13:34:56Z

package.json

@@ -39,6 +39,8 @@
  "dependencies": {
    "canvas": "^1.4.0",
    "map-limit": "0.0.1",
+    "maxrects-packer": "^1.0.2",
+    "js2xmlparser": "^3.0.0",


Do we need this dependency for anything?

@arilotter Sorry about that, it was leaked from another branch (Export xml format)

soimy added 10 commits August 9, 2017 12:45

Update alpha value for sdf format output

0d1a071

According to BMFont format, channel 15 means use all rgba channel for glyph. Also, the recent commit on bounding box computing fix present weird positioning on msdfgen output image data, so I revert the first command fix.

Add eslintrc

5adb655

Fix Yoffset and padding issue.

7d9e2f9

SDF distanceRange should be taken into account for padding and baseline computation. Also for accurate and platform dependent metric computation, we should use os2 table sTypoAscender instead of font.ascender.

Update alpha value for sdf format output

cfe5fc6

According to BMFont format, channel 15 means use all rgba channel for glyph. Also, the recent commit on bounding box computing fix present weird positioning on msdfgen output image data, so I revert the first command fix.

Add new option ‘roundDecimal’

9098b8c

Typically set it to 0 for pixel snapping

Implementation of Max-Rects Packing Algorithm

3cc9e8d

Add missing new font for test-generate.js

f92f4a5

Merge remote-tracking branch 'origin/bin-pack-algorithm' into msdfgen1.4

19cbab0

# Conflicts: # index.js

Match msdfgen 1.4 sdf output

967fa48

Fix for the firstCommand bBox commit

1d4cb1a

msdfgen xOffset should be computed from boundBox.left + pad Also x/y offset decimal round have been added for accurate result. (With small bitmap font, decimal >=1 is recommended for accurate result)

arilotter suggested changes Aug 10, 2017

View reviewed changes

soimy added 4 commits August 11, 2017 11:12

Fix msdf font edge artifacts

dcd6b88

Main reason of these artifacts is because msdfgen 1.4 invert both msdf/sdf output channel, so the bg color for msdf atlas should be black now.

Revert "Add eslintrc"

c692849

This reverts commit 5adb655.

Change testing font to ‘Din-condensed.ttf’

abd83db

This font will show glyph feather much better, also visual represent of kerning and alignment is more obvious.

Code review fix

f26f2de

Use private dylib for msdfgen osx binary

f154f92

Bin packing algorithm moved to npm module

50f971d

Update osx binary’s local dylib

f8554f3

arilotter suggested changes Aug 14, 2017

View reviewed changes

Clean package.json

4f1c68d

arilotter mentioned this pull request Aug 14, 2017

Feature RequestL msdfgen 1.4 #12

Open

soimy closed this Mar 22, 2019

soimy deleted the msdfgen1.4 branch March 22, 2019 07:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implemented Max-Rects packing #15

Implemented Max-Rects packing #15

soimy commented Aug 10, 2017 •

edited

Loading

arilotter left a comment

arilotter Aug 10, 2017

arilotter Aug 10, 2017

arilotter Aug 10, 2017

arilotter Aug 10, 2017

arilotter Aug 10, 2017

arilotter Aug 10, 2017

arilotter Aug 10, 2017

soimy Aug 11, 2017 •

edited

Loading

arilotter Aug 10, 2017

arilotter Aug 10, 2017

soimy Aug 11, 2017

arilotter Aug 10, 2017

soimy commented Aug 11, 2017

neurolabusc commented Aug 12, 2017

soimy commented Aug 12, 2017

soimy commented Aug 12, 2017

neurolabusc commented Aug 12, 2017

neurolabusc commented Aug 13, 2017

soimy commented Aug 14, 2017

arilotter Aug 14, 2017

soimy Aug 14, 2017

Implemented Max-Rects packing #15

Implemented Max-Rects packing #15

Conversation

soimy commented Aug 10, 2017 • edited Loading

arilotter left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soimy Aug 11, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soimy commented Aug 11, 2017

neurolabusc commented Aug 12, 2017

soimy commented Aug 12, 2017

soimy commented Aug 12, 2017

neurolabusc commented Aug 12, 2017

neurolabusc commented Aug 13, 2017

soimy commented Aug 14, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soimy commented Aug 10, 2017 •

edited

Loading

soimy Aug 11, 2017 •

edited

Loading