ycw/three-shaderlib-skim

👁️👄👁️ to skim glsl sources w/ foldable shader chunks for threejs shaderlib

About

To skim threejs shaderlib glsl sources with foldable shader chunks.

👁️👄👁️ 👉🏻 https://ycw.github.io/three-shaderlib-skim/dist/

Credits

GLSL sources

• Three

Framework

• Vue
• Vue Router
• Pinia

Highlighter

• Prism

Icons

• Github by IconPark
• Dark-theme by Microsoft

three-shaderlib-skim's Issues

dead custom props

three-shaderlib-skim/css/index.css

Lines 7 to 9 in 2ab036f

	--code-toggle-icon-fg: #ddd;
	--code-toggle-icon-bg: #222;
	--code-toggle-icon-shadow: inset 1px -1px 2px -1px white;

This tool is awesome. Thank you for making it.

No issues. :D

List marker makes indentation unclear.

remove the markers or pack them into //{here} <common>.

Show only one material at the time

This is really awesome my friend!

I usually search for a variable in the whole shader with cmd+f, but there are also the other materials in the page which get in the way fo the search.

It would be easier if it would show only one shader at the time, and change them with the menu on the left.

For example if I land on this link, the physical shader would appear:
https://ycw.github.io/three-shaderlib-skim/?url=//unpkg.com/three/build/three.module.js#physical

Add Expand all/Collapse all button for material

I have bookmarked this, it's so great.

Another thing that would be useful is a Expand all/Collapse button for each material, which would expand or collapse all includes.

This is useful also for the search, to see where a variable is defined or updated.

Thanks !!!

Hi @ycw, just wanted to say thanks !!! I'm using this tool very often 👍