civiltomain
civiltomain

Reputation: 1166

Three.js How to increase canvas-text texture quality

What parameters, modes, tricks, etc can be applied to get sharpness for texts ? I'm going to draw a lot so I cant use 3d text.

I'm using canvas to write the text and some symbols. I'm creating somethinbg like label information.

Thanks

Upvotes: 1

Views: 1023

Answers (1)

Doidel
Doidel

Reputation: 1779

This is no simple matter since you'll run into memory issues with 100k "font textures". Since you want 100k text elements you'll have several difficulties to manage. I had a similar problem too once and tossed together a few techniques in order to make it work. Simply put you need some sort of LOD ("Level of Detail") to make that work. That setup might look like following:

  1. A THREE.ParticleSystem built up with BufferGeometry where every position is one text-position
  2. One "highres" TextureAtlas with 256 images on it which you allocate dynamically with those images that are around you (4096px x 4096px with 256x256px images)
  3. At least one "lowres" TextureAtlas where you have 16x16px images. You prepare that one beforehand. Same size like previous, but there you have all preview images of your text and every image is 16x16px in size.
  4. A kdtree data structure to use a nearestneighbour algorithm with to figure out which positions are near the camera (alike http://threejs.org/examples/#webgl_nearestneighbour)
  5. The sub-imaging module to continually replace highres textures with directly on the GPU: https://github.com/mrdoob/three.js/pull/4661
  6. An index for every position to tell it which position on the TextureAtlas it should use for display

You see where I'm going. Here's some docs on my experiences:

The Stackoverflow post: Display many thousand images in three.js The blog where I (begun) to explain what I was doing: http://blogs.fhnw.ch/threejs/

This way it will take quite some time until you have satisfying results. The only way to make this simpler is to get rid of the 16x16px preview images. But I wouldn't recommend that... Or of course something depending on your setup. Maybe you have levels? towns? Or any other structure where it would make sense to only display a portion of these texts? That might be worth a though before tackling the big thing. If you plan to really work on this and make this happen the way I described I can help you with some already existing code and further explanations. Just tell me where you're heading :)

Upvotes: 1

Related Questions