Uncaught SyntaxError: Unexpected identifier vertex.glsl?import:1

[Wouter]

Love what you are doing here!
I can't seem to make it work.

The vertex shader breaks on the first line with the error 'Unexpected identifier'.

I have included my test project.
I tried the example included in vite-plugin-glslify and that worked.

I hope you can help me!

Great work!

viteshader.zip

[Wouter]

I'm trying some things to make it work:

this is the input

const fragmentShader = glsl(`
  varying vec2 vUv;
  varying float vDistort;

  uniform float uTime;
  uniform float uHue;
  uniform float uAlpha;

  vec3 cosPalette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
    return a + b * cos(6.28318 * (c * t + d));
  }

  void main() {
    float distort = vDistort * 2.0;

    vec3 brightness = vec3(0.5, 0.5, 0.5);
    vec3 contrast = vec3(0.5, 0.5, 0.5);
    vec3 oscilation = vec3(1.0, 1.0, 1.0);
    vec3 phase = vec3(0.0, 0.1, 0.2);

    vec3 color = cosPalette(uHue + distort, brightness, contrast, oscilation, phase);

    gl_FragColor = vec4(color, uAlpha);
  }
`)

This it the output

const fragmentShader = #define GLSLIFY 1
`
  varying vec2 vUv;
  varying float vDistort;

  uniform float uTime;
  uniform float uHue;
  uniform float uAlpha;

  vec3 cosPalette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
    return a + b * cos(6.28318 * (c * t + d));
  }

  void main() {
    float distort = vDistort * 2.0;

    vec3 brightness = vec3(0.5, 0.5, 0.5);
    vec3 contrast = vec3(0.5, 0.5, 0.5);
    vec3 oscilation = vec3(1.0, 1.0, 1.0);
    vec3 phase = vec3(0.0, 0.1, 0.2);

    vec3 color = cosPalette(uHue + distort, brightness, contrast, oscilation, phase);

    gl_FragColor = vec4(color, uAlpha);
  }
`

Notice that #define GLSLIFY 1 is outside backtick `

[Wouter]

I made a new vite project to demonstrate this problem

vite-glslify-example.zip

@KusStar

[嚴肅遊戲]

I made a new vite project to demonstrate this problem

vite-glslify-example.zip

@KusStar

Thanks for informing, I am figuring out to fix it. Currently it only supports string and template literals(but have some bugs), but I will try to make it support for import resolution.

[Wouter]

You are awesome! Thx for your response en greetings from the Netherlands

[嚴肅遊戲]

Fixed in vite-plugin-glslify@1.4.0. Now you can import with *.glsl files or wrapped in glsl('some shaders code'). Have a try.

[Wouter]

Awesome! import vertex from "./vertex.glsl"; Seems to work!

when i try to:

console.log(glsl(`
  varying vec2 vUv;
  varying float vDistort;

  uniform float uTime;
  uniform float uSpeed;
  uniform float uNoiseStrength;
  uniform float uNoiseDensity;
  uniform float uFreq;
  uniform float uAmp;
  uniform float uOffset;

  #pragma glslify: noise = require(glsl-noise/classic/3d)
  #pragma glslify: pnoise = require(glsl-noise/periodic/3d)
  #pragma glslify: rotateY = require(glsl-rotate/rotateY)

  float map(float value, float inMin, float inMax, float outMin, float outMax) {
    return outMin + (outMax - outMin) * (value - inMin) / (inMax - inMin);
  }

  void main() {
    vUv = uv;

    float t = uTime * uSpeed;
    float distortion = pnoise((normal + t) * uNoiseDensity, vec3(10.0)) * uNoiseStrength;

    vec3 pos = position + (normal * distortion);
    float angle = sin(uv.y * uFreq + t) * uAmp;
    pos = rotateY(pos, angle);

    pos *= map(sin(uTime + uOffset), -1.0, 1.0, 1.0, 1.2);

    vDistort = distortion;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.);
  }
`))

i get this error:

[plugin:vite-plugin-glslify:literals] target.replaceAll is not a function

[Wouter]

Yes! Thank you very much!

This code now works 🎉!

import * as THREE from 'three';
import vertexShader from './shaders/vertex.glsl';
import fragmentShader from './shaders/fragment.glsl';

// export class Blob {
export  class Blob extends THREE.Object3D {
  constructor(size, speed, color, density, strength, offset) {
    super();

    this.geometry = new THREE.IcosahedronGeometry(size, 64);
    this.material = new THREE.ShaderMaterial({
      vertexShader,
      fragmentShader,
      uniforms: {
        uTime: { value: 0 },
        uSpeed: { value: speed },
        uNoiseDensity: { value: density },
        uNoiseStrength: { value: strength },
        uFreq: { value: 3 },
        uAmp: { value: 6 },
        uHue: { value: color },
        uOffset: { value: offset },
        red: { value: 0 },
        green: { value: 0 },
        blue: { value: 0 },
        uAlpha: { value: 1.0 },
      },
      defines: {
        PI: Math.PI
      },
      wireframe: true,
      side: THREE.DoubleSide,
      transparent: true,
    });

    this.mesh = new THREE.Mesh(this.geometry, this.material);

    this.add(this.mesh);
  }
}

[嚴肅遊戲]

Oops, the replaceAll is only available on Node.js 15+, I will fix it in next release.
Thx for reporting!

[Wouter]

That explains it.
I'm using Node v14.17.3

[嚴肅遊戲]

Fixed replaceAll in vite-plugin-glslify@1.4.1.