Adapting shadertoy shader as a material

Hi everybody,

Despite some years practicing BJS, i’ve never made or used a shader. But I mean it is probably one of the best ways to make great materials so I’d like to learn a little bit.

I’d like to adapt this one (Shader - Shadertoy BETA) to create a material for a sphere but i do not know how to do it because i don’t find any fragment or vertex shader in the code.

Could somebody help me on a simple PG ?

Thanks in advance,

Boris

You are welcome! :slight_smile: - Babylon.js Playground

Great !!! :smiling_face_with_three_hearts:

Ok, i will now try to transform the constants into variables to be able to change the parameters of the clouds.

Thanks very much !!

Ok, I’ve managed to transform any constant into variables, so that is great.

But i’ve got two other problems.

1- When i try to apply the shader to a big sphere, it does not work very much, the sphere is almost black.

2 - there are some artifacts in the top and the bottom of the sphere

Here’s my PG : https://playground.babylonjs.com/#2J1EKR#2

In this case it is better to use postprocess like this - https://playground.babylonjs.com/#2J1EKR#8
To put it into background use the second camera like it is shown here - https://www.babylonjs-playground.com/#0503TW#18

I’d prefer not to do like that because i have to save and open the scene so it has to be unique. Is it possible to do it with a shader material ?

You need to use the sphere’s normals or positions for proper spherical mapping in vertex shader and adjust the UV coordinates to work with spherical mapping in fragment shader.

Example - https://playground.babylonjs.com/#2J1EKR#10