build problem with shaders

[arpu]

Hey,

this looks awesome, on first test i get

[vite-plugin-glsl] ENOENT: no such file or directory, open '/home/arpu/Work/githubsources/YetAnotherZombieHorror/src/taylorInvSqrt.glsl'
file: /home/arpu/Work/githubsources/YetAnotherZombieHorror/src/shaders/fog/main.frag
error during build:
Error: ENOENT: no such file or directory, open '/home/arpu/Work/githubsources/YetAnotherZombieHorror/src/taylorInvSqrt.glsl'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at /home/arpu/Work/githubsources/YetAnotherZombieHorror/node_modules/vite-plugin-glsl/dist/loadShaders.js:51:35
    at String.replace (<anonymous>)
    at loadChunk (/home/arpu/Work/githubsources/YetAnotherZombieHorror/node_modules/vite-plugin-glsl/dist/loadShaders.js:41:25)
    at /home/arpu/Work/githubsources/YetAnotherZombieHorror/node_modules/vite-plugin-glsl/dist/loadShaders.js:51:20
    at String.replace (<anonymous>)
    at loadChunk (/home/arpu/Work/githubsources/YetAnotherZombieHorror/node_modules/vite-plugin-glsl/dist/loadShaders.js:41:25)
    at /home/arpu/Work/githubsources/YetAnotherZombieHorror/node_modules/vite-plugin-glsl/dist/loadShaders.js:51:20
    at String.replace (<anonymous>)

any idea ?

[Ustym Ukhman]

Hi arpu,
yep I faced this as well.
It's a problem with my vite-plugin-glsl. I'm gonna fix it and publish a new version asap (today or tomorrow). Thanks!

P.S.: as a workaround for now, you can just change this to #include ./taylorInvSqrt; if you want to see it working.

[arpu]

yes with this change the app builds but now i get some shader compile errors in the console

HREE.WebGLProgram: shader error:  0 gl.VALIDATE_STATUS false gl.getProgramInfoLog Fragment shader is not compiled.
�  THREE.WebGLShader: gl.getShaderInfoLog() fragment
ERROR: 0:2687: '{' : syntax error
�1: #version 300 es
2: #define varying in
3: out highp vec4 pc_fragColor;
4: #define gl_FragColor pc_fragColor
5: #define gl_FragDepthEXT gl_FragDepth
6: #define texture2D texture
7: #define textureCube texture
8: #define texture2DProj textureProj
9: #define texture2DLodEXT textureLod
10: #define texture2DProjLodEXT textureProjLod
11: #define textureCubeLodEXT textureLod
12: #define texture2DGradEXT textureGrad
13: #define texture2DProjGradEXT textureProjGrad
14: #define textureCubeGradEXT textureGrad
15: precision highp float;
16: precision highp int;
17: #define HIGH_PRECISION
18: #define SHADER_NAME MeshStandardMaterial
19: #define STANDARD 
20: #define GAMMA_FACTOR 2
21: #define USE_FOG
22: #define FOG_EXP2
23: #define USE_MAP
24: #define USE_UV
25: #define USE_SHADOWMAP
26: #define SHADOWMAP_TYPE_PCF_SOFT
27: uniform mat4 viewMatrix;
28: uniform vec3 cameraPosition;
29: uniform bool isOrthographic;
30: #define TONE_MAPPING

[Ustym Ukhman]

Oh, yeah! Sorry I forgot to mention one more thing. FBM shader chunk should be included in pars.frag, not in main.frag. So like this:

// main.frag
#ifdef USE_FOG
  float heightFactor = 0.1;
  vec3 fogOrigin = cameraPosition;

  vec3 fogDirection = normalize(vWorldPosition - fogOrigin);
  float fogDepth = distance(vWorldPosition, fogOrigin);

  fogDepth *= fogDepth;

  vec3 noiseSampleCoord = vWorldPosition * 0.00025;
  float noiseSample = fBm(noiseSampleCoord + fBm(noiseSampleCoord)) * 0.5 + 0.5;

  fogDepth *= noiseSample;

  float fogFactor = heightFactor * exp(-fogOrigin.y * fogDensity) * (
    1.0 - exp(-fogDepth * fogDirection.y * fogDensity)
  );

  fogFactor = saturate(fogFactor / fogDirection.y);
	gl_FragColor.rgb = mix(gl_FragColor.rgb, fogColor, fogFactor);
#endif

// pars.frag
#ifdef USE_FOG
  #include ../fBm;
	uniform float fogTime;
	uniform vec3 fogColor;
  varying vec3 vWorldPosition;

	#ifdef FOG_EXP2
		uniform float fogDensity;

	#else
		uniform float fogNear;
		uniform float fogFar;

	#endif
#endif

Btw, just updated vite-plugin-glsl. By the end of the day, I'm planning to improve Global Volumetric Fog (now it pretty sucks), so I would suggest to pull this repo when you see issue #12 closed. Cheers!

[Ustym Ukhman]

@arpu I'm closing this issue as I've just pushed all the fixes / updates for Volumetric Fog. Feel free to check it out here.
A better approach for this would probably be baking Fractional Brownian Motion into a texture instead of doing all the calculations in the shader to improve on performance, but I guess this will be a future optimization. Cheers!

[arpu]

thx awesome work! will try this! right now i check some fog ideas from https://github.com/simondevyoutube/ThreeJS_Tutorial_Fog