Using glslify with node.js live server?

Questions
,
1

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

<script type="module" src="https://unpkg.com/glslify@7.1.0/browser.js"></script>

& also

<script type="importmap">
    {
            "imports": {
                "glslify": "https://unpkg.com/glslify@7.1.0/index.js"

          }
        }

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!

2

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.

3

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

4

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';
5

There are extensions for glsl but that’s merely an editor thing

1 Like
6

As for the error, seems node related. I’m sure you’ll find something when you Google it.

1 Like
7

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

#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform float progress;
uniform sampler2D texture1;
uniform vec4 resolution;
varying vec2 vUv;
varying vec3 vPosition;

float PI = 3.141592653589793238;

void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

however this is my vertex shader file and I am getting so many errors

uniform float time;
varying vec2 vUv;
varying vec3 vPosition;
uniform sampler2D texture1;

float PI = 3.141592653589793238;

void main() {
    vUv = uv;
    vPosition = position;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_PointSize = 1000.0 * (1.0 / -mvPosition.z);
    gl_Position = projectionMatrix * mvPosition;
}

Here are the errors

Screenshot 2023-02-13 at 7.16.29 PM
Screenshot 2023-02-13 at 7.16.29 PM1606×994 93 KB

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

    const material = new THREE.ShaderMaterial({
        extensions: {
            derivatives: "#extension GL_OES_standard_derivatives : enable"
        },
        side: THREE.DoubleSide,
        uniforms: {
            time: { value: 0 },
            resolution: { value: new THREE.Vector4() }
        },
        transparent: true,
        fragmentShader: fragment,
        vertexShader: vertex,
        colorWrite: false
    })

    material.uniforms.resolution.value.x = 10;
    material.uniforms.resolution.value.y = 10;
    material.uniforms.resolution.value.z = 10;
    material.uniforms.resolution.value.w = 1;