I am also trying to get troika three text to work with WebGPU but its rendering a white square. I’m not sure why it’s doing that and why it would be different to WebGL.
https://danrossi.github.io/three-troika/test/webgpu_text.html
Here is the built module. If I can’t get this working I have to try and get my customised bmfont working instead.
'orientation',
'glyphGeometryDetail'
);
/**
* @class Text
*
* A ThreeJS Mesh that renders a string of text on a plane in 3D space using signed distance
* fields (SDF).
*/
class Text extends Mesh {
constructor() {
const geometry = new GlyphsGeometry();
super(geometry, null);
// === Text layout properties: === //
/**
* @member {string} text
* The string of text to be rendered.
*/
Real world example with a troika build integrated with webgpu renderer.
The background and logo textures are upside down and I get white square for the text and black square for the background.
https://danrossi.github.io/three-troika/test/webgpu.html
WebGL
https://danrossi.github.io/three-troika/test/
1 Like
Was there a solution to this? I’m running into this as well
Arthur
April 3, 2024, 3:28pm
3
There’s more information on the Troika github .
1 Like
same as me, i created func for create text using troika in webgpu, but the results only white square, not text
There is custom shaders that need to be converted to the node system. I havent figured it out yet. It was quite complex to convert their shaders to the node system.
I’ve been maintaining a fork of an MSDF text system that I also use for scalable button icons. converting SVG to font data. Its textures not drawn I think. It is working for the webgpurenderer
createGeometry() {
return new TextGeometry(this.config);
}
/**
* Setter to set an updated color on the colorNode
*/
set color(val) {
const colorNode = WebGPUtils.createWebGPUColorShader();
this.material.colorNode = colorNode({ color: val });
}
init(config) {
const texture = config.texture;
this.initTexture(texture, config.maxAnisotropy);
this.material = new MeshBasicNodeMaterial({ map: texture, color: new Color(config.color), opacity: 1.0, transparent: true, depthTest: false, side: DoubleSide, alphaTest: 0.0001 });
this.color = this.material.color;
set color(val) {
const colorNode = WebGPUtils.createWebGPUColorShader();
this.material.colorNode = colorNode({ color: val });
}
init(config) {
const texture = config.texture;
this.initTexture(texture, config.maxAnisotropy);
this.material = new MeshBasicNodeMaterial({ map: texture, color: new Color(config.color), opacity: 1.0, transparent: true, depthTest: false, side: DoubleSide, alphaTest: 0.0001 });
this.color = this.material.color;
const opacityNode = WebGPUtils.createWebGPUOpacityShader();
this.material.opacityNode = opacityNode({ texture: texture, color: this.material.color, opacity: this.material.opacity });
this.mesh = this;
const group = this.group = new Group();
this.renderOrder = 1;