伪造函数generateTexture（）

Question

In the following example, there is a function called generateTexture() .

Is it possible to draw text (numbers) into the pixel array? Or is it possible to draw text (numbers) on top of that shader?

Our goal is to draw a circle with a number inside of it.

https://forge.autodesk.com/blog/using-dynamic-texture-inside-custom-shaders

UPDATE: We noticed that each circle can't use a unique generateTexture() . The generateTexture() result is used by every single one of them. The only thing that can be customized per object is the color, plus what texture is used.

We could create a workaround for this, which is to generate every texture from 0 to 99, and to then have each object choose the correct texture based on the number we want to display. We don't know if this will be efficient enough to work properly though. Otherwise, it might have to be 0 to 9+ or something in that direction. Any guides on our updated question would be really appreciated. Thanks.

Answer 1

I am able to successfully display text with the following code, simply replace generateTexture() by generateCanvasTexture() in the sample and you should get the result below:

const generateCanvasTexture = () => {

  const canvas = document.createElement("canvas")
  const ctx = canvas.getContext('2d')

  ctx.font = '20pt Arial'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(new Date().toLocaleString(),
    canvas.width / 2, canvas.height / 2)

  const canvasTexture = new THREE.Texture(canvas)

  canvasTexture.needsUpdate = true
  canvasTexture.flipX = false
  canvasTexture.flipY = false

  return canvasTexture
}

Answer 2

It is possible but you would need to implement it yourself. Shaders are a pretty low level feature so there is no way to directly draw a number or a text, but you can convert a given character into its representation as a 2d pixel array.