Adapting shadertoy shader as a material

Questions
1

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

2

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

4 Likes
3

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 !!

1 Like
4

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

5

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

1 Like
6

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 ?

7

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

2 Likes