Shaders in formatted form

Questions
1

I am currently trying to look a little deeper into the shaders of three.js. See for example
A dynamically deformable circle (+shader) - #2 by hofk

In doing so, I am having a problem with the very hard to read form of the code.
Confusing strings with \n\t .

I found a old answer @Mugen87
Is it possible to access the vertex/fragment shaders in formatted form?
But this is outdated. See Shader Editor - Firefox Developer Tools | MDN
“This tool has been deprecated and will soon be removed from Firefox. For details, see Deprecated tools.”

The format is surely caused by the fact that multiline template literals were not available or not available for all browsers ( Internet Explorer ) when originally created.

The changeover takes a lot of effort, but is possible in sections.
Is anything planned in this regard in the near future :question:

I will, as I delve further into the shader now, rewrite the parts needed. Possibly these code snippets are useful?

I started with this in my local version
import * as THREE from '../jsm/three.module.136.TEST.js';
and it works.

/*
var defaultnormal_vertex = "vec3 transformedNormal = objectNormal;\n#ifdef USE_INSTANCING\n\tmat3 m = mat3( instanceMatrix );\n\ttransformedNormal /= vec3( dot( m[ 0 ], m[ 0 ] ), dot( m[ 1 ], m[ 1 ] ), dot( m[ 2 ], m[ 2 ] ) );\n\ttransformedNormal = m * transformedNormal;\n#endif\ntransformedNormal = normalMatrix * transformedNormal;\n#ifdef FLIP_SIDED\n\ttransformedNormal = - transformedNormal;\n#endif\n#ifdef USE_TANGENT\n\tvec3 transformedTangent = ( modelViewMatrix * vec4( objectTangent, 0.0 ) ).xyz;\n\t#ifdef FLIP_SIDED\n\t\ttransformedTangent = - transformedTangent;\n\t#endif\n#endif";
*/
var defaultnormal_vertex =`
	vec3 transformedNormal = objectNormal;
	#ifdef USE_INSTANCING
		mat3 m = mat3( instanceMatrix );
		transformedNormal /= vec3( dot( m[ 0 ], m[ 0 ] ), dot( m[ 1 ], m[ 1 ] ), dot( m[ 2 ], m[ 2 ] ) );
		transformedNormal = m * transformedNormal;
	#endif
	transformedNormal = normalMatrix * transformedNormal;
	#ifdef FLIP_SIDED
		transformedNormal = - transformedNormal;
	#endif
	#ifdef USE_TANGENT
		vec3 transformedTangent = ( modelViewMatrix * vec4( objectTangent, 0.0 ) ).xyz;
		#ifdef FLIP_SIDED
			transformedTangent = - transformedTangent
		#endif
	#endif`;
2

Not sure what your question is exactly. But IMO there are three flavours to work with formatted/readable shadercode which are sufficiant and provides enough ways to do this:

  • Import from text file (with an extension like .frag or .vert or .glsl or custom) with something like fetch() so you can just format however you like and even use IDE formatting for GLSL. After import you just feed that imported text to the shader of choice.
  • Use the template literals with the ticks like you did in the bottom part of your post if you like to have shadercode inline inside your javascript file
  • Put the shader code inbetween html tags and read that html tags’ inner html

Or a combination of these.

Hope this helps

3

That is clear to me to that extent.

I am concerned with the current representation of the extensive shader parts in https://threejs.org/build/three.module.js.
about from line 12680

The code part shows the transformation of a small part of it (defaultnormal_vertex ).

4

Why are you concerned about build in shaders?

If it’s just to be able to read or copy them to adjust, these shaderchunks and shaderlib code parts are just ‘compiled’ versions of the original shaderchunk files AFAIK:

In the current form in code they are also way smaller in file size than to have them formatted as template literals. To have readable code there wouldn’t make any sense in production.

5

We may not understand each other properly. My English is very poor and I use a translator.
DeepL Translate: The world's most accurate translator

As I thought I explained above, I want to understand the shader parts present in https://threejs.org/build/three.module.js.

This is much easier if they are easy to read.
Therefore I have transformed a small piece (defaultnormal_vertex) from the original representation to try.

Original can be seen above in /* */.

Update: I now saw the sources added above

6

If this answers your question perhaps you could check the solution. It might help others! Have a nice day

7

I tried it out. With a hex editor I found a very simple variant.

I replace \n 5C6E with 0A and \t 5C74 with 09

There are even fewer characters. For an example code part I have original 3.523 Bytes and then 3.226. That’s not a big difference.

And the modified three.js file works perfectly.