I am currently working on a TypeScript library that heavily utilizes shaders. To streamline the process, I prefer to write the shaders in separate GLSL files rather than adding them to the JS or script file. I was wondering if anyone else has considered using an import hook to load the shader files at runtime?
import {myShader} from "./myshader.glsl"
However, it seems that the Node hook API is not yet well-defined. Do you have any thoughts or suggestions on this matter?
I had a quick look on vit-plugin-glsl but seems to add too much dependencies to the project.
I can not give you an answer to your question, but hope the AI give you a hint how to handle your current problem.
GPT-3:
While it is possible to use import hooks to load GLSL files at runtime, it’s important to note that this feature is currently experimental and may not be well-supported or stable across all environments. Additionally, it may not be the most performant solution.
One alternative approach you could consider is using a build tool such as Webpack or Rollup to bundle your GLSL files into your final JavaScript output. Both of these tools have plugins that can handle loading and processing GLSL files, which can help you avoid the complexity and potential instability of using import hooks.
If you prefer to keep your shaders in separate files and load them at runtime, you may also want to consider using a package such as glslify, which allows you to use require() to load and compile GLSL code at runtime. This approach can be simpler than using import hooks, as it does not require you to use experimental features or custom import hooks.
In summary, while using import hooks to load GLSL files at runtime is an interesting idea, it’s important to be aware of the experimental nature of this feature and potential issues that may arise. Depending on your requirements and preferences, there may be alternative approaches such as using build tools or glslify that can provide more stable and performant solutions.
I guess if you use webpack/rollup or any bundlers supporting dynamic imports, you could rely on those to ensure your shaders will be available on separate chuncks.
Since you are using vite, you can import glsl using query syntax. Ex: import myshader from “./myshader.glsl?raw” . That will just import it as a string as is. You can add some configuration to treat glsl as strings by default.
Hello, after trying different solutions, I’m finally trying to copy the Babylonjs method of building .ts files from .glsl files. However, I’m struggling with npm local stuff. Everything seems fine, but when the build tools run through npx build-tools, nothing happens. On the other hand, running the module with a node command is working as expected.
To understand this configuration point better, I created a bare project on GIT that mimics the same behavior. I know this is not solely a Babylonjs question, but since it’s about the way Babylonjs works internally, it may be interesting to discuss on the forum.
As the author of this great piece of Babylonjs, @RaananW, I’m hoping that you may have an idea of what I’m doing wrong here.
If you want it to be available using npx (i.e. - to have the build-tools command ready) you will need to declare the “binary” for this package. It can be a js file, but still needs to be defined. This is the way build-tools define it - Babylon.js/package.json at master · BabylonJS/Babylon.js · GitHub
After defining it and running npm install, npm will take care of populating the bin directory with the right command.
Hey @RaananW ,
Many hank’s. This is already done. The build-tools is call and “something” run silently, but the code is performing NO action (log or file creation), but opening the file module instead. The code itself is fine because tested with Node command.
Sorry, just making sure I fully understand - when you run npx something the file opens instead of running? And when running node myWonderfulFile.js it works correctly?
What OS are you on? Do you have node associated with .js files on your system?
Oh, and - can you try resetting your repo and adding the following line to the top of your executable .js file? #!/usr/bin/env node
yes correct,
I’m on windows 11, running vs code 1.77.3 and .js is associated with… VSCode…
So i re-associate node with js file and now it’s working. But in the same time, this was already working with my local fork of Babylon JS. Maybe there is a launch specific config to setting up ?
Anyway, thank’s you so much, i really appreciate your help, and i feel so stupid…
