Basic TSL Examples / snippets focusing on Individual Features

[Samsy]

Description

First, I want to express gratitude for the incredible work on Three.js and the new TSL architecture. As a long-time Three.js user since 2012, I'm excited about WebGPU and TSL, but I'm having hard time to make the transition from Legacy to TSL.

The current TSL examples showcase the graphical capabilities of the engine with WebGPU. However, it can be challenging to isolate the fundamental TSL concepts from the broader engine demonstrations.

While the existing examples effectively demonstrate what TSL can achieve, they often combine multiple concepts together. This makes it confusing to understand the basic building blocks of TSL first, before applying them to more complex graphics scenarios.

In my experience with the transition, some aspects of TSL are quite intuitive and even simplify certain tasks compared to the legacy approach. However, other basic operations remain mysterious and hard to grasp, especially when trying to port legacy advanced materials to the new system.

For instance, developers who are starting from scratch with TSL would benefit from examples / snippets of isolated operations like :

• the multiple ways to sample a texture ( inline, within fn, using texture( tex, uv ), texture(tex).sample( xx )
• how to discard, and the multiple ways to discard a fragment shader
• an isolated example of xxx node
• using setLayout and arguments types
• adding a label to a variable
• how to extend a built-in normal using materialNormal etc..
• how to write "defines" in TSL ( property )
• using a materialReference etc..

I'm unsure if other developers are experiencing similar difficulties, but I believe having simpler snippets that demonstrate each TSL concept, operation, aspect, and node in isolation using both inline and Fn, would be incredibly valuable for the community's transition to the new system.

[Makio64]

I mention it in another issue but an example ultra minimalist by nodes would be awesome, example: https://animejs.com/documentation/

[Mugen87]

To me, what you are basically requesting are extensions to our current guide and manual sections. Such guides could introduce into TSL and showcase all the points you have listed.

Would you mind if merge this discussion into #29829?