Open
Description
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