Shadergraph Vertex shader not applied when rendered in ThreeJS

To simplify the matter I just added an offset to the objects position. In Unity it is offsetted correctly but in ThreeJS it has its normal position. I’m trying to have “swaying leaves” in the end but nothing I feed into the vertex position seems to have an effect

Original Post on Discord

by user 282554301052878848

Hi, can you check with the docs here if anything is missing? Perhaps the ExportShader assetlabel. How does your shader look in the browser?

@marcel :cactus: Thanks for reply. It looks good it just doesn’t apply the “vertex position”. Looking at the image I posted above Unity will apply the Y movement
(Notice how the leaves are moved in the Y-axis in Unity but not in ThreeJS)


by user 282554301052878848

The shader has the label and as you can see the Fragment part is working but not the vertex. I am basically right-clicking the tree and exporting as GLB

by user 282554301052878848

Unity 2022.3.6f1 if it helps

by user 282554301052878848

And then you load the glb in a needle engine project?

Just in a ThreeJS project

by user 282554301052878848

I export it as GLB with the Needle exporter and then just loading it in React Three Fiber with GLTFLoader

by user 282554301052878848

Ok then its expected that shader wont work unfortunately since r3f doesnt load it / doesnt know the extension that has the shader data

You can use Needle Engine scenes together with r3f tho.

There is a template - you can create it with the ExportInfo when you create a new project.

What is your reason to setup your project like this?

For explanation: the shader is compiled to glsl and transformed slightly by our exporter to work in threejs (what unity does doesnt work out of the box in three). When the glb is loaded on needle engine we read the gltf extension containing the shader code (via a gltfloader extension) and then build a threejs RawShaderMaterial.

This can be done in r3f the same way - you would only need to add the shader extension (that Needle Engine has) to the GltfLoader that is used to load your glb

I hope that helps you if you want to try to go that route

Cool I will try this!

I’m using Needle to export my scenes / prefabs so I then can load them however I want individually in my ThreeJS project.
I’m not scripting etc in Unity which is why I’m partially using Needle

by user 282554301052878848

So I cannot export individual prefabs and somehow get the shader data? I need to export entire scenes and let Needle render / do all the work?

by user 282554301052878848

The workflow I am interested in is to take Unity assets and create shaders using ShaderGraph and then export them.
In my external ThreeJS project I want to control them / handle all the scripting necessary

by user 282554301052878848

You can do what you describe, sure. Nothing is tied to Needle Engine and all data is just stored in the gltf in a couple of extensions. Youll find some info about it in the docs and if you have questions feel free to ask.

What do you mean by “scripting in Unity”? You dont need to write any code in unity for that :slightly_smiling_face: in fact: most users dont write any c# code when using Needle Engine

I just mean that Needle saves me the headache of going into Blender to modify Unity assets / shaders in order to get GLTFs into my project. I want to control everything outside Needle and merely use Needles export system to help me tranferring Unity assets to Three. It’s actually amazingly useful :slightly_smiling_face:

by user 282554301052878848

Do you know which extension it is and/or where I can find it? I seem to have a hard time locating it. I also don’t see any traces of the compiled shader in the generated r3f project. I see the glb but not the shader data (searching for uniforms I am using in my vertex shader)

by user 282554301052878848