# GLSL rendering technics

**URL:** <https://discourse.processing.org/t/glsl-rendering-technics/2708>\
**Category:** Processing\
**Created:** [August 16, 2018, 11:54pm UTC](https://discourse.processing.org/t/glsl-rendering-technics/2708 "2018-08-16T23:54:29Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [August 16, 2018, 11:54pm UTC](https://discourse.processing.org/t/glsl-rendering-technics/2708/1 "2018-08-16T23:54:29Z")

</div>

> hello everybody! im in a long and beutiful road of learning shaders. right now, im using a lot the render to texture technic, passing a buffer as a texture to a shader and render that to another texture… etc. im using Processing lenguaje, saving buffers in PGraphics Objects. but i wish expand my rendering technics so i could get differents results. is another technic that i must to know? i see some people works using shaders and i wonder how it do…  
> for example this:
> 
> [https://www.instagram.com/p/BmHOm21F…en-by=kyndinfo](https://www.instagram.com/p/BmHOm21F9Gp/?taken-by=kyndinfo)
> 
> its look like a sphere with a texture, but the trail is what i wish want to know how can i do it, seems particles, or smoke… what are they?
> 
> similar to
> 
> [Versum 2017 (excerpts) on Vimeo](https://vimeo.com/222723783)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [August 17, 2018, 8:20am UTC](https://discourse.processing.org/t/glsl-rendering-technics/2708/2 "2018-08-17T08:20:53Z")

</div>

I think you can create cool trail effects by applying a glsl filter, in which you set the color of a pixel to nearby pixel color. You choose the distance and direction of the sampling based on the hue, saturation and brightness of the current pixel. This is how it can look like:  
https://player.vimeo.com/video/250342254?app_id=122963

Here some code in ShaderToy (notice the two code tabs):  
[https://www.shadertoy.com/view/Xl2BWw](https://www.shadertoy.com/view/Xl2BWw)

---

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [August 19, 2018, 9:33pm UTC](https://discourse.processing.org/t/glsl-rendering-technics/2708/3 "2018-08-19T21:33:26Z")

</div>

thanks @hamoid ! do you have the sketch of the video? just for see how you pass the information to shaders.

---

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [August 19, 2018, 9:35pm UTC](https://discourse.processing.org/t/glsl-rendering-technics/2708/4 "2018-08-19T21:35:26Z")

</div>

by the way @hamoid, see in you others vimeo videos some kind of 3D noise cylinder (think you do in open frameworks), do you use a librarie? a few days later i opened a thread about it here in the forum! thanks for the data

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [August 20, 2018, 8:12am UTC](https://discourse.processing.org/t/glsl-rendering-technics/2708/5 "2018-08-20T08:12:22Z")

</div>

I don’t think I pass any information explicitly to the shader. I only draw two closed irregular shapes and then apply a filter with a shader. Everything that happens is because of the cumulative nature of the shader (applying it once per frame without clearing the screen). On each frame all the pixels are moved slightly by the shader depending on their HSB values. This creates unexpected shapes and motions.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [August 20, 2018, 8:16am UTC](https://discourse.processing.org/t/glsl-rendering-technics/2708/6 "2018-08-20T08:16:30Z")

</div>

It’s hard to say without knowing which video exactly you mean, but I don’t think I used any libraries for creating shapes. I just calculated where to place each vertex 🙂 Creating simple shapes like a cylinder or a torus is not that hard. Then you can deform them by applying some displacement to all the vertices.