Issue Converting ShaderToy Shader to Babylon.js Shader - Different Visual Effect

Questions
, ,
1

Hello everyone,

I’ve been working on converting a shader from ShaderToy to Babylon.js, but I’m running into an issue where the visual effect produced by the shader in Babylon.js is noticeably different from what I see in ShaderToy.

I’ve tried to keep the conversion as accurate as possible, but the result is not the same…

I’ve shared the links to both the Playground and ShaderToy for reference. Could you please help me identify why there’s a difference in the effect?

Playground Link

ShaderToy Example Link

Thanks in advance for your help!

2

Shadertoy is having difficulties atm :confused:

3

It looks like the dimensions/viewport is the problem which probably comes from the usage of geometry.

I would recommend using either ProceduralTexture and/or PostProcess for this.

4

Thanks for the suggestion! I’ve already set the plane size and viewport size to the same dimensions, so I don’t think that’s the issue. Also, I haven’t seen any examples of shaders being used with ProceduralTexture or PostProcess. Could you point me to some resources or examples that demonstrate this? It would help me understand how to apply these in my current setup.

5

Hello :slight_smile:

Same on my side. I would be happy to help but I’ve having 504 Gateway Time-out on ShaderToy… I cannot compare the results…

@rk_gnanesh About using custom PostProcesses, you can have a look at the doc here, and here is a PG example

++
Tricotou

6

This is what the effect looks like in ShaderToy

it’s an example of a multi-pass shader. Here’s a snapshot of the shader.

ShaderToy snap
ShaderToy snap1920×945 96 KB

Converted PG Link - Playground Link