# Shader Talk - Conversations on GLSL

**URL:** https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677
**Category:** Questions
**Created:** [March 1, 2019, 9:12pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677 "2019-03-01T21:12:15Z")
**Posts on this page:** 20
**Page:** 1

<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: [March 1, 2019, 9:12pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/1 "2019-03-01T21:12:15Z")

</div>

ITS BACK!

wooop… figured we would kick back on this old thread and start it off with something fun.

I am working on a procedural volumetric cube system, where if things go well it will be able to generate clouds and other wispy things with some level of control.

I have been loosly basing it off of [Creating a Volumetric Ray Marcher](https://shaderbits.com/blog/creating-volumetric-ray-marcher/)  
Gonna have to really start digging in now and refining some of the caluculations but for the most part its a good start.

[https://playground.babylonjs.com/#1UWAVK#4](https://playground.babylonjs.com/#1UWAVK#4)  
[https://playground.babylonjs.com/#1UWAVK#6](https://playground.babylonjs.com/#1UWAVK#6)

Anyone else have any cool glsl stuff they are working on? I was thinking about putting up a shadertoy like tool for us made with the BJS system… but I wonder if anyone would use it.

eventually here I want to do the Volume Map with a 3d texture and then do some other fun things with 3d textures, but there is just so little time in the day with real work that has to be done.

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [March 1, 2019, 9:22pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/2 "2019-03-01T21:22:49Z")

</div>

love it:) I always loved raymarching algorithms

And nice use of the shadermaterial

---

<div class="post-metadata">

### Author: ![PirateJC](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/piratejc/32/1003_2.png) [@PirateJC](https://forum.babylonjs.com/u/PirateJC)
#### Post date: [March 1, 2019, 9:32pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/3 "2019-03-01T21:32:58Z")

</div>

Hey @Pryme8,

Cool stuff! Would love to see you submit this to the [4.0 Release Video](https://forum.babylonjs.com/t/4-0-release-video-community-contributions/1655) as you continue to develop it!

Nice Work!

---

<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: [March 1, 2019, 9:41pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/4 "2019-03-01T21:41:25Z")

</div>

whoa I am flattered, if I can get the sorting issue and the marching entry point artifacts fixed ill be more then happy to!

---

<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: [March 1, 2019, 10:07pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/5 "2019-03-01T22:07:08Z")

</div>

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

I was able to fix the dithering crazyness on the sides which is a great fix! Now I need to figure out to get the projection planes aligned.

---

<div class="post-metadata">

### Author: ![aFalcon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/afalcon/32/7015_2.png) [@aFalcon](https://forum.babylonjs.com/u/aFalcon)
#### Post date: [March 1, 2019, 10:35pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/6 "2019-03-01T22:35:14Z")

</div>

Awesome! Can’t wait to dig into this…

---

<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: [March 1, 2019, 11:51pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/7 "2019-03-01T23:51:48Z")

</div>

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

I’m really close… The plane snapping calculations are off by a little bit, but at last you can enter the volume now.

next step is depth sorting, then performance.

---

<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: [March 2, 2019, 1:09am UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/8 "2019-03-02T01:09:53Z")

</div>

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

Access to some of the params now… Gotta start tailoring the performance and really start hampering down on somethings.

I think it might be smarter to use a lookup table then procedural, and then I will need to also figure out the plane orientation adjustments.

So close it hurts:  
[https://playground.babylonjs.com/#1UWAVK#23](https://playground.babylonjs.com/#1UWAVK#23)

---

<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: [March 5, 2019, 6:56am UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/9 "2019-03-05T06:56:47Z")

</div>

If anyone feels like having a shader that interacts with sound.  
[https://www.babylonjs-playground.com/#MFSFQ8#1](https://www.babylonjs-playground.com/#MFSFQ8#1)  
You could have multiple areas that you are sampling, this is just showing a quick rendition of the bin and then the totalVolume

[https://www.babylonjs-playground.com/#MFSFQ8#3](https://www.babylonjs-playground.com/#MFSFQ8#3)  
This one is showing it interact with other shader values in this one a raymarched spheroid.

---

<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: [March 13, 2019, 4:08pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/10 "2019-03-13T16:08:07Z")

</div>

[https://www.babylonjs-playground.com/#XXJUMU#1](https://www.babylonjs-playground.com/#XXJUMU#1)

so I started doing a scene that I am hoping will make converting ShaderToy stuff easier.

Once I can get through this and start understanding more or less what all the comparable uniform and varying are (and why they use things like fragColor vs gl\_fragColor), Ill write up a converter that hopefully you could just past the Shadertoy link and bam get a version running in bjs that is serializable.

Don’t really have much more time to look at this today, thats why Im dropping it here for now even though its not functioning.

---

<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: [April 6, 2019, 12:46am UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/11 "2019-04-06T00:46:53Z")

</div>

Anyone know of a good shader that will work to make images like these:  
 ![61%209001-136_t](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/5/5f83efc40cdd8fe12e3472ba72e85efd2f8f2b3f.jpeg) ![63%201044-136](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/1/1ca7f17e3970ff0ab295017f20c5829f46448e8f.jpeg)  
 ![RKS-830-507_t](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/fe2b9c4fc6b5cf7a8661626ebf582443e4f00157.jpeg)

Seamless with one pass? Prolly just some simple texture synthesis, it just all the references I find are way more complex then what I would need.

Most textures will be close to tillable but just off, Im sure somebody has knows a good glsl script I can look at. It does not have to be perfect even, just a really good likeness of the texture.

---

<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: [April 6, 2019, 1:37am UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/13 "2019-04-06T01:37:00Z")

</div>

Here we go I need to find a deployment like this:

> **[1406.7338.pdf](https://arxiv.org/pdf/1406.7338.pdf)**
>
> 4.69 MB

---

<div class="post-metadata">

### Author: ![aFalcon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/afalcon/32/7015_2.png) [@aFalcon](https://forum.babylonjs.com/u/aFalcon)
#### Post date: [April 15, 2019, 8:51pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/14 "2019-04-15T20:51:10Z")

</div>

I don’t know if this will help or not but [Book of Shaders Gallery is really good](https://thebookofshaders.com/examples/?chapter=proceduralTexture)

Someday I hope to have time to deepdive that…

---

<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: [June 24, 2019, 6:26pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/15 "2019-06-24T18:26:41Z")

</div>

I figured some people might like this:  
[https://playground.babylonjs.com/#V98HBA#3](https://playground.babylonjs.com/#V98HBA#3)  
its a “direct” port of:  
[https://www.shadertoy.com/view/ld3Gz2](https://www.shadertoy.com/view/ld3Gz2)

**UPDATE**  
Here is how you would enable camera controls from the active camera.  
[https://playground.babylonjs.com/#V98HBA#2](https://playground.babylonjs.com/#V98HBA#2)

_ **UPDATE** _  
I changed the links on here to make it redirect you to the more clearly attributed one.

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [June 24, 2019, 9:18pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/16 "2019-06-24T21:18:51Z")

</div>

This is INSANE!

---

<div class="post-metadata">

### Author: ![nasimiasl](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nasimiasl/32/34_2.png) [@nasimiasl](https://forum.babylonjs.com/u/nasimiasl)
#### Post date: [June 25, 2019, 7:08am UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/17 "2019-06-25T07:08:22Z")

</div>

that incredible very good @Pryme8

---

<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: [June 25, 2019, 6:01pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/18 "2019-06-25T18:01:19Z")

</div>

I cant take any credit that is all IQ’s work.

All I did was convert it to BJS as a postPass, which seems to be the easy way to do shadertoy conversions.

In the past I was making a plane and making a custom shader and doing a bunch of extra steps, this kinda makes it quick.

The benefits of doing it with a mesh though is I can pass it to an rtt and then at different rendersteps change the state of the shader to grab certain information as desired for later processing.

I need to figure out how to have a hidden camera doing this and have it save its hidden output as a texture so I can bind it to the display pass and do simulations that way which I’m thinking will solve some of the complexity issues I have been having with ping-ponging buffers in BJS.

---

<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: [June 25, 2019, 9:13pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/19 "2019-06-25T21:13:53Z")

</div>

Here is something I put a little more energy into.  
[https://www.babylonjs-playground.com/#8GPMLP#6](https://www.babylonjs-playground.com/#8GPMLP#6)

Its accelerated sphere Marching!!!

Woot! actually really kinda excited about this one. I am going to be able to do way way way more with my raymarched scenes now.

To celebrate it I did up my logo as a SDF. 🙂

---

<div class="post-metadata">

### Author: ![aFalcon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/afalcon/32/7015_2.png) [@aFalcon](https://forum.babylonjs.com/u/aFalcon)
#### Post date: [June 25, 2019, 9:24pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/20 "2019-06-25T21:24:07Z")

</div>

Really cool…wish I understood half of it.

To me sphereMarch looks like falcon heavy!

Did not even know about postProcess or onApply.

Thanks… someday I try to catch up a little bit. : )

---

<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: [June 25, 2019, 9:27pm UTC](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677/21 "2019-06-25T21:27:45Z")

</div>

[http://erleuchtet.org/~cupe/permanent/enhanced\_sphere\_tracing.pdf](http://erleuchtet.org/~cupe/permanent/enhanced_sphere_tracing.pdf)

[Next page](https://forum.babylonjs.com/t/shader-talk-conversations-on-glsl/1677.md?page=2)
