TextGeometry is blurry

Questions
, ,
1

I rendered text with this code:

const renderer = new WebGLRenderer({ antialias: true })
const camera = new PerspectiveCamera(fov, window.innerWidth / window.innerHeight)
const scene = new Scene()

const fontLoader = new FontLoader()
fontLoader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', (font) => {
  const textGeometry = new TextGeometry('Hello World', {
    depth: 0,
    size: 32,
    font,
    curveSegments: 12,
  })
  const mat = new MeshBasicMaterial({
    color: 'black'
  })
  const text = new Mesh(textGeometry, mat)
  scene.add(text)
})
camera.position.set(0, 0, 400)
renderer.render(scene, camera)

It looks like
three

This is blurry compared to html/css

<div style={{ fontSize: 32, fontFamily: 'arial' }}>Hello World</div>

css

How can I make TextGeometry render crisp text?

3

This code produced:
Screenshot 2024-04-27 191714
I tried adjusting the canvas dimension up to 10000 x 10000 and font size up to 1000px but it hasn’t changed much.

4

Using resolution higher than the actual size on the screen can be as bad a using a lower one - browser may blur your rendered frame while trying to downscale it. Make sure the canvas resolution is exactly the same as the element size measured with getBoundingClientRect, takes device pixel ratio into account, and has antialiasing disabled in the WebGLRenderer.

All this being said - geometry-based text rendered into canvas will always look worse than natively rendered browser fonts (even the SDF-based text has its issues, but that one should look already way better since the shader math behind it is working more like SVG rendering, rather than rasterising.)

5

@Dimuthu-2000
Any chance to explain what and why happens in this ChatGPT generated code snippet?