P5.js: webgl: text() requires opentype font

[Spongman]

continuing discussion on the opentype/preload requirement for webgl text():

from #3110:

as for adding a default font: it's a good idea, but i'm not sure how easy this would be to implement. do we always preload it before setup()? or do we add some async on-demand loading the first time it's required? do we load it from a fixed location on the internet (what if the machine is disconnected?), do we require it to be located in a specific location relative to the sketch? do we embed it as a base64-encoded binary (~35K for latin script) in the p5.js javascript?

[Spongman]

here's a table showing impact sizes of including the (base64-encoded) Latin subset of Apache Licensed Google Roboto Font in the library:

Format | Compressed | Size (KiB)
-- | -- | --
ttf | no | 46.7
ttf | yes | 24.4
woff2 | no | 20.4
woff2 | yes | 15.5

woff2 would only be available once opentype.js supports it (it doesn't yet).
the compressed size applies when the library is delivered by a web server that compresses static files.

[limzykenneth]

Adding ~20-40 KiB to the library to support default font for webgl text for me doesn't worth the trade off as it is a really specific functionality, it could unnecessarily slow down page load for users not using webgl at all especially over mobile connection.

Can some kind of message be provided either in console or on screen to remind the users to load in the required font? As I understand the original error message isn't helpful so maybe we can provide a better one? We can even suggest a working link to Roboto in the documentation or example so someone can just copy and paste the preload block in, that way if they just want to display some text, they can and they don't need to worry about CORS and such.

That's what I think anyway. 😄

[Spongman]

yeah, i agree. i think solid user education is the better choice.

[stalgiag]

I agree 100%. I think the average user that is working with 3D shouldn't be too deterred by setting up the font with preload. I guess we can take a wait and see approach. Wait till a version with GL text is published, and see if the reference explanation that is in place is enough for users to avoid the problem. It might be a good idea to give a more elaborate explanation here eventually.

[kjhollen]

I am in favor of keeping this open for now, in case someone sees this and comes up with another idea to solve the problem. :) but agree that storing the font in the library is not an ideal solution.

[CubeOfCheese]

As a new user of p5 I was pretty confused about why the text wasn't showing up and I didn't realize the "WEBGL: only opentype fonts are supported" error message was related, which is probably a bit silly of me, but the p5 reference page on text() has an example where no font is loaded at all, so I wrongly assumed it wasn't necessary. I am still a bit confused about how to do this properly so I think a better error message would definitely be helpful. In the meantime though, could someone point me to an example/resource of how to do this properly? Thank you

[Spongman]

@CubeOfCheese if you want to do WEBGL text, the 3rd example on that p5 text() reference page should get you started.

[Spongman]

how about we add this at the top of p5.RendererGL.prototype._renderText() ?

javascript if (!this._textFont || typeof this._textFont === 'string') { console.log('WEBGL: you must load and set a font before drawing text. See `loadFont` and `textFont` for more details.'); return; }

[CubeOfCheese]

That sounds great! And thank you for pointing me in the right direction.

[CubeOfCheese]

I just noticed that while the error message in console says "only opentype fonts are supported" the reference page for text() says "WEBGL: Only opentype/truetype fonts are supported." Whichever is actually the case, both need to be in accordance with each other.

[stalgiag]

I think that with the console message added in this commit, with the slightly updated error message provided by #3910 via @CubeOfCheese's suggestion, and with existing documentation there is enough clarity about the loaded font requirement for WebGL text. It will not make sense to add a default font to the library anytime in the future, so for the time being I am marking this will not fix and closing it for organization sake.

[jtoy]

what about showing the location of a default font to download from as well?