Writing text to WebGL

[Drew]

I have been looking into some ways to write text to my 3d project. I
found a crappy workaround where you use strokeFill on a canvas, then
write that image to a scene. So, I took lesson 5 and made these
changes

PhiloGL('lesson05-canvas', {
...
textures: {
src: [ canvas.toDataURL() ]
}
....

drawScene(){
...
.setTexture( canvas.toDataURL() );
}
}

I have also tried setting the dataURL to a `new Image()` and passing
that along as data: { value } in a texture. Do you have a
recommendation for this technique?

[Guang Han]

Hi Drew,

I suggest you look at three.js' text implementation.  It looks like to be cool..

https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/TextGeometry.js
https://github.com/mrdoob/three.js/blob/master/src/extras/core/TextPath.js
https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/TextGeometry.js

Here is the usage example:
http://mrdoob.github.com/three.js/examples/webgl_shadowmap.html

thanks,
--pangwa--

[Drew]

Thanks that looks cool, but I'm not looking to bring in large text
drawing library in from ThreeJS quite yet.

For those looking for the hackish solution this works pretty well.
It's a modification of lesson 6. It ports well to lesson 5 too, since
the cube is the same size. Be sure the canvas is the same size as the
model face you apply it to.

https://gist.github.com/1360805

On Nov 12, 10:58 am, Guang Han <pan...@gmail.com> wrote:
> Hi Drew,
>
> I suggest you look at three.js' text implementation.  It looks like to be
> cool..
>

> https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/...https://github.com/mrdoob/three.js/blob/master/src/extras/core/TextPa...https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/...

[Nicolas Garcia Belmonte]

Hi Drew,

Interesting solution! That would be used to set the text as texture
for some object, right? If you wanted to create a HUD you can also get
the 2d context from the webgl canvas and write text on the canvas
itself, but it couldn't be used as a texture afterwards.

--
Nicolas Garcia Belmonte - http://philogb.github.com/

[Drew]

Yeah I set it as a texture to a model already in the scene. I
actually wanted to create a backdrop to some models already in the
scene.

The problem I encountered is that I was building modules with left
side at 0/0/0, and plane puts it's center at 0/0/0 rather than having
the option to put left/right corner at 0/0/0. So, I have to move the
plane which makes it's center of rotation different than the models
already in the scene.

Long story short, I'm looking forward to some scene rotation!

On Nov 17, 12:38 pm, Nicolas Garcia Belmonte <phil...@gmail.com>
wrote:

> Hi Drew,
>
> Interesting solution! That would be used to set the text as texture
> for some object, right? If you wanted to create a HUD you can also get
> the 2d context from the webgl canvas and write text on the canvas
> itself, but it couldn't be used as a texture afterwards.
>
>
>
>
>
>
>
>
>
> On Sat, Nov 12, 2011 at 8:56 AM, Drew <drew.well...@gmail.com> wrote:
> > Thanks that looks cool, but I'm not looking to bring in large text
> > drawing library in from ThreeJS quite yet.
>
> > For those looking for the hackish solution this works pretty well.
> > It's a modification of lesson 6.  It ports well to lesson 5 too, since
> > the cube is the same size.  Be sure the canvas is the same size as the
> > model face you apply it to.
>
> >https://gist.github.com/1360805
>
> > On Nov 12, 10:58 am, Guang Han <pan...@gmail.com> wrote:
> >> Hi Drew,
>
> >> I suggest you look at three.js' text implementation.  It looks like to be
> >> cool..
>

> >>https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/......