BatchedText: billboard material

[upisfree]

Hello again :)

I'm trying to combine BatchedText and your createBillboardMaterial, but I'm not good at shaders so I don't know why it doesn't work. Maybe I need to do some magic matrix stuff, but I can't figure it out which matrix to use :)

Could you please suggest what I'm doing wrong? Thanks again :D

createBillboardMaterial source (it works with usual Text class just fine):
#101 (comment)
https://codesandbox.io/s/createbillboardmaterial-xl6mt?file=/src/createBillboardMaterial.js:0-580

BatchedText + createBillboardMaterial — all texts are fixed in camera view

BatchedText + material without modifications — all texts are in right places, but they don't look at the camera

P. S. It might make sense to add the createBillboardMaterial implementation to the repository, since Text looking always at the camera is a very common request among developers?

[lojjic]

Hmm, that's a tricky one. I'll try to see if I can make the batched matrix transforms work with other custom shader transforms. But you may be right about this being a common option that would belong in the base shader.

[Methuselah96]

I am looking to use BatchedText with billboarding as well, text rendering is the most expensive part of our current three.js scene and would love to use BatchedText to speed things up.

[upisfree]

For anyone needed this, I wrote typescript version of this shader:

import { Camera, Vector3 } from 'three'
import { BatchedText } from 'troika-three-text'

const _position = new Vector3()
const _scale = new Vector3()
const _cameraPosition = new Vector3()

// usage: add Text with `billboardBatchedText.addText(text)`,
//        and then add it to three's parent with `group.add(text)`
class BillboardBatchedText extends BatchedText {
  constructor(public scaleFactor: number) {
    super()
  }

  update(camera: Camera) {
    const texts = this._members.keys()

    camera.getWorldPosition(_cameraPosition)

    texts.forEach((text) => {
      const parent = text.parent

      parent.updateMatrix()
      parent.updateWorldMatrix(false, false)
      parent.getWorldPosition(_position)

      text.position.copy(_position)

      camera.getWorldQuaternion(text.quaternion)

      // size attenuation
      const scale =
        _scale.subVectors(text.position, _cameraPosition).length() * this.scaleFactor
      text.scale.set(scale, scale, scale)
    })
  }
}

export default BillboardBatchedText