TSL : Raymarching
3Playlist : • Three.js Shading Language (TSL)
Documentation : https://sbcode.net/tsl/raymarching/
We can use Signed Distance Fields (SDF) to define shapes and scenes, but if we want to view our SDF shapes in 3D, then we can use raymarching.
Raymarching will help us to calculate the distances to SDF shapes in 3D space. We will also be able to calculate the normal in which we can then use to calculate the lighting effects.
So in this first example, imagine a position in space, this is the camera position, and it is scanning a coordinate in a some direction, and the fragment shader will raymarch along that direction until it hits a surface. We can then use that information to color the returned pixel.
#three
#threejs
#tsl
#ThreejsShadingLanguage
#ThreeShaderLanguage
#SignedDistanceFields
#raymarching
#sdf
#sdfdrawing
Other Videos By SBCODE
| 2025-03-20 | #soweczka eurasian pygmy owl |
| 2025-03-20 | A glitch in the matrix |
| 2025-03-20 | #tatra #tatry |
| 2025-03-18 | Learn Threejs Shading Language and Signed Distance Fields |
| 2025-03-03 | Learn Threejs Shading Language and Signed Distance Fields |
| 2025-03-02 | #lamb #newborn Not going to make it :-( |
| 2025-03-02 | #lamb #newborn A minute after being born. |
| 2025-03-01 | #sundial |
| 2025-02-28 | TSL : Getting Started |
| 2025-02-23 | #horizonSails #stackpack #sailing |
| 2025-02-22 | TSL : Raymarching |
| 2025-02-20 | TSL : Colouring SDFs |
| 2025-02-19 | TSL : Distance Lines |
| 2025-02-18 | TSL : Signed Distance Fields |
| 2025-02-17 | #ScratchedWoodenFloor |
| 2025-02-15 | #jammedFurler |
| 2025-02-14 | TSL : Uniform and UniformArray |
| 2025-02-13 | #jammedFurler #thamesEstuary |
| 2025-02-13 | TSL : Lines - Part 2 |
| 2025-02-13 | TSL : Lines - Part 1 |
| 2025-02-12 | #threeshaderlanguage #tsl #threejs |