<h2>What</h2>
<p>An experiment on GLSL shader and Perlin Noise</p>
<p>The implementation for noise function is borrowed from <a href="https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83">patriciogonzalezvivo/GLSL-Noise.md</a> </p>
<h2>Noise on a sphere</h2>
<h3>Noise on wireframe</h3>
<p><img src="/assets/blog/perlin-noise/screenshot-6.png" alt="Noise on a wireframe"></p>
<h3>Noise on vertices with UV</h3>
<ul>
<li>mapping fragment color to UV</li>
<li>changing vertices using noise</li>
</ul>
<p><img src="/assets/blog/perlin-noise/screenshot-1.jpg" alt="Noise on a sphere"></p>
<h2>Noise based on distance from origin</h2>
<p><img src="/assets/blog/perlin-noise/screenshot-5.png" alt="Noise based on distance"></p>
<h2>Simulate wave-like behavior</h2>
<h3>wave-like behavior on a sphere</h3>
<p><img src="/assets/blog/perlin-noise/screenshot-7.jpg" alt="wave-like behavior on plane"></p>
<p><img src="/assets/blog/perlin-noise/screenshot-3.png" alt="wave-like behavior on plane"></p>
<h2>Finally, apply the noise on image texture</h2>
<h3>the original image</h3>
<p><img src="/assets/blog/perlin-noise/screenshot-9.jpg" alt="original image"></p>
<h3>change texel position</h3>
<p><img src="/assets/blog/perlin-noise/screenshot-4.png" alt="change texel position"></p>
<h3>apply noise on the texture plane</h3>
<p><img src="/assets/blog/perlin-noise/screenshot-10.png" alt="apply noise on the texture plane"></p>
<h3>change texel position with noise</h3>
<p><img src="/assets/blog/perlin-noise/cover.jpeg" alt="texel position with noise"></p>


ZE.

Perlin Noise

What

Noise on a sphere

Noise on wireframe

Noise on vertices with UV

Noise based on distance from origin

Simulate wave-like behavior

wave-like behavior on a sphere

Finally, apply the noise on image texture

the original image

change texel position

apply noise on the texture plane

change texel position with noise

Feedbacks