TSL: Move ShaderNode to tslFn()

[sunag]

Description

This is a big revision, it's a simplification of how TSL work with functions, this was based in some studies and conversations with users of three.js.

Removing .call() from TSL design

Creating a ShaderNode function using tslFn.

const D_BlinnPhong = tslFn( ( { dotNH } ) => {

	return shininess.mul( 0.5 / Math.PI ).add( 1.0 ).mul( dotNH.pow( shininess ) );

} );

//...

const D = D_BlinnPhong( { dotNH } );

Using native functions wgslFn() or glslFn()

const desaturateFn = wgslFn( `
	fn desaturate( color:vec3<f32> ) -> vec3<f32> {

		let lum = vec3<f32>( 0.299, 0.587, 0.114 );

		return vec3<f32>( dot( lum, color ) );

	}
` );

//...

material.colorNode = desaturateFn( { color: texture( uvTexture ) } );

/cc @mrdoob @LeviPesin @Mugen87

[LeviPesin]

I think I'm fine with such a rename 👍 And the removal of calls is nice.

[mrdoob]

How about tslFn instead of just fn?

[sunag]

Sometimes I think fn is more congruent with the rest of the functions like loop, If... since they are TSL by nature and we don't have prefixes, the only exceptions in TSL are wgslFn and glslFn.

I was thinking about making fn the default and leaving tslFn as an alias.

[mrdoob]

const desaturateFn = fn( `
	fn desaturate( color:vec3<f32> ) -> vec3<f32> {
	}
` );

That double fn is a bit weird though 🤔

[mrdoob]

Hmm, maybe capitalizing them...?

Fn, If, Loop, ...

[sunag]

That double fn is a bit weird though 🤔

I was thinking of this change as just tslFn. wgslFn would remain the same.

const desaturateFn = fn( ( [ color ] ) => {

} );

Hmm, maybe capitalizing them...?

It looks interesting flow control nodes will have a pattern.

const desaturateFn = Fn( ( [ color ] ) => {

	Loop( count, => {

		Break();

	} );

} );

[mrdoob]

It looks interesting flow control nodes will have a pattern.

Yeah, easier to read I think 🤔