diff options
| author | Jack Jamison <jackqjamison@gmail.com> | 2026-03-19 10:24:38 -0400 |
|---|---|---|
| committer | Jack Jamison <jackqjamison@gmail.com> | 2026-03-19 10:24:38 -0400 |
| commit | ecb26e4c0b0e33c82edbdabc2b71c716b5c92bd3 (patch) | |
| tree | 7b3cd3d1ae518f660b157ef0ac8d0a6e26c1ebef /interactive/glsl-layout-calculator/index.html | |
| parent | 9e248eeb4f9a954d129c9fddd710b99abfc4106a (diff) | |
interactive in this repo
Diffstat (limited to 'interactive/glsl-layout-calculator/index.html')
| -rw-r--r-- | interactive/glsl-layout-calculator/index.html | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/interactive/glsl-layout-calculator/index.html b/interactive/glsl-layout-calculator/index.html new file mode 100644 index 0000000..22b3078 --- /dev/null +++ b/interactive/glsl-layout-calculator/index.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>GLSL Layout Calculator</title> + <link rel="stylesheet" href="style.css"> + </head> + + <body> + <h2>GLSL Std140 and Std430 Layout Calculator</h2> + <a href="https://jackjamison.net">by Jack Jamison</a> + <br> + <br> + <div> + <textarea rows=20 cols=25 id="input"></textarea> + <textarea rows=20 cols=40 id="output" readOnly=true></textarea> + <br> + <select id="version_select" options=["one"]> + <option value="std140" selected>Std 140</option> + <option value="std430">Std 430</option> + </select><br> + </div> + + <h2>Instructions</h2> + <p>Write your declarations on the left, get your output on the right. For the most part, you can paste in GLSL code.<br><br> + You can define structs and uniform blocks with the syntax "#uniform <b>name</b>" or "#struct <b>name</b>".</p> + + <h2>About</h2> + <p>This tool was made because tons of resources online about GLSL alignment are wrong, such as <a href="https://ptgmedia.pearsoncmg.com/images/9780321552624/downloads/0321552628_AppL.pdf">this one</a>.</p> + <a href="https://registry.khronos.org/OpenGL/specs/gl/glspec46.core.pdf">For detailed rules, read the OpenGL spec, pages 146-147</a><br> + <a href="https://github.com/JackJ30/glsl-alignment-calculator">Source code</a><br> + + <script type="text/javascript" src="odin.js"></script> + <script type="text/javascript" src="index.js"></script> + </body> + +</html> |