TSL conversion not working / passing a varying as argument trouble / sampler2D conversion trouble

[Samsy]

Description

Hello there,

I've been trying to convert a glsl into TSL using the transpiler https://threejs.org/examples/webgpu_tsl_transpiler :

Original :

varying float nShiftPower;

uniform sampler2D map;

uniform float time;

varying vec2 vUv;

vec4 rgbShift( float n, vec2 uvs, sampler2D m ){

	vec4 final = vec4(0.0, 0.0, 0.0, 1.0);

    if( n > 0.0 ){

        float d1 = n * 0.001;
        float d2 = n * 0.002;

        vec2 q   = uvs;

        float x =  n * sin(0.3*time+q.y*21.0)*sin(0.7*time+q.y*29.0)*sin(0.3+0.33*time+q.y*31.0)*0.0017;
        
        float R = texture2D(map,vec2(x + uvs.x+ d1 ,uvs.y+ d1)).x+0.05;
        float G = texture2D(map,vec2(x + uvs.x  ,uvs.y- d2)).y+0.05;
        float B = texture2D(map,vec2(x + uvs.x- d2 ,uvs.y    )).z+0.05;

        float nshiftQuater = n * 0.75;
        
        R += 0.08*texture2D(map,nshiftQuater*vec2(x+0.025, -0.027)+ n * vec2(uvs.x+0.001,uvs.y+0.001)).x;
        G += 0.05*texture2D(map,nshiftQuater*vec2(x-0.022, -0.02) + n * vec2(uvs.x+0.000,uvs.y-0.002)).y;
        B += 0.08*texture2D(map,nshiftQuater*vec2(x-0.02, -0.018) + n * vec2(uvs.x-0.002,uvs.y+0.000)).z;

        final = vec4(R, G, B, 1.0);

    }
    else {

        final = texture2D(m, uvs);
    }

	return final;

}

void main(){

	gl_FragColor = getColor( nShiftPower,vUv,  map );
}
	

Converted :

// Three.js Transpiler r176

import { varying, float, texture, uniform, vec2, vec4, mul, sin, add, If, Fn } from 'three/tsl';

const nShiftPower = varying( float(), 'nShiftPower' );
const map = texture( /* <THREE.Texture> */ );
const time = uniform( 'float' );
const vUv = varying( vec2(), 'vUv' );

export const rgbShift = /*#__PURE__*/ Fn( ( [ n_immutable, uvs_immutable, m_immutable ] ) => {

	const m = sampler2D( m_immutable ).toVar();
	const uvs = vec2( uvs_immutable ).toVar();
	const n = float( n_immutable ).toVar();
	const final = vec4( 0.0, 0.0, 0.0, 1.0 ).toVar();

	If( n.greaterThan( 0.0 ), () => {

		const d1 = float( n.mul( 0.001 ) ).toVar();
		const d2 = float( n.mul( 0.002 ) ).toVar();
		const q = vec2( uvs ).toVar();
		const x = float( n.mul( sin( mul( 0.3, time ).add( q.y.mul( 21.0 ) ) ) ).mul( sin( mul( 0.7, time ).add( q.y.mul( 29.0 ) ) ) ).mul( sin( add( 0.3, mul( 0.33, time ) ).add( q.y.mul( 31.0 ) ) ) ).mul( 0.0017 ) ).toVar();
		const R = float( map.sample( vec2( x.add( uvs.x ).add( d1 ), uvs.y.add( d1 ) ) ).x.add( 0.05 ) ).toVar();
		const G = float( map.sample( vec2( x.add( uvs.x ), uvs.y.sub( d2 ) ) ).y.add( 0.05 ) ).toVar();
		const B = float( map.sample( vec2( x.add( uvs.x.sub( d2 ) ), uvs.y ) ).z.add( 0.05 ) ).toVar();
		const nshiftQuater = float( n.mul( 0.75 ) ).toVar();
		R.addAssign( mul( 0.08, map.sample( nshiftQuater.mul( vec2( x.add( 0.025 ), float( - 0.027 ) ) ).add( n.mul( vec2( uvs.x.add( 0.001 ), uvs.y.add( 0.001 ) ) ) ) ).x ) );
		G.addAssign( mul( 0.05, map.sample( nshiftQuater.mul( vec2( x.sub( 0.022 ), float( - 0.02 ) ) ).add( n.mul( vec2( uvs.x.add( 0.000 ), uvs.y.sub( 0.002 ) ) ) ) ).y ) );
		B.addAssign( mul( 0.08, map.sample( nshiftQuater.mul( vec2( x.sub( 0.02 ), float( - 0.018 ) ) ).add( n.mul( vec2( uvs.x.sub( 0.002 ), uvs.y.add( 0.000 ) ) ) ) ).z ) );
		final.assign( vec4( R, G, B, 1.0 ) );

	} ).Else( () => {

		final.assign( m.sample( uvs ) );

	} );

	return final;

} ).setLayout( {
	name: 'rgbShift',
	type: 'vec4',
	inputs: [
		{ name: 'n', type: 'float' },
		{ name: 'uvs', type: 'vec2' },
		{ name: 'm', type: 'sampler2D' }
	]
} );

export const main = /*#__PURE__*/ Fn( () => {

	gl_FragColor.assign( getColor( nShiftPower, vUv, map ) );

} ).setLayout( {
	name: 'main',
	type: 'void',
	inputs: []
} );

A few problem here it seems :

const m = sampler2D( m_immutable ).toVar(); seem incorrect, sampler2D may not exist

I removed the setLayout and got instead :

export const rgbShift = /*#__PURE__*/ Fn( ( [ n_immutable, uvs_immutable, m_immutable ] ) => {

	const uvs = vec2( uvs_immutable ).toVar();
	const n = float( n_immutable ).toVar();
	const final = vec4( 0.0, 0.0, 0.0, 1.0 ).toVar();

	If( n.greaterThan( 0.0 ), () => {

		const d1 = float( n.mul( 0.001 ) ).toVar();
		const d2 = float( n.mul( 0.002 ) ).toVar();
		const q = vec2( uvs ).toVar();
		const x = float( n.mul( sin( mul( 0.3, time ).add( q.y.mul( 21.0 ) ) ) ).mul( sin( mul( 0.7, time ).add( q.y.mul( 29.0 ) ) ) ).mul( sin( add( 0.3, mul( 0.33, time ) ).add( q.y.mul( 31.0 ) ) ) ).mul( 0.0017 ) ).toVar();
		const R = float( map.sample( map, vec2( x.add( uvs.x ).add( d1 ), uvs.y.add( d1 ) ) ).x.add( 0.05 ) ).toVar();
		const G = float( map.sample( map, vec2( x.add( uvs.x ), uvs.y.sub( d2 ) ) ).y.add( 0.05 ) ).toVar();
		const B = float( map.sample( map, vec2( x.add( uvs.x.sub( d2 ) ), uvs.y ) ).z.add( 0.05 ) ).toVar();
		const nshiftQuater = float( n.mul( 0.75 ) ).toVar();
		R.addAssign( mul( 0.08, map.sample( map, nshiftQuater.mul( vec2( x.add( 0.025 ), float( - 0.027 ) ) ).add( n.mul( vec2( uvs.x.add( 0.001 ), uvs.y.add( 0.001 ) ) ) ) ).x ) );
		G.addAssign( mul( 0.05, map.sample( map, nshiftQuater.mul( vec2( x.sub( 0.022 ), float( - 0.02 ) ) ).add( n.mul( vec2( uvs.x.add( 0.000 ), uvs.y.sub( 0.002 ) ) ) ) ).y ) );
		B.addAssign( mul( 0.08, map.sample( map, nshiftQuater.mul( vec2( x.sub( 0.02 ), float( - 0.018 ) ) ).add( n.mul( vec2( uvs.x.sub( 0.002 ), uvs.y.add( 0.000 ) ) ) ) ).z ) );
		final.assign( vec4( R, G, B, 1.0 ) );

	} ).Else( () => {

		final.assign( map.sample( m_immutable, uvs ) );

	} );

	return final;

} )

Then got another problem here, the compiler keep saying that mul on "n" is undefined

const x = float( n.mul( sin( mul( 0.3, time ).add( q.y.mul( 21.0 ) ) ) ).mul( sin( mul( 0.7, time ).add( q.y.mul( 29.0 ) ) ) ).mul( sin( add( 0.3, mul( 0.33, time ) ).add( q.y.mul( 31.0 ) ) ) ).mul( 0.0017 ) ).toVar();

"n" being the argument of the function coming from a varying :

n_immutable => varying float varying float nShiftPower;

const n = float( n_immutable ).toVar();

Reproduction steps

.

Code

.

Live example

.

Screenshots

No response

Version

last

Device

No response

Browser

No response

OS

No response

[CodyJasonBennett]

This issue is not present when using WebGL2 methods like texture and only texture2D from WebGL1.

It is confusing that it gets converted into the sampler2D type of GLSL, which has no call signature.