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() ?

  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?

[ffd8]

FYI, this topic comes up regularly in both a design school context (+ livecoding workshops), because type + WEBGL = 🤩 !

While it's quick to demonstrate preloading assets, it's not always easy to setup assets or find a CORS friendly remote path. With text() working out of the box sans custom font, it would be helpful for the same to work when switching to WEBGL. This is usually the main gotcha (besides adjusting 0, 0 coords).

With p5.min.js being ~814kb, might an extra 10-20kb be worth the ease for beginners and VJs (yeaah, special case)?
It would be amazing if the browser could dynamically base64 a system font..!? Of course the smaller the font, the fewer glyphs from global charset.. but I'm optomistic a minimal open-source font could be found (slightly larger than this) to include?

Here's a WEBGL bas64 font loading demo

[dhowe]

I agree with @jtnimoy if we can host a simple compatible font (or perhaps a few for different character sets). Perhaps they can simply be added to this repo and accessed via raw.github.com/... (need to test)

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