I am trying to work on a small project and I am working on implementing glslify. Because I am using the live server on the client, require() is not defined. I have tried to resolve the issues with solutions such as
I tried to understand how to handle the situation through the docs, but the github readme seems to be a bit difficult to truly understand what I need to do. Any ideas would be greatly appreciated. Thanks!
in javascript you would typically use a tool like vite (rollup, parcel, webpack etc). it brings a server, this is not something an IDE provides or that you set up yourself. your imports can have loaders (url-loader, glslify-loader, etc). nothing like that exists in the esm browser spec. generally you should not use script tags and import maps directly, you’re playing with broken, half finished features.
check out the upcoming threejs docs, they teach you vite: three.js docs
vite is pure esm, no bundling, but it takes care of the rough edges and makes it feature complete. after that glslify is but a plugin away:
npm i vite-plugin-glslify --save-dev
// vite.config.js
import glslify from 'vite-plugin-glslify'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [glslify()]
})
otherwise it just won’t work, your only option then is to execute glslify as a cli tool.
vite works like a charm, and I ended up using vite-plugin-glsl instead of vite-plugin-glslify. It seems to work better, but for some reason vsCode isn’t recognizing any .frag or .vert files. Or glsl for that matter. I feel like there another fundamental piece that I am missing
I ended up bouncing back to glslify (i am not really sure which one to use in my case. The example I am drawing inspo form used glslify though). Here’s a recurring error message when i run i start up the proejct
node_modules/@rollup/pluginutils/dist/es/index.js:1:9: error: No matching export in "browser-external:path" for import "extname"
1 │ import { extname, win32, posix, isAbsolute, resolve } from 'path';
So I was able to get glsl working thank goodness (I appreciate the help!)
Now I am trying to see if I can get WebGL ES to even work for my OS after everything I’ve been reading online. I am using a Mac M1 and I am having a lot of trouble with the vert files compiling. After a lot of different attempts, I was able to get my frag file to compile with this code
I understand that support for WebGL on Mac was deprecated a while back, so if it’s just something that I can’t fix I will sadly understand, but if there are some work arounds like adding certain declarations or my syntax I would definitely love to hear all possible options because I am obviously new to shaders but really want to begin the process of learning and diving into it.
FWIW, here is part of my canvas module and how I am setting up the three.js code