Pixel Difference Operator - creating pixel diffusion effects - video tutorial

Опубликовано: 04 Июль 2026
на канале: cables_gl
1,946
66

Pixel Difference is a great tool for working on pixel flow and diffusion effects to add interesting liquid like effects. We take a look at some examples and then start from the beginning, creating a pixel diffusion effect from scratch. Pixel Difference is quite flexible and can be used for texture effects on your final image, displacement maps, normal maps and even to drive particle systems.

0:00 - intro & examples
0:47 - image example
2:00 - Render2Texture example
2:29 - as a displacement and normal map example
3:07 - interactive normal map with phong material example
4:17 - colorized with gradients example
4:40 - starting a new patch
5:10 - creating the input texture
6:07 - adding Pixel Difference effect
6:33 - Pixel Difference Strength parameter
6:56 - Pixel Difference Step parameter
7:47 - Pixel Difference Method section
11:09 - adjusting Strength and Step
13:55 - adding a feedback loop
15:53 - adjusting Pixel Displacement for Red Green input
16:07 - adjusting patch parameters to create a pixel flow
19:36 - HDR textures for pixel flows
20:33 - adding a Color Map with a palette to final image
21:43 - how to create normal maps with Pixel Difference

examples from the video:
image : https://cables.gl/p/95rUpS
displacement and normal map : https://cables.gl/p/ccd9qS
interactive normal map with phong material : https://cables.gl/p/HBSNAS
colorized with gradients : https://cables.gl/p/WfjLAS


Documentation Page for Pixel Difference Operator :
https://cables.gl/op/Ops.Gl.TextureEf...

Documentation Page for Pixel Displacement Operator :
https://cables.gl/op/Ops.Gl.TextureEf...

Copy Texture OP tutorial:
   • Copy Texture operator deep dive - basics a...  

Normal Map wikipedia entry (X,Y,Z color mapping method explanation) :
https://en.wikipedia.org/wiki/Normal_...


New to cables.gl? check out our channel and start creating your own webgl projects for free
https://cables.gl