# How could i port this babylon js shader?

**URL:** <https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208>\
**Category:** Questions\
**Created:** [September 15, 2020, 9:35pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208 "2020-09-15T21:35:56Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Iury\_Borges](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/iury_borges/32/11123_2.png) [@Iury\_Borges](https://forum.babylonjs.com/u/Iury_Borges)\
**Post date:** [September 15, 2020, 9:35pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/1 "2020-09-15T21:35:56Z")

</div>

how could i port this babylon js shader?  
my code-\> [Babylon.js Playground](https://playground.babylonjs.com/#AGZ10W)

shader original [Shader - Shadertoy BETA](https://www.shadertoy.com/view/MdlcDM)

i have no idea how i could port this shader to babylon, please help me.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 16, 2020, 8:57am UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/2 "2020-09-16T08:57:34Z")

</div>

Welcome aboard!

You will need to use one (or several) custom shaders to do this by using the `ShaderMaterial` class.

@HiteshSahu has ported a shader toy here if you want to see how he has done it: [Examples from the playground](https://forum.babylonjs.com/t/examples-from-the-playground/3175/466)

You also have a number of other ones from @Pryme8 here: [Shader Talk - Conversations on GLSL](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677)

[EDIT] Didn’t see you already started a PG! [/EDIT]

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [September 16, 2020, 5:13pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/3 "2020-09-16T17:13:02Z")

</div>

Looks like you got the first pass (Buffer A), repeat that process now for the second pass (Image)!

Post effects are chain-able!.

Now the audio input will take you converting what ever audio file output into an array and pushing that to shader. There should be some information on that in shader-talk I think.

---

<div class="post-metadata">

**Author:** ![HiteshSahu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hiteshsahu/32/50817_2.png) [@HiteshSahu](https://forum.babylonjs.com/u/HiteshSahu)\
**Post date:** [September 16, 2020, 6:50pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/4 "2020-09-16T18:50:45Z")

</div>

Here you go 😉

[https://playground.babylonjs.com/#AGZ10W#1](https://playground.babylonjs.com/#AGZ10W#1)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/4/4a02afd3ae93080371a4fc7b09f933ed07083667.jpeg)

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [September 16, 2020, 8:14pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/5 "2020-09-16T20:14:48Z")

</div>

[https://playground.babylonjs.com/#AGZ10W#2](https://playground.babylonjs.com/#AGZ10W#2)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/9639e582314c98a653bbf2dbcb7314423a6d123b.png)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 16, 2020, 8:52pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/6 "2020-09-16T20:52:24Z")

</div>

Great!

Note that you should not do `time+=0.1` the second time as `time` is global and it is already done for the first pass.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [September 16, 2020, 8:53pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/7 "2020-09-16T20:53:51Z")

</div>

Yeah hes right, sorry I just copy and pasted what everyone had already done. They all did a piece of it just did not link them together!  
[https://playground.babylonjs.com/#AGZ10W#3](https://playground.babylonjs.com/#AGZ10W#3)

---

<div class="post-metadata">

**Author:** ![Iury\_Borges](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/iury_borges/32/11123_2.png) [@Iury\_Borges](https://forum.babylonjs.com/u/Iury_Borges)\
**Post date:** [September 16, 2020, 9:29pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/8 "2020-09-16T21:29:23Z")

</div>

thanks

---

<div class="post-metadata">

**Author:** ![Iury\_Borges](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/iury_borges/32/11123_2.png) [@Iury\_Borges](https://forum.babylonjs.com/u/Iury_Borges)\
**Post date:** [September 16, 2020, 9:53pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/9 "2020-09-16T21:53:58Z")

</div>

I understood, now the question is how I would carry this shader that I made\> [Shader - Shadertoy BETA](https://www.shadertoy.com/view/Wl2fWK)

---

<div class="post-metadata">

**Author:** ![Iury\_Borges](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/iury_borges/32/11123_2.png) [@Iury\_Borges](https://forum.babylonjs.com/u/Iury_Borges)\
**Post date:** [September 16, 2020, 9:55pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/10 "2020-09-16T21:55:40Z")

</div>

I tried to carry more but it didn’t work.

[https://playground.babylonjs.com/#AGZ10W#4](https://playground.babylonjs.com/#AGZ10W#4)

---

<div class="post-metadata">

**Author:** ![Iury\_Borges](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/iury_borges/32/11123_2.png) [@Iury\_Borges](https://forum.babylonjs.com/u/Iury_Borges)\
**Post date:** [September 16, 2020, 9:57pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/11 "2020-09-16T21:57:01Z")

</div>

I want to work with ultra realistic shader using babylon js

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [September 16, 2020, 11:15pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/12 "2020-09-16T23:15:37Z")

</div>

> [@Path Tracing with Babylon, Background and Implementation](https://forum.babylonjs.com/t/path-tracing-with-babylon-background-and-implementation/12832/32):
>
> Hello @Necips ! I thought the silence was because everyone was tired of me rambling on and on about path tracing! Ha smiley No but seriously, thank you for the compliment. And thank you for sharing your beautiful Sandbox shader! I love the Mandelbrot addition - so cool! It’s fitting you linked to a shader with the original code coming from P\_Malin. Now there is a true ‘giant’ in shader programming. Have a look at his profile (P\_Malin) and his listed shaders on Shadertoy. Some of his demos a…

---

<div class="post-metadata">

**Author:** ![Iury\_Borges](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/iury_borges/32/11123_2.png) [@Iury\_Borges](https://forum.babylonjs.com/u/Iury_Borges)\
**Post date:** [September 17, 2020, 10:38am UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/13 "2020-09-17T10:38:03Z")

</div>

I love you.

---

<div class="post-metadata">

**Author:** ![Iury\_Borges](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/iury_borges/32/11123_2.png) [@Iury\_Borges](https://forum.babylonjs.com/u/Iury_Borges)\
**Post date:** [September 17, 2020, 10:40am UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/14 "2020-09-17T10:40:24Z")

</div>

I just thought these shaders are extremely heavy.

I wanted to use shaders as I showed you before, but I can’t get a door.

Look at another shader that wanted to port more I can’t carry -\> [Shader - Shadertoy BETA](https://www.shadertoy.com/view/llBfWG)

---

<div class="post-metadata">

**Author:** ![ajp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ajp/32/9504_2.png) [@ajp](https://forum.babylonjs.com/u/ajp)\
**Post date:** [September 21, 2020, 8:17am UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/15 "2020-09-21T08:17:10Z")

</div>

> [@Iury\_Borges](#):
>
> but I can’t get a door.

Sorry @Iury_Borges I’m not sure what you’re asking for here.

> [@Iury\_Borges](#):
>
> more I can’t carry

Again, not sure what you’re trying to say here?

Can you please give a link to your latest playground with what you are attempting to do and what is not working as you want it to?

---

<div class="post-metadata">

**Author:** ![Iury\_Borges](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/iury_borges/32/11123_2.png) [@Iury\_Borges](https://forum.babylonjs.com/u/Iury_Borges)\
**Post date:** [September 24, 2020, 12:29pm UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/16 "2020-09-24T12:29:43Z")

</div>

link - \> [https://playground.babylonjs.com/#AGZ10W#4](https://playground.babylonjs.com/#AGZ10W#4)

shadertoy -\> [Shader - Shadertoy BETA](https://www.shadertoy.com/view/llBfWG)

---

<div class="post-metadata">

**Author:** ![ajp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ajp/32/9504_2.png) [@ajp](https://forum.babylonjs.com/u/ajp)\
**Post date:** [September 28, 2020, 10:18am UTC](https://forum.babylonjs.com/t/how-could-i-port-this-babylon-js-shader/14208/17 "2020-09-28T10:18:52Z")

</div>

Thank you for the link to your latest playground.

What is not working as you want it to? / What are you trying to do?
