Compress erros on Three with chunks and imports

[dghez]

First of all, great plugin, thanks for that. I tried to use the compress: true prop to compress my shader but somehow it breaks the code. My files includes both import and a lot of threejs chuks (aka <#include... >)

Any clue? I'm on "vite-plugin-glsl": "^1.1.2" and "three": "^0.157.0"

EDIT: in the docs you stated "Starting from v0.5.4 this plugin supports custom compress callback function to optimize output shader length after all shader chunks have been included." so it might solve my issue but I have no clue on what I need to do there since docs are not explain that :)

[UstymUkhman]

Hi @dghez and thanks for using this plugin.

Actually, I have never tried using compress option with three.js shaders, so there might really be some bugs there, but from what I can see in the screenshot you've attached, the error is not related to this case.

The first error ('vec' : no matching overloaded function found) is caused when you're reassigning your gl_FragColor like this: gl_FragColor=vec(1.0,0.0.0.0,1.0);. I think it should be gl_FragColor=vec4(1.0,0.0.0.0,1.0);. Also, I see a returng0 which also looks like a typo. Maybe there's something else, but I can't spot it right now.

My advice would be disable compress option for now and fix all shader errors. Once it's done, re-enable it. Keep me updated if there's something wrong then in three.js environment, after enabling compression. Also, a link to a repo / editable demo where I can take a look and play around with an error would be much appreciated. Thanks!

[dghez]

Hey there, thanks for the reply! I think I found the issue, it wasn't a typo but more like a "compress issue"

    return
        g0( fuv.y ) * ( g0x * textureLod( tex, p0, lod ) + g1x * textureLod( tex, p1, lod ) )
        + g1( fuv.y ) * ( g0x * textureLod( tex, p2, lod ) + g1x * textureLod( tex, p3, lod ) );

These lines were the issue and it was because there were a "enter(break row)" after the return that was messing with everything, I removed that and I got no issues.

But honestly I can just see a whitespace saving, removing spaces between parentheses, not much more. Is there a way to trigger a sort of minimize/uglify? Renaming variables, compress etc.. you know, classic js thing

[UstymUkhman]

Hahahaha... I guess that might also happen in JavaScript. 😅

But honestly I can just see a whitespace saving, removing spaces between parentheses, not much more. Is there a way to trigger a sort of minimize/uglify? Renaming variables, compress etc.. you know, classic js thing

Kinda... As you mentioned, this plugin supports custom compress callback function, so what you can do is to use that:

glsl({
  compress: (outputShader) => customUglifier(outputShader),
})

where customUglifier is a function that takes in input your shader code (already parsed, with chunks included) and can minimize/uglify it as you wish. It then has to return the minified version of it.

What default compress algorithm is aimed to do at the end of the day, is to strip away whitespaces from your shaders in order to reduce bundle size and load them a bit faster. That's it. It is by design 'cause in 99% of cases this should be enough, but with custom compress function you have an API to cover the other 1% of cases like uglifing, etc... 😉

P.S.: Thanks you your star on this project. ❤️