Adding one textured plane slows/lags the whole environment

Following some popular p5.js tutorials I got a 3d environment of cubes running, I want to add a text element for a little GUI. However, when texture(hovertext) is ran in the draw function, the environment drops from 30fps down to 1-4fps. I am hoping anyone can see if I did something wrong to make it run so poorly.

The code:
https://editor.p5js.org/awunk/sketches/uzy_ltqOT
Uncomment lines 50-58 to display the text.

2 Likes

I think I can only partly answer your question because I don’t know why the texture is slowing down your sketch that much :frowning:

I can offer you two semi-fixes, both shown in this sketch.

A first option is to use text() directly. You still can get the (desired?) effect that the text is “swimming” in your boxes (I like it!). However, as far as I am aware, you cannot really trigger any function (GUI-stuff) by clicking on it (unless you manually determine the bounding boxes of the text element and check whether mouseX and mouseY are inside this box when the mouse is pressed).

A second option is to create a <p> DOM element that sits “on top” of your sketch using the createP() function. The advantage is that you can easily interact with it using the .mousePressed() method (as shown in the sketch; change the color of the text by clicking on it). However, the text does not swim in your boxes as it does when the text is part of the canvas.

4 Likes

Hi, thank you so much for replying. I recall reading somewhere that the text() function doesn’t render in webgl/3d environments without importing a font so I avoided it, but that second option you listed I had no idea about. I’ll try that. Thanks alot.