#React Three Fibre and .glsl

4 messages · Page 1 of 1 (latest)

vivid ridge
#

Hey everyone, I'm encountering an issue with r3f and custom GLSL shaders. Whenever I apply a custom shader to a mesh and reference the vertex.glsl and fragment.glsl files, changes don't reflect on the UI until I reload the webpage, as I'm using Vite.
Pls how can I fix the issue

supple pendant
#

Do you mean that the changes in the .glsl file don't re-trigger the hot reload? In that case the issue is in your vite.config.js.

See vite-plugin-glsl, https://www.npmjs.com/package/vite-plugin-glsl

npm
vite-plugin-glsl

Import, inline (and compress) GLSL shader files. Latest version: 1.3.0, last published: 3 days ago. Start using vite-plugin-glsl in your project by running npm i vite-plugin-glsl. There are 5 other projects in the npm registry using vite-plugin-glsl.

vivid ridge
#

@supple pendant
Yes, doesn't trigger the hot reload.
I install the vite-plugin-glsl and follow the doc correctly but the issue still persist

supple pendant
#

Can you see in your dev console the hot reloading happening, when you make an edit and save? If so, then the issue may be that the shader is not getting recompiled (by design to save performance). You will need to find a way to manually retrigger the compile process.

I'm usually using the onBeforeCompile callback to make adjustements to existing shadermaterials and there I've found a little trick to add console.log() if development, and the shader will be recompiled every time.