InstanceGeometry always facing camera

Questions
,
1

I’m trying to make multiple instances of letters taken from a texture.
I managed to make the instancing code itself work but I’m unable to rotate the text to be in front of the camera all the time (like sprites).
http://jsfiddle.net/ddbTy/732/

My goal would be to render thousands of texts by instancing every letter.
Thus I can make each letter/text a different color + different opacity.

My last step is simply rotating the text to face the camera at all time.
Also, is this doable with sprites maybe? I potentially have too many texts that sprite per text is just too slow.

2

I’m also aware that this should work:
mesh.quaternion.copy(camera.quaternion);

But my code also handles the camera manually (calculating it’s projectionMatrix + matrixWorld)
as you can see here: http://jsfiddle.net/hs2jbbo0/139/

So I was wondering if during this sync I can somehow send the shader the rotation?

EDIT:
Here is a full example with the map, zoom in a bit to see the letters: http://jsfiddle.net/hs2jbbo0/222/

3

The code is now very similar to a sprite or billboard implementation: http://jsfiddle.net/ddbTy/780/

BTW: Use material.extensions.derivatives = true; in order to enable derivate functions. If you do this in GLSL, you just get warnings.

4

Thanks!

Did you change something other than the vertex shader?
I saw this example but I’m not quite understand what the vec4(0.0, 0.0, 0.0, 1.0) does.
can you please elaborate?

5

I’ve also change the data of the position and uv attribute. It’s more simple to define these few data directly than working with PlaneGeometry.

This vector is used so we only regard the translation part of the matrix (and not rotation and scale). Maybe this fiddle makes it more clear: http://jsfiddle.net/ddbTy/790/

6

Aha so apparently I did try something like that, but in my map scenario it doesn’t work:
http://jsfiddle.net/hs2jbbo0/232/

As you can see (if you zoom out a bit), the letters are facing the camera but the XY
of the original offset (putting them on the map) is completely off.

Perhaps this has something to do with the fact the the camera and the world are changed independently?
Also, in this scenario I’m also unable to use the flat position + uv vertices somehow, only PlaneGeometry shows something.

7

Unfortunately, I’m not familiar with your Mapbox integration. So I’m not a big help here.

At least you have a working example with plain three.js. I assume there might be a problem in the way you calculate the offset values. But that’s just speculation.