I maintain a MSDF text fork that is updated for WebGPU. And discovered the geometry attributes weren’t updating on text changes. I was resetting buffers on text changes. its ok on WebGLRenderer but not WebGPU / WebGLBackend.
Setting a large enough buffer initially
super();
//THREE.js already polyfills assign.
this._opt = Object.assign({
flipY: true,
buffersLength: 100
}, opt);
this.boundingBox = new Box3();
this.setIndex(new BufferAttribute(new Uint16Array(this._opt.buffersLength * 6), 1));
this.setAttribute('position', new BufferAttribute(new Float32Array(this._opt.buffersLength * 12), 3));
this.setAttribute('uv', new BufferAttribute(new Float32Array(this._opt.buffersLength * 8), 2));
this.update(opt.text);
}
creatTextLayout() {
return new TextLayout(this._opt, this);
}
update(text) {
Modifying the attribute arrays directly
https://github.com/danrossi/three-bmfont-text/blob/dde1a7b801bf7acb2d08ef6f09f4d7b3549fe0bc/src/layout/TextLayout.js#L8 https://github.com/danrossi/three-bmfont-text/blob/dde1a7b801bf7acb2d08ef6f09f4d7b3549fe0bc/src/layout/Vertices.js#L66
Then setting the ranges
}
update(text) {
const opt = this._opt;
opt.text = text;
this.layout = this.creatTextLayout();
//buffer especially indices buffer is a little bigger to prevent detecting glyph length. Set a draw range just in case.
this.setDrawRange(0, this.layout.drawRange);
this.attributes.position.updateRanges = [{ start: 0, count: this.layout.drawRange }];
this.attributes.uv.updateRanges = [{ start: 0, count: this.layout.uvOffset}];
this.index.updateRanges = [{ start: 0, count: this.layout.indexOffset}];
this.index.needsUpdate = true;
this.attributes.position.needsUpdate = true;
this.attributes.uv.needsUpdate = true;
creatTextLayout() {
return new TextLayout(this._opt, this);
}
update(text) {
const opt = this._opt;
opt.text = text;
this.layout = this.creatTextLayout();
//buffer especially indices buffer is a little bigger to prevent detecting glyph length. Set a draw range just in case.
this.setDrawRange(0, this.layout.drawRange);
this.attributes.position.updateRanges = [{ start: 0, count: this.layout.drawRange }];
this.attributes.uv.updateRanges = [{ start: 0, count: this.layout.uvOffset}];
this.index.updateRanges = [{ start: 0, count: this.layout.indexOffset}];
this.index.needsUpdate = true;
Seems to work thankfully.