R3F exported NodeToy shader is invisible

Questions
, , , , ,
1

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.

no arms or legs visible
no arms or legs visible1886×1030 17.5 KB

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!

2

never knew about @nodetoy/react-nodetoy, … looks nice. but perhaps it’s outdated or something. i would create an issue there on github.

3

No, it is pretty recent. I created an issue and messaged them on Discord, but it seems like it is going to be a while before there is a response.