P5.js: Rendering text (WEBGL on Android)

Created on 23 Mar 2020  路  2Comments  路  Source: processing/p5.js

Most appropriate sub-area of p5.js?

  • [ ] Color
  • [ ] Core/Environment/Rendering
  • [ ] Data
  • [ ] Events
  • [ ] Image
  • [ ] IO
  • [ ] Math
  • [x] Typography
  • [ ] Utilities
  • [x] WebGL
  • [ ] Other (specify if possible)

Details about the bug:

Using the text() function in a WEBGL canvas does not work on Google Chrome on my Android mobile phone.
Running the example sketch without the text('A', 0, 0); line, or running on the PC, it works as expected.

Also, the 3D Geometries WEBGL example works fine on the same phone.

The try-catches were added to the example sketch so the error would appear in the "console" window of the p5 editor page.

When running for the first time, the error happens when rendering the text:

DRAWING ERROR: Failed to execute 'useProgram' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLProgram'.
TypeError: Failed to execute 'useProgram' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLProgram'.
  at _main.default.Shader.useProgram (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:99060:16)
  at _main.default.Shader.bindShader (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:98934:20)
  at _main.default.RendererGL._renderText (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:100457:16)
  at _main.default.RendererGL._main.default.Renderer.text (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:60711:22)
  at p5._main.default.text (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:86021:57) at draw (about:srcdoc:84:5)
  at p5._main.default.redraw (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:65953:19)
  at _draw (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:58869:25)

Then, when trying to re-run the sketch, the createCanvas function stops working.

createCanvas: Error creating webgl context
Error: Error creating webgl context
  at _main.default.RendererGL._initContext (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:97427:23)
  at new _main.default.RendererGL (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:97283:18)
  at p5._main.default.createCanvas (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:62457:46)
  at setup (about:srcdoc:63:5) at _setup (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:58811:27)
  at _runIfPreloadsAreDone (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:58752:27)
  at p5._decrementPreload (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:58761:27)
  at https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:85901:20
  at https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:51698:26
  at XMLHttpRequest.request.onload (https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:51340:28)


Phone screenshot

p5_android_error

bug

Most helpful comment

Thanks for the response!
It really seems to be a problem on my phone. I thought it could be a bug in the library since it only happened when rendering text, while the geometries work.
But I tried on another phone with Android 9 and the sketch also works.

Sorry for the non-issue, but at least it will be registered, if anyone else runs at this problem.

All 2 comments

Hi @matheusb-comp thanks for the well-written issue!

I am unable to replicate on:

  • Android 10 QKQ1.190825.002
  • Chrome 80.0.3987.149

I see that you are using a relatively old Android OS. I am not sure if this is the issue but seems like the biggest difference between our phones.


Here is a screenshot of your sketch:

Screenshot_2020-03-23-11-14-51-843_com android chrome

Thanks for the response!
It really seems to be a problem on my phone. I thought it could be a bug in the library since it only happened when rendering text, while the geometries work.
But I tried on another phone with Android 9 and the sketch also works.

Sorry for the non-issue, but at least it will be registered, if anyone else runs at this problem.

Was this page helpful?
0 / 5 - 0 ratings