Aspect ratio when using TSL shaders as textures

Questions
, ,
1

Hello,

I’m a Three.js/GLSL newbie. I’m trying to use a GLSL shader as a texture on PlaneGeometry and BoxGeometry. In the CRT shaders example, I see the dimensions are passed as uniforms. If I apply such a shader to a cube where each face might have a different aspect ratio, how could I calculate the aspect ratio for that face? Or am I approaching this completely wrong and there are better strategies to apply shaders (that use the typical uv based calculations) to a material’s colorNode and avoid having the texture stretched out? Is Triplanar Texture something I should look at?

I also found this post Glsl shader as map source for meshStandardMaterial - Questions - three.js forum , specifically this response. Is this strategy of rendering the shader to a texture in one scene and reusing that texture in another still necessary, even when using TSL?

One final question, rendering a whole scene in GLSL using raymarching is efficient. Is it bad practice to use a GLSL shader on separate meshes?

2

For the last question:
No, with TSL you can use textureStore and THREE.StorageTexture() to directly write/edit textures on the GPU side.

It’s important to note these kind of textures will stay “tied” to your TSL node at all times (despite rendered as pixels). So it could be a downside in case you wish to heavily manipulate them. Rendering from offscreen scene and CanvasTexture could stay more practical depending the cases.

1 Like
3

Perhaps this is a naive answer.. but.. can you just plane.scale.set(1,width/height,1)?
That way the shader can be re-used for other images without having to have different uniforms for each…

1 Like