Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature request] GLSL code formatting feature #13

Open
cx20 opened this issue May 19, 2021 · 8 comments
Open

[Feature request] GLSL code formatting feature #13

cx20 opened this issue May 19, 2021 · 8 comments

Comments

@cx20
Copy link

cx20 commented May 19, 2021

I like to look at the twigl code on Twitter.
However, much of that code is obfuscated to keep it short.
How about a formatting feature to make the obfuscated code easier to read?

I think js-beautify can be used to format the code.
https://github.com/beautify-web/js-beautify

The following is an implementation image.

before:
image

after:
image

I think js-beautify can be called as follows.

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify-html.js"></script>
beautify.addEventListener('click', () => {
    const opts = {
        indent_size: 4
    };
    editor.setValue(js_beautify(editor.getValue(), opts));
}, false);
@doxas
Copy link
Owner

doxas commented May 19, 2021

wow! this is a good idea.
However, would you mind if I change the position and design of the bracket icons by myself?

@cx20
Copy link
Author

cx20 commented May 19, 2021

Yes. I'll leave it to you to decide how to implement it.

@cx20
Copy link
Author

cx20 commented Aug 9, 2021

BTW, I found one problem with JS Beautifier.
In the case of #define, when Beautifier is executed, unexpected line breaks may occur.

before)

#define X(s,l)d=s*sqrt(h);if(h>0.&&d>m&&sin(atan(d,P.y)+P.x*3.+t*l*4.)>.9)m=d;

after)

#define X(s, l) d = s * sqrt(h);
if (h > 0. && d > m && sin(atan(d, P.y) + P.x * 3. + t * l * 4.) > .9) m = d;

Unfortunately, I don't know how to solve this. I hope someone can help us.

@doxas
Copy link
Owner

doxas commented Aug 9, 2021

That possibility occurred to me right away.
So I haven't started on this issue, imagining that I would probably have to make the parser myself.

When I get some time, I might give it a shot!

@cx20
Copy link
Author

cx20 commented Aug 10, 2021

I haven't tried it, but the following GLSL parser may be helpful.
https://github.com/stackgl/glsl-parser

@trusktr
Copy link

trusktr commented Aug 8, 2022

Here's one: http://evanw.github.io/glslx/

It can both format/prettify, and minify. Might be useful for writing expanded code, then hitting minify to see if it fits in a tweet, then undoing and continuing editing, etc.

@doxas
Copy link
Owner

doxas commented Aug 9, 2022

This could certainly be useful.

@cx20
Copy link
Author

cx20 commented Jan 27, 2023

BTW, In the future, AI may help make code easier to read.
https://twitter.com/rianflo/status/1618386347810779136

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants