vector-text-atlas
generate meshes for text rendering offline per-character to save space and resassemble the complete mesh at runtime on the client
example
first add a string and save the character data to a file:
var msg = processargv2var vtext =var vt =vtconsole
$ node mesh.js HELLO > data.json
The mesh data is in simplicial complex format. You can plot this data with your favorite 3d engine:
var vtext =var assign =var regl = extensions: 'oes_element_index_uint'var vt =var strings =text: 'HELLO' offsets: -1605text: 'world' offsets: -04-02var fill = vtvar stroke = vtvar opts =frag: `precision highp float;uniform vec3 color;void main () {gl_FragColor = vec4(color,1);}`vert: `precision highp float;attribute vec2 position, offset;uniform float aspect;void main () {gl_Position = vec4((position+offset)*vec2(1,aspect)*0.2,0,1);}`uniforms:{return contextviewportWidth / contextviewportHeight}depth: mask: false enable: falsevar draw =fill:stroke:reglframe {reglclear color: 0001drawdraw}
api
var vtext = require('vector-text-atlas')
var vt = vtext(opts)
opts.data
- set character mesh dataopts.attributes
- an object mapping per-vertex attributes to typesopts.canvas
- canvas constructor or instance. required to add strings in non-web environmentopts.vtext
- userequire('vectorize-text')
. required to add stringsopts.cdt
- userequire('cdt2d')
. required to add strings
If you do not need to add strings with vt.add()
in the browser because you
have foreknowledge to generate the character set ahead of time offline, you
don't need to specify opts.vtext
nor opts.cdt
.
Attributes are set for each vertex and can be set when specifying a string in
fill()
or stroke()
. Attribute types are:
'float'
'vec2'
,'vec3'
,'vec4'
'mat2'
,'mat3'
,'mat4'
'int8'
,'int16'
,'int32'
'uint8'
,'uint16'
,'uint32'
vt.add(str)
Generate mesh data for the characters in the string str
.
var data = vt.data(format)
Per-character mesh data. You can save this data to a file and load it via
opts.data
.
The values of format
are:
'array'
- convert typed arrays to arrays (to more easily convert to json)'typearray'
- return in values as native typed arrays
var mesh = vt.fill(strings)
Return simplicial complex for the triangles and vertices that fill an array of
strings
.
Each string object str
in strings
:
str.text
- string to renderstr.position
- position of the string
Any configured attributes should be set on the str
object.
var mesh = vt.stroke(strings, opts)
Return simplicial complex for the triangles and vertices that stroke the border
region of an array of strings
.
Each string object str
in strings
:
str.text
- string to renderstr.position
- position of the string
Any configured attributes should be set on the str
object.
Optionally set:
opts.width
- border width. default: 0.04
todo
- mitre joins
install
npm install vector-text-atlas
license
BSD