Apply custom shaders

[protectwise]

Apply custom shaders

[lojjic]

Responded here: https://discourse.threejs.org/t/troika-3d-text-library-for-sdf-text-rendering/15111/21?u=lojjic

If you run into specific issues with it, feel free to reopen this, with details.

[AlainBarrios]

Responded here: https://discourse.threejs.org/t/troika-3d-text-library-for-sdf-text-rendering/15111/21?u=lojjic

If you run into specific issues with it, feel free to reopen this, with details.

I have applied the custom shader, but glsl error appears, I really don't know if I am doing it correctly, could you guide me?

textMesh.text = "Hello world!";
textMesh.font =
        "https://rawcdn.githack.com/AlainBarrios/Fonts/c0615b21ea752212b7de8bca4cff49b85554393d/WILD WORLD.otf?raw=true";
textMesh.fontSize = 0.25;

textMesh.material = new THREE.ShaderMaterial({
    uniforms: textMesh.material.uniforms,
    vertexShader: vs,
    fragmentShader: fs
});

textMesh.position.z = -1;
textMesh.anchorX = "center";
textMesh.anchorY = "top-baseline";
textMesh.color = 0x9966ff;

 uniform float uTime;
 uniform sampler2D uTexture;
 uniform sampler2D diffuse;
 
 varying vec2 vUv;

 void main(){
   vec4 text = texture2D(uTexture, vUv);
   
   gl_FragColor = text;
 }

[lojjic]

Thanks for the code. I'm still unsure of what exactly you're trying to accomplish, since you appear to be attempting to grab the previous material's uniforms for some reason? You shouldn't need to do that. If all you're trying to do is use your own ShaderMaterial, you can just use it like you would for any other mesh:

textMesh.material = new THREE.ShaderMaterial({
    uniforms: {
        // your uniforms here...
        uTime: {value: 0},
        uTexture: {value: myTexture},
        //etc...
    },
    vertexShader: vs,
    fragmentShader: fs
});

Then you can update your uniforms like normal

textMesh.material.uniforms.uTime = Date.now() - epoch;

Just be sure you do that by requesting textMesh.material, not the original ShaderMaterial instance you created, as they'll be different instances. All of TextMesh's own uniforms will be seamlessly added behind the scenes so you should never have to worry about them.

Does that help?