R3F exported NodeToy shader is invisible

[mirker21]

I am unable to get my glsl NodeToy dark pink shader to show up on the the arms and legs of the models of the caution symbol and X symbol. The flat dark pink shader that is currently visible is not the one I am talking about, this one that is visible was exported from Blender, while the one that is from NodeToy makes the arms and legs invisible. I do not know OpenGL, so I am at a loss as to what might be wrong.

I have tried using the NodeToyMaterial JSX from @nodetoy/react-nodetoy, the constructor from @nodetoy/three-nodetoy, and just using new ShaderMaterial() and putting the fragment and vertex data into it as arguments.

<skinnedMesh name="X_ArmL" geometry={nodes.X_ArmL.geometry} skeleton={nodes.X_ArmL.skeleton}>
   <NodeToyMaterial data={darkPinkShaderData} />
</skinnedMesh>

import {NodeToyMaterial as NodeToyMaterialConstructor} from '@nodetoy/three-nodetoy'

const newNodeToyMaterial:NodeToyMaterialConstructor = new NodeToyMaterialConstructor({darkPinkShaderData})

  let uniforms = {
    'fogDensity': { value: 0.45 },
    'fogColor': { value: new THREE.Vector3( 0, 0, 0 ) },
    'texture': { value: "https://static.nodetoy.co/static/texture_library/terrazzo/terrazzo_white/2048/Terrazzo_White_Roughness_2048.jpg" },
    'diffuse': { value: new THREE.Vector3( 0.659, 0.031, 0.027 )},
    'emissive': { value: new THREE.Vector3( 0.659, 0.031, 0.027 )},
  };

  const newMaterial = new THREE.ShaderMaterial({
    fragmentShader: darkPinkShaderData.fragment,
    vertexShader: darkPinkShaderData.vertex,
    transparent: false,
    blendColor: 0xA80874,
    name: 'darkPink',
    uniforms: uniforms
  })

If you would like to view the WebGL code that came from NodeToy, I have the fragment, vertex and uniform shaders as separate files in one folder, or a whole .ts file that contains all the shader properties on github.

Also, here is my NodeToy project. I am wondering if somewhere in my setup I went wrong. The shader displays properly in NodeToy, but not in my project.

If you have any ideas as to what I might be able to do to fix this issue, please let me know.

Thank you!

EDIT: Just an observation, the model imported to nodetoy that is shown in the screenshot above has very different uniforms exported compared to a simple cube gltf imported to nodetoy:

Cube.gltf:

[
  {
    "name": "_normalMatrix",
    "type": "mat3",
    "value": {
      "elements": [
        1,
        0,
        0,
        0,
        1,
        0,
        0,
        0,
        1
      ]
    }
  },
  {
    "name": "_viewMatrix",
    "type": "mat4",
    "value": {
      "elements": [
        1,
        0,
        0,
        0,
        0,
        1,
        0,
        0,
        0,
        0,
        1,
        0,
        0,
        0,
        0,
        1
      ]
    }
  },
  {
    "name": "nodeUniform0",
    "type": "texture",
    "value": "https://static.nodetoy.co/static/texture_library/wood/wood_flooring_001/2048/WoodFlooring001_BaseColor_2048.jpg"
  },
  {
    "name": "_worldToObjMatrix",
    "type": "mat4",
    "value": {
      "elements": [
        1,
        0,
        0,
        0,
        0,
        1,
        0,
        0,
        0,
        0,
        1,
        0,
        0,
        0,
        0,
        1
      ]
    }
  },
  {
    "name": "_viewDir",
    "type": "vec3",
    "value": {
      "x": 0,
      "y": 0,
      "z": 0
    }
  }
]

vs the uniforms of the shader for the entire imported mesh you see in the screenshot at the top:

[
  {
    "name": "nodeUniform0",
    "type": "texture",
    "value": "https://static.nodetoy.co/static/texture_library/terrazzo/terrazzo_white/2048/Terrazzo_White_Roughness_2048.jpg"
  }
]