TSL: loop()

[sunag]

Description

TSL loop() was created with a simplified syntax of for(;;) and can be used in many ways.

Basic

Traditional For

TSL

loop( 10, ( { i }, stack ) => {


} );

WGSL

for( var i : i32 = 0; i < 10; i ++ ) {


}

External callback

TSL

const callback = ( { i }, stack ) => {


};

loop( 10, callback );

WGSL

for( var i : i32 = 0; i < 10; i ++ ) {


}

Traditional For ( multiples )

TSL

loop( 10, 5, ( { i, k }, stack ) => {


} );

We can get here the inputs used in the loop( count, ... ) as nodes, it extends from i to the amount of sub loop needed in the function, e.g:

loop( 10, 15, 20, ( { i, j, k } ) => { } );

// i as 10
// j as 15
// k as 20

WGSL

for( var i : i32 = 0; i < 10; i ++ ) {

    for( var j : i32 = 0; j < 5; j ++ ) {

    }

}

Range

TSL

loop( { start: 5, end: 10 }, () => { } );

WGSL

for( var i : i32 = 5; i < 10; i ++ ) { }

Backwards direction

TSL

loop( { start: 10 }, () => { } );

WGSL

for( var i : i32 = 10 - 1; i >= 0; i -- ) { }

Force direction

TSL

loop( { start: 10, end: 5, direction: 'backwards' }, () => { } );

WGSL

for( var i : i32 = 10 - 1; i >= 5; i -- ) { }

Example

You can use loop() on a stack, which would be equivalent to the traditional loop e.g: stack.loop( ... ). But it can also be used as a function, thus returning the result in a new node.

TSL

const loopCount = 10;
material.colorNode = loop( loopCount, ( { i }, stack ) => {

    const output = vec4().temp();
    const scale = oscSine().mul( .09 ); // just a value to test

    const leftUV = uv().add( vec2( mul( scale, i ), 0 ) );
    const rightUV = uv().add( vec2( mul( scale.negate(), i ), 0 ) );
    const topUV = uv().add( vec2( 0, mul( scale, i ) ) );
    const bottomUV = uv().add( vec2( 0, mul( scale.negate(), i ) ) );

    stack.assign( output, output.add( texture( uvTexture, leftUV ) ) );
    stack.assign( output, output.add( texture( uvTexture, rightUV ) ) );
    stack.assign( output, output.add( texture( uvTexture, topUV ) ) );
    stack.assign( output, output.add( texture( uvTexture, bottomUV ) ) );

    return output.div( loopCount * 4 );

} );

WGSL

var nodeVar2 : vec4<f32>;

nodeVar2 = vec4<f32>( 0.0, 0.0, 0.0, 1.0 );

for ( var i : i32 = 0; i < 10; i ++ ) {

    nodeVar3 = textureSample( nodeUniform1, nodeUniform1_sampler, ( nodeVarying3 + vec2<f32>( ( ( ( ( sin( ( ( NodeUniforms.nodeUniform2 + 0.75 ) * 6.283185307179586 ) ) * 0.5 ) + 0.5 ) * 0.09 ) * f32( ( i ) ) ), 0.0 ) ) );
    nodeVar2 = ( nodeVar2 + nodeVar3 );
    nodeVar4 = textureSample( nodeUniform1, nodeUniform1_sampler, ( nodeVarying3 + vec2<f32>( ( -( ( ( sin( ( ( NodeUniforms.nodeUniform2 + 0.75 ) * 6.283185307179586 ) ) * 0.5 ) + 0.5 ) * 0.09 ) * f32( ( i ) ) ), 0.0 ) ) );
    nodeVar2 = ( nodeVar2 + nodeVar4 );
    nodeVar5 = textureSample( nodeUniform1, nodeUniform1_sampler, ( nodeVarying3 + vec2<f32>( 0.0, ( ( ( ( sin( ( ( NodeUniforms.nodeUniform2 + 0.75 ) * 6.283185307179586 ) ) * 0.5 ) + 0.5 ) * 0.09 ) * f32( ( i ) ) ) ) ) );
    nodeVar2 = ( nodeVar2 + nodeVar5 );
    nodeVar6 = textureSample( nodeUniform1, nodeUniform1_sampler, ( nodeVarying3 + vec2<f32>( 0.0, ( -( ( ( sin( ( ( NodeUniforms.nodeUniform2 + 0.75 ) * 6.283185307179586 ) ) * 0.5 ) + 0.5 ) * 0.09 ) * f32( ( i ) ) ) ) ) );
    nodeVar2 = ( nodeVar2 + nodeVar6 );

}

DiffuseColor = ( nodeVar2 / vec4<f32>( vec3<f32>( 40.0 ), 1.0 ) ); // output

[LeviPesin]

Yay!!!

Now with TSL getting more mature and even more usable for other things except materials (e.g. GPGPU)... Maybe we could try splitting the Nodes system and the Node Materials system (materials, lighting, maybe display)?