trouble using @import statements in GLSL code

[cachemoney]

Hi, I am using the ts-shader-loader plugin in webpack and not sure how to use the @import feature.

@import ./classic-perlin-3d.glsl
uniform float time;
uniform vec3 colorStart;
uniform vec3 colorEnd;
varying vec2 vUv;
void main() {
  vec2 displacedUv = vUv + cnoise(vec3(vUv * 10.0, time * 0.1));
  float strength = cnoise(vec3(displacedUv * 10.0, time * 0.2));
  float outerGlow = distance(vUv, vec2(0.5)) * 2.0 - 0.5;
  strength += outerGlow;
  strength += step(-0.2, strength) * 0.6;
  strength = clamp(strength, 0.0, 1.0);
  vec3 color = mix(colorStart, colorEnd, strength);
  gl_FragColor = vec4(color, 1.0);
}

The original code that I was basing this from was called via a pragma statement using glslify. I had issues trying to to get that all working with Webpack, so I am trying to use ts-shader-loader. Do you have suggestions of incorporating code inline using @import? thanks.

#pragma glslify: cnoise3 = require(glsl-noise/classic/3d.glsl)

[lynxnot]

Hello, to be honest Im far from being an expert on this topic. This repo exists because it took me way too long to setup the build process. iirc I was trying to use glslfy too but could not make it work. Sorry, maybe in a few months Ill revisit the subject ;)