Using createDerivedMaterial to create a custom picking material for troika text

[bennlich]

Hiya! I'm trying to use troika three utils' createDerivedMaterial to create a custom picking material for my troika text mesh. My first attempt was to render a solid color on the troika text surface by using a trivial custom fragment shader:

const troikaTextMesh = new troikaThreeText.Text()
troikaTextMesh.text = 'some text'

// Create a custom picking material that the GPU picker can use
let troikaMaterial = troikaTextMesh.material
let pickingMaterial = troikaThreeUtils.createDerivedMaterial(troikaMaterial, {
  customRewriter: ({ vertexShader, fragmentShader }) => {
    fragmentShader = `
      uniform vec4 objectId;
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `
    return { vertexShader, fragmentShader }
  }
})

let dummyMesh = new THREE.Mesh(troikaTextMesh.geometry, pickingMaterial)

I was expecting my dummyMesh to appear as a solid red plane where my text was, but I don't see anything :-/

I wonder if I'm missing something obvious? I'd love any tips for how to debug. Thank you!

[lojjic]

I haven't tried it out yet, but it seems like that approach should probably work? The only thing I notice is troikaTextMesh.pickingMaterial isn't defined in your example code. There may be some other details around when/how the uniforms needed by the vertex shader get updated.

[lojjic]

Oh good point, I forgot about curved.

The vertex shader snippet for that is pretty small, wouldn't be too bad to copy?

[bennlich]

Oh, nice! That would work. Okay I'll think about how to do this. Thank you!

I'm using this excellently simple gpu picking lib, and opened an issue to discuss: bzztbomb/three_js_gpu_picking#10

[lojjic]

Ha that's cool! @bzztbomb and I are work colleagues.

[bennlich]

Hah!!!! No way!!

[bzztbomb]

@lojjic Heh, funny to bump into you over here! ;)