Text in 3D, webgl

[scenaristeur]

Hi,
Trying some new experiences with p5js, i'd like to know if there is a way for displaying text in 3D/webgl mode ?
The goal is to show rdf graphs like those i can do there http://smag-smag0.rhcloud.com/DreamCatcher1/ but in 3D.
I 'd like that the text could be displayed near the node, and scale down if the node has a big z.

Thanks. David

[karenpeng]

Hi @scenaristeur There's no text geometry in p5js now, thanks for reminding us of this need.

[dhowe]

To be clear, this ticket refers to 2D text via the 3D renderer, as opposed to 3D text which might also be fun...

[indefinit]

3D text would be pretty awesome indeed. Regarding 2D text, unfortunately it wasn't a priority when we first started working on webgl, but upon second glance, maybe a mixture of 2D and webgl contexts isn't that complicated per this article:http://webglfundamentals.org/webgl/lessons/webgl-text-canvas2d.html

Would someone want to take this feature on in a PR I think it would be a worthy endeavor so we at least have parity with the canvas 2d api.

Sent from my mobile.

On Dec 27, 2015, at 11:23 PM, dhowe notifications@github.com wrote:

To be clear, this ticket refers to 2D text via the 3D renderer, as opposed to 3D text which might also be fun...

—
Reply to this email directly or view it on GitHub.

[jguess]

Yes I am patiently waiting for this feature to become available too ! Thanks for all the great work !

[dhowe]

For 3D, we have the paths/points for each glyph, and I've also written some code to do the triangulation. So perhaps we would just need to think about extruding on the z-axis (at least for a simple demo)

[jguess]

Great thanks for your update !

[jguess]

Still hoping that 3D text will move up the things to do list ! I have a processing project that I would love to port into P5 but the text is the stumbling block. Thanks a lot for your consideration and work !!!

[sandsfish]

bump

The very first thing I did when starting out with p5 this week was spend an evening trying to figure out why I was getting bizarre error messages from inside the text() and textSize() methods. As it turns out, it was because the WEBGL renderer doesn't support them ( aside: not mentioned in the documentation here http://p5js.org/reference/#/p5/text ).

My first project is doing data viz in 3D, which is basically impossible if excluding the ability to put text on the screen.

Happy to hear other workarounds on this. Otherwise, big +100 to whatever combination of renderers allows text while in WEBGL mode.

[jguess]

hmm. webgl seems to supports text. http://webglfundamentals.org/webgl/lessons/webgl-text-html.html

[indefinit]

@jguess in the article you posted, it demonstrates a way to use text via the DOM. If you're looking for functionality like this in the short term, it's already implemented in p5 via the DOM library. Here's a good example of how you might create a span element: http://p5js.org/reference/#p5/createSpan

[scenaristeur]

Got It :
http://smag-smag0.rhcloud.com/DreamCatcher1/
first clic on "Charge demo", then on "Affiche texte"

I made a webgl img from the text, and then put it in the canvas, following
the sphere

2016-03-17 16:19 GMT+01:00 Kevin Siwoff notifications@github.com:

@jguess https://github.com/jguess in the article you posted, it
demonstrates a way to use text via the DOM. If you're looking for
functionality like this in the short term, it's already implemented in p5
via the DOM library. Here's a good example of how you might create a span
element: http://p5js.org/reference/#p5/createSpan

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#1177 (comment)

http://smag0.blogspot.fr

[indefinit]

Cool! @scenaristeur do you want to submit a PR?

[indefinit]

I'm going to close this issue for now for administrative purposes. I've listed text() in our Development checklist here: https://github.com/processing/p5.js/wiki/Development---Checklist

Feel free to submit a PR with implementation or reopen at a later time. Thanks!

[scenaristeur]

Got a solution but there are some problems left .
My solution is used here https://scenaristeur.github.io/graphe/
by the

function constructImage(texte) {...}

(line 165 of this script : https://github.com/scenaristeur/graphe/blob/master/js/outils.js)

it is called by the "createImg()" function of https://github.com/scenaristeur/graphe/blob/master/js/Noeud.js

then displayed by the " texture(particle.img); plane(particle.IMGtaille, 20);", line 148 of the https://github.com/scenaristeur/graphe/blob/master/js/sketch.js

but i'm not a crack and the words sometimes appear a little blured, + not sure with the height/width/font... parameters.

And I'm not sure how & where I could PR . ;-\

[sjorsvanheuveln]

How's the progress going guys? I also require to print text in p5js webgl mode. Would be awesome if this could be added.

[LondonJammo]

Any progress on this?
Also looking for 2D standard rendered text (flat to user/screen) but able to be positioned in 3D space in WEBGL

[stalgiag]

Any progress on this? Also looking for 2D standard rendered text (flat to user/screen) but able to be positioned in 3D space in WEBGL

This feature is available.

[LondonJammo]

Any progress on this? Also looking for 2D standard rendered text (flat to user/screen) but able to be positioned in 3D space in WEBGL

This feature is available.

No, not just rendering text using WebGL. I mean having a 3D scene rendered by WebGL and being able to locate/draw this text at given [x,y,z] coordinates.

[stalgiag]

No, not just rendering text using WebGL. I mean having a 3D scene rendered by WebGL and being able to locate/draw this text at given [x,y,z] coordinates.

This can be done. Use translate() to adjust the drawing position. Here is an example.