'include' : invalid directive name

[boythl]

include ../func/rand.glsl

when i use this code in a glsl file, run it, f12, chrome show me "'include' : invalid directive name"

what's the problem? thanks！

[UstymUkhman]

Hi! You probably haven't initialized this plugin correctly... can I see your vite.config file & package.json? Thanks.

[boythl]

thank u!

vite.config.ts: import glsl from 'vite-plugin-glsl' export default defineConfig({ plugins: [ glsl({ include: [ // Glob pattern, or array of glob patterns to import '/*.glsl', '*/.wgsl', '/*.vert', '/*.frag', '*/.vs', '/*.fs', ], exclude: undefined, // Glob pattern, or array of glob patterns to ignore warnDuplicatedImports: true, // Warn if the same chunk was imported multiple times defaultExtension: 'glsl', // Shader suffix when no extension is specified compress: true, // Compress output shader code watch: true, // Recompile shader on change root: '/', }), ], })

package.json: { "name": "symbols", "version": "0.0.1", "private": true, "scripts": { "serve": "vue-cli-service serve", "dev": "vite", "build": "vite build", "lint": "vue-cli-service lint", "prettier": "prettier --config .prettierrc.js --write src/", "publish": "npm publish ./dist" }, "dependencies": { "three": "^0.154" }, "devDependencies": { "@rollup/plugin-alias": "^4.0.3", "@types/node": "^18.14.2", "babel-eslint": "^10.1.0", "core-js": "^3.29.0", "esbuild": "^0.18.11", "eslint": "^8.35.0", "prettier": "^2.8.4", "vite": "^4.4.2", "vite-plugin-glsl": "^1.1.2" }, "browserslist": [ "> 5%", "last 2 versions", "not dead", "not IE 11", "supports es6-module" ], "type": "module" }

[UstymUkhman]

I see.., the problem seems to be related on how you've defined global patterns to import your shaders. Eg.: /*.glsl will ignore glsl files in any directory other then the root. Same for .frag and .vs. But other patterns have similar problem: they honor directories in your project, but not file names (.wgsl, .vert, .fs & .vs). Since seems like you're using default options anyway, my advice is to drop everything from the configuration object and keep it as simple as this:

plugins: [glsl()],

Otherwise, feel free to copy default options from here. Let me know if that worked, thanks!

[boythl]

the global patterns copy from default options, that's right in my config. i'm sorry, i didn't reply in 'code'.

glsl({
            include: [
                // Glob pattern, or array of glob patterns to import
                '**/*.glsl',
                '**/*.wgsl',
                '**/*.vert',
                '**/*.frag',
                '**/*.vs',
                '**/*.fs',
            ],
            exclude: undefined, // Glob pattern, or array of glob patterns to ignore
            warnDuplicatedImports: true, // Warn if the same chunk was imported multiple times
            defaultExtension: 'glsl', // Shader suffix when no extension is specified
            compress: true, // **compress,  that's what i need!**
            watch: true, // Recompile shader on change
            root: '/',
        }),

this is the real code in my file. however, thanks your suggestion, i will try it!

[boythl]

i use defaut glsl(), and take me the same error.

this is the error:

dev.js:8 THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
Program Info Log: Fragment shader is not compiled.

FRAGMENT

ERROR: 0:33: 'include' : invalid directive name

  28: vec4 LinearTosRGB( in vec4 value ) {
  29:   return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
  30: }
  31: vec4 linearToOutputTexel( vec4 value ) { return LinearToLinear( value ); }
  32: 
> 33: #include  ./func/rand.glsl
  34: 
  35: void main( ) {      
  36:   gl_FragColor = vec4(1.);
  37: }

and this is my code:

#include  ./func/rand.glsl

void main( ) {    
  gl_FragColor = vec4(1.);
}

this is my rand.glsl:

float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

[UstymUkhman]

Thanks @boythl! Ok, things get really interesting now. :) First I thought it might be due to a double spacing between the #include directive and a path to your shader, but I just tried that and it seems to be handled properly. Unfortunately, I still don't have any clue about the cause of this error, so I need to ask you to send me a link to a minimal reproducible example with this issue, as well as the node version you're using. I hope that will help me to figure out what's going on... Thanks again!

[boythl]

ok! node: 16.15.1 (Currently using 64-bit executable) three.js: "^0.154" vite: "^4.4.2",

[UstymUkhman]

Good, thx! Can you send me a minimal reproducible example as well, please?

[boythl]

ok! i made it. e-mail

[UstymUkhman]

ustym.ukhman@gmail.com

[boythl]

Symbols.zip haha, i can upload it directly...

[UstymUkhman]

I thought this issue could be caused because of the use of ?raw suffix, but when I tested it myself, I got a different error so I didn't think it was worth mentioning it. :) Anyway.., just import your shaders like this and you should be fine:

import vs from './vsNormal.vs'
import fs from './firewall.glsl'

If you've found this plugin any useful, please consider smashing a star button. :) Thanks!

[boythl]

I thought this issue could be caused because of the use of ?raw suffix, but when I tested it myself, I got a different error so I didn't think it was worth mentioning it. :) Anyway.., just import your shaders like this and you should be fine:

import vs from './vsNormal.vs'
import fs from './firewall.glsl'

If you've found this plugin any useful, please consider smashing a star button. :) Thanks!

yes, it works well!

very useful plugin, i like it, thank u very much!