How to customize the shader for text?

[luciedefraiteur]

Hey, i need to use a specific svg matrix to transform the text instead of working with the regular camera from threejs, how can i achieve that?

Should i override the base material first and how to not touch parts that will be used by troika?

[lojjic]

Generally speaking, you can assign text.material = myShaderMaterial and as long as your shader uses the standard Three.js attributes (position, uv, etc.) it should "just work". It may depend on exactly what you want to achieve, however, so I'd need more details.

I'm not sure what "a specific svg matrix to transform the text" means, but if it's truly just a different matrix maybe you want to just assign that to the object's matrixWorld instead of messing with custom shaders?

[luciedefraiteur]

its a 2x3 matrix that transform things in 2D, so no exactly i want to avoid using matrixWorld and stuff,

https://pastebin.com/Ggk6UsKq

my shader for example for rendering polygons, looks exactly like that, i d like text from troika to use same kind of matrices the same way.

[lojjic]

At first glance I think your shader should work ok, except that instead of the input:

attribute vec2 a_position;

it will need to use the standard Three.js position geometry attribute:

attribute vec3 position;

(position.z will always be 0)

[peterqliu]

I'm also wondering about the limits of using custom ShaderMaterials, particularly around getting text/outline colors to show properly. Using some naive vertex/frag shaders, I'm getting the right text but no colors, along with:

THREE.WebGLProgram: gl.getProgramInfoLog() WARNING: Output of vertex shader 'vTroikaGlyphColor' not read by fragment shader

Looks like the material derivation process isn't getting the frag shader to ingest vTroikaGlyphColor. Then I tried directly plugging in:

varying vec3 vTroikaGlyphColor;

void main() {
    gl_FragColor = vec4(vTroikaGlyphColor, 1.0);
}

but that doesn't work either. Is there some shader boilerplate we need to put in so that the DerivedMaterial comes out all wired up properly?

[lojjic]

@peterqliu That vTroikaGlyphColor warning looks like it may be a bug, but you should be able to ignore the warning unless you're trying to use the (undocumented) colorRanges feature.

As for the main text color, it should just use whatever you set gl_FragColor to.

Outline colors I can see not working if you're trying to set them via text.outlineColor, since that assumes the material has a color property like Three's builtin materials do. That could be tricky, I'll have to think about it.

[peterqliu]

As for the main text color, it should just use whatever you set gl_FragColor to.

👍 I can definitely code it there, though I'm trying to hew to the API as closely as possible. Ideally the shader would populate that with whatever I originally set myText.color to.

Broadly, I'm game to structure my ShaderMaterial in whatever necessary way so that I can just drop it in, and use the rest of the Text() API as if it had a builtin material.

[crissin]

i noticed this same error when setting castShadow to true

[luciedefraiteur]

Well me the solution was to make my own graphic library and my own text shader lol

[lojjic]

Thanks for the followup. Is your solution something you can share? I'm curious to see your approach.

[luciedefraiteur]

well i did use this one https://github.com/astiopin/webgl_fonts
and i did personalize it so i can have custom attributes on each letters that would set color for example, i ll submit an open source minimalistic 3D library a bit later right now i need to handle some stuff like VR support for controllers, and other little things like cloning transforms/meshes/materials/geometries etc...