{"_id":"@croquet/hybrid-msdf-text","_rev":"6-2902ee6400ebcd3efff7197b131bc487","name":"@croquet/hybrid-msdf-text","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.1":{"name":"@croquet/hybrid-msdf-text","version":"1.0.1","description":"renders BMFont files in ThreeJS with hybrid MSDF and bitmap renderer","main":"index.js","license":"MIT","author":{"name":"Croquet Corporation","email":"admin@croquet.io"},"publishConfig":{"access":"public"},"dependencies":{"quad-indices":"^2.0.1","three-buffer-vertex-data":"^1.0.0"},"keywords":["bmfont","bitmap","font","text","three","threejs","quad","quads","batch","render","fonts","layout","word","wrap","word-wrap","word-wrapping","wrapping","glyph","glyphs"],"repository":{"type":"git","url":"git://github.com/croquet/hybrid-bmfont-text.git"},"gitHead":"e28185f78826f47dee95ad8b323baae1415e3445","bugs":{"url":"https://github.com/croquet/hybrid-bmfont-text/issues"},"homepage":"https://github.com/croquet/hybrid-bmfont-text#readme","_id":"@croquet/hybrid-msdf-text@1.0.1","_nodeVersion":"16.4.0","_npmVersion":"8.4.0","dist":{"integrity":"sha512-jGg1b39sGyUx1BzICwphsgzBGm/7B3xDlaicoWCtxhEZqzbhKlHd0ZIOXmpWAHCxKxQU5arG0rVSjxvkeQEwsg==","shasum":"74b07ebc14bf00fd3ae144dafaf2826a783c554c","tarball":"https://registry.npmjs.org/@croquet/hybrid-msdf-text/-/hybrid-msdf-text-1.0.1.tgz","fileCount":10,"unpackedSize":26927,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR9/XvxnOaoZojCbH0EkqeFPi6fLB9cUFXFEE2TYuAPwIgUgIf2ygwVXIR/ptvGDbjf8tZjPMdj5yVQStpIuSB7lI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYt72ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlpw/+Jw6O8IJorfoSMq7dLhu9zdMJVfo9xMN/gepYSy1ifa5iJzF3\r\nVCIizyb5yweaq0uJxtWq7mAUH0kLRm4XB+1gRS8ARa56uuUj/xTlD3NQqmZo\r\nMSN9+je7Oz030Fv87nnjDPq+65vpPLpz7pQ7++x6MIp1C1FmYBigTbjQ8Rtf\r\npayTbsnqmmOtU2mfba+5cVngAFO0TNQq/5NkMvpQ1viQYqCMjsifv0K4LQZg\r\n/nnJ6p9fz+9hi4O15+fCtuNCVB1G+OZUQ5lQhgBLB+0OLOnbOtpXYuoDwy/j\r\njjT2XLI73HIADXjDePR2ebf6/DdBnBhbJj+Gd0Z1/9YG2faeVqlFyhG/212z\r\nJok5ar05MdJACe1AM+sfmuFKLW2XazSEg130yieP73J5TVjvqBRF0MuJbhz8\r\nt/u3OrJxLW4uNnZTWcH0v10ydUgCYzVWdjAPngpEELeYdXBwTz0o3AmBMx1o\r\nxgmiangDVXuHRsFimX+gTrk925oVtlvJoKulBu+SYfXvg5iwfYW0trEcRZ0g\r\nPSSZw0+YwbyVQSLfcWBnPi/E9tHe4dVaOvxOWdaC+ebQpElmNnbDp5kaym6O\r\nd5l8LFJyDieEglZx2LWOn9QWoxOLAgM+NIBN4iC/nd5K5SYHeycp019RJWuG\r\nR0yU92wvsVJb+bgygdkyzmaw+vRheKI8LZo=\r\n=4cEX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"croquet","email":"admin@croquet.io"},"directories":{},"maintainers":[{"name":"croquet","email":"admin@croquet.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hybrid-msdf-text_1.0.1_1650646773920_0.8545323461275225"},"_hasShrinkwrap":false},"2.0.0":{"name":"@croquet/hybrid-msdf-text","version":"2.0.0","description":"renders BMFont files in ThreeJS with hybrid MSDF and bitmap renderer","main":"index.js","license":"MIT","author":{"name":"Croquet Corporation","email":"admin@croquet.io"},"publishConfig":{"access":"public"},"dependencies":{"quad-indices":"^2.0.1","three-buffer-vertex-data":"^1.0.0"},"keywords":["bmfont","bitmap","font","text","three","threejs","quad","quads","batch","render","fonts","layout","word","wrap","word-wrap","word-wrapping","wrapping","glyph","glyphs"],"repository":{"type":"git","url":"git://github.com/croquet/hybrid-bmfont-text.git"},"gitHead":"6fd787963f396b8e768745984e1921c2f615987f","bugs":{"url":"https://github.com/croquet/hybrid-bmfont-text/issues"},"homepage":"https://github.com/croquet/hybrid-bmfont-text#readme","_id":"@croquet/hybrid-msdf-text@2.0.0","_nodeVersion":"19.4.0","_npmVersion":"9.2.0","dist":{"integrity":"sha512-QJmC+1dIDauuEgM9Yeq/7HoVCYL0Fg3cxKE73hZAHzawaXjYteVXCL6i4h8gUzn6d966sIfoCNWxGKwGV9IY1g==","shasum":"fe000f1a2e5a3f34d37e6e6e038c4aba2d75fcda","tarball":"https://registry.npmjs.org/@croquet/hybrid-msdf-text/-/hybrid-msdf-text-2.0.0.tgz","fileCount":10,"unpackedSize":25293,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzDP4bP4zXh6ewYmyeibIHgV5TVhfo9B7BNBjN1aKhkAIgUaSngM6jHX4RekIuls4DNOo+QMlsKM2OZFMlVS/Nbmg="}]},"_npmUser":{"name":"croquet","email":"admin@croquet.io"},"directories":{},"maintainers":[{"name":"croquet","email":"admin@croquet.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hybrid-msdf-text_2.0.0_1690498824775_0.6288227781833624"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-22T16:59:33.840Z","1.0.1":"2022-04-22T16:59:34.208Z","modified":"2024-02-16T04:44:12.172Z","2.0.0":"2023-07-27T23:00:24.962Z"},"maintainers":[{"email":"aran@croquet.io","name":"aranlunzer"},{"email":"Yoshiki.Ohshima@acm.org","name":"yoshikiohshima"},{"email":"vanessa@codefrau.net","name":"codefrau"}],"description":"renders BMFont files in ThreeJS with hybrid MSDF and bitmap renderer","homepage":"https://github.com/croquet/hybrid-bmfont-text#readme","keywords":["bmfont","bitmap","font","text","three","threejs","quad","quads","batch","render","fonts","layout","word","wrap","word-wrap","word-wrapping","wrapping","glyph","glyphs"],"repository":{"type":"git","url":"git://github.com/croquet/hybrid-bmfont-text.git"},"author":{"name":"Croquet Corporation","email":"admin@croquet.io"},"bugs":{"url":"https://github.com/croquet/hybrid-bmfont-text/issues"},"license":"MIT","readme":"# Hybrid MSDF and bitmap text\n\nDerived from [three-bmfont-text](https://github.com/Jam3/three-bmfont-text) but modified to support a hybrid MSDF approach so that text look fine from near and far. That is, when a character is magnified, it looks totally crisp, and when a character is minified, it is anti-aliased.\n\nThe package is designed to work best with Croquet Worldcore, but the implementation is generally usable for any Three.js based application.\n\nLoading font is done something like this with [load-bmfont](https://www.npmjs.com/package/load-bmfont):\n\n```js\nlet path = \"./assets/fonts\";\nlet image = `${path}/${name}.png`;\n\nreturn new Promise((resolve, reject) => {\n    loadFont(`${path}/${name}.json`, (err, font) => {\n        if (err) throw err;\n        let loader = new THREE.TextureLoader();\n        loader.load(\n            image,\n            (tex) => {\n                let preprocessor = new MSDFFontPreprocessor();\n                let img = new Image(font.common.scaleW, font.common.scaleH);\n                let canvas = document.createElement(\"canvas\");\n                canvas.width = font.common.scaleW;\n                canvas.height = font.common.scaleH;\n                let ctx = canvas.getContext(\"2d\");\n                ctx.drawImage(tex.image, 0, 0);\n                let inBitmap = ctx.getImageData(0, 0, canvas.width, canvas.height);\n                let outImage = preprocessor.process(font, inBitmap.data);\n                ctx.putImageData(outImage, 0, 0);\n\n                let processedTexture = new THREE.Texture(outImage);\n                processedTexture.minFilter = THREE.LinearMipMapLinearFilter;\n                processedTexture.magFilter = THREE.LinearFilter;\n                processedTexture.generateMipmaps = true;\n                processedTexture.anisotropy = 1; // maxAni\n\n                img.src = canvas.toDataURL(\"image/png\");\n                img.onload = () => {\n                    processedTexture.needsUpdate = true;\n                };\n\n                this.fonts[name] = {font, texture: processedTexture};\n                resolve(this.fonts[name]);\n            },\n            null,\n            () => {\n                reject(new Error(`failed to load font: ${name}`));\n            });\n    });\n});\n```\n\nand updating geometry can be done:\n\n```js\nlet TextLayout = getTextLayout(THREE);\nlet layout = new TextLayout({font});\nlet glyphs = layout.computeGlyphs({font, {x: 0, y: 0, string: \"Test\", style: \"blue\"}});\nlet extent = {width: 600, height: 600};\n\nthis.textGeometry.update({font, glyphs});\nlet bounds = {left: 0, top: 0, bottom: extent.height, right: extent.width};\nthis.fonts[fontName].material.uniforms.corners.value = new THREE.Vector4(bounds.left, bounds.top, bounds.right, bounds.bottom);\n```\n\n## License\n\nMIT, see LICENSE.md.\n","readmeFilename":"README.md"}