deploy: 8a3609f

Author: Snorfield

articles/fragment/index.html

@@ -136,7 +136,7 @@
                     <div class="col-md-9" role="main">
 
 <h1 id="fragment-shaders">Fragment Shaders</h1>
-<p>Fragment shaders are the shaders that run directly on geometry after vertex shaders usually. They can do a lot of things, such as texturing, fog, and normal map effects.</p></div>
+<p>Fragment shaders are the shaders that run directly on geometry, usually after vertex shaders. They can do a lot of things, such as texturing, fog, and normal map effects.</p></div>
             </div>
         </div>
 

articles/post/ChromaticAberration/index.html

@@ -145,7 +145,7 @@
 
 <h1 id="chromatic-aberration">Chromatic Aberration</h1>
 <p>Chromatic Aberration is an effect commonly observed in images, when the camera can't focus all color channels onto a point. This results in different colors being in slightly different positions.</p>
-<p>In shaders, this effect can be simulated by offsetting the position at which we sample each color channel. This is quite simple, but the value by which you offset needs to be quite small to look any good.</p>
+<p>In shaders, this effect can be simulated by offsetting the position at which we sample each color channel. This is quite simple, but the value by which you offset needs to be quite small in order to look any good.</p>
 <p>Let's first assume a couple variables we have access to.</p>
 <ul>
 <li><code>fragCoord</code></li>
@@ -165,14 +165,14 @@ <h1 id="chromatic-aberration">Chromatic Aberration</h1>
 float green = texture(iChannel0, normalizedCoords + greenOffset).g;
 vec2 blueAlpha = texture(iChannel0, normalizedCoords + blueOffset).ba;
 </code></pre>
-<p>Using <a href="https://en.wikipedia.org/wiki/Swizzling_(computer_graphics)">swizzling</a>, or accessing only a specific component of a vector, we can easily only get the value we need. Notice that for the last channel, I use a vector 2 instead of a float, because of course, we need to get the alpha channel as well. We'll just use the blue offset to sample the alpha channel.</p>
+<p>Using <a href="https://en.wikipedia.org/wiki/Swizzling_(computer_graphics)">swizzling</a>, or accessing only a specific component of a vector, we can easily get only the value we need. Notice that for the last channel, I use a vec2 instead of a float, because, of course, we need to get the alpha channel as well. We'll just use the blue offset to sample the alpha channel.</p>
 <p>Now, we can join it all together.</p>
 <pre><code class="language-js">fragColor = vec4(red, green, blueAlpha);
 </code></pre>
 <h2 id="edge-strengthing">Edge Strengthing</h2>
-<p>So, we've constructed our output color with the offset channels. This is often times enough, but realistically, you'll only see chromatic aberration near the very edges of images, and not so much the center.</p>
+<p>So, we've constructed our output color with the offset channels. This is oftentimes enough, but realistically, you'll only see chromatic aberration near the very edges of images, and not so much at the center.</p>
 <p>To make this effect more realistic, we can simulate that.</p>
-<p>We have the current normalized position in <code>normalizedCoords</code>. Now this ranges from 0 to 1, but with a bit of clever math we can get something cool.</p>
+<p>We have the current normalized position in <code>normalizedCoords</code>. At the moment this ranges from 0 to 1, but with a bit of clever math we can get something cool.</p>
 <p>First, let's shift our coordinates over.</p>
 <pre><code class="language-js">vec2 shiftedCoords = normalizedCoords - 0.5;
 </code></pre>
@@ -184,12 +184,12 @@ <h2 id="edge-strengthing">Edge Strengthing</h2>
 float green = texture(iChannel0, normalizedCoords + (shiftedCoords * greenOffset)).g;
 vec2 blueAlpha = texture(iChannel0, normalizedCoords + (shiftedCoords * blueOffset)).ba;
 </code></pre>
-<p>So you see, the values range from 0.5 at the bottom left, to 0.5 at the top right. This means that in the center, the values are 0.0, or close to it. We're effectively reducing our offset by how close it is to the center. </p>
+<p>So, you see, the values range from 0.5 at the bottom left, to 0.5 at the top right. This means that in the center, the values are 0.0, or around it. We're effectively reducing our offset by how close it is to the center. </p>
 <p>This means that the effect will only really be visible around the edges, which is exactly what we want.</p>
-<p>However, it's probably not going to be that visible, as we've effectively halved it, seeing how we're multiplying by at most, 0.5. So we can modify our absolute value line to increase it.</p>
+<p>However, it's probably not going to be that visible, as we've effectively halved it, seeing as how we're multiplying by at most, 0.5. So, we can modify our absolute value line to increase it.</p>
 <pre><code class="language-js">shiftedCoords = abs(shiftedCoords) * 2.0;
 </code></pre>
-<p>Doubling it brings it back to the original strength, but you can increase this or decrease it however you want to tweak the strength.</p>
+<p>Doubling it brings it back to the original strength, but you can increase or decrease this however you want to tweak the strength.</p>
 <h2 id="full-program">Full Program</h2>
 <pre><code class="language-js">const float STRENGTH = 2.0;
 

articles/post/index.html

@@ -136,7 +136,7 @@
                     <div class="col-md-9" role="main">
 
 <h1 id="post-processing-shaders">Post Processing Shaders</h1>
-<p>Post processing shaders are, well, they are what they sound like. These shaders run after, or post, processing happens. </p>
+<p>Post processing shaders are what they sound like. These shaders run after (post-) processing happens. </p>
 <p>Instead of affecting how objects are drawn, they can apply final visual effects, before the user sees the frame.</p>
 <p>Post processing effects can include:</p>
 <ul>

articles/vertex/index.html

@@ -136,7 +136,7 @@
                     <div class="col-md-9" role="main">
 
 <h1 id="vertex-shaders">Vertex Shaders</h1>
-<p>Vertex shaders don't get a lot of recognition. They are integral to how we see graphics though, especially 3D graphics.</p>
+<p>Vertex shaders don't get a lot of recognition, but they are integral to how we see graphics, especially 3D graphics.</p>
 <p>Vertex shaders are responsible for running on vertices, or the points in our 3D model for example. They might handle converting world coordinates into screen-space coordinates, or perhaps procedural geometry deformation.</p>
 <p>They also pass a lot of data into fragment shaders, to enable them function properly (such as colors, or UVs).</p></div>
             </div>

index.html

@@ -148,8 +148,8 @@
                     <div class="col-md-9" role="main">
 
 <h1 id="welcome-to-the-library-of-shaders">Welcome to the Library of Shaders</h1>
-<p>The Library of Shaders is an open-source project that intends to release <strong>copyright and license free</strong> examples and explanations for shader effects, in order to empower developers to learn and develop shader effects.</p>
-<p>All shader code is written to be valid <strong>GLSL</strong> or <strong>OpenGL Shading Language</strong>. We define a few variables which match the <a href="https://www.shadertoy.com/new">ShaderToy</a> environment for ease of testing, but they can be swiftly adapted.</p>
+<p>The Library of Shaders is an open-source project that intends to release <strong>copyright and license free</strong> examples and explanations of miscellaneous shader effects, in order to empower developers to learn and develop shader effects themselves.</p>
+<p>All shader code here is written to be valid <strong>GLSL</strong> or <strong>OpenGL Shading Language</strong>. We define a few variables which match the <a href="https://www.shadertoy.com/new">ShaderToy</a> environment for ease of testing, but they can be easily adapted as needed.</p>
 <h2 id="variables">Variables</h2>
 <pre><code class="language-js">Shader Inputs
 uniform vec3      iResolution;           // viewport resolution (in pixels)
@@ -168,7 +168,7 @@ <h2 id="variables">Variables</h2>
 <h2 id="contributing">Contributing</h2>
 <p>All contributions are welcomed, and the contribution guide can be viewed on the <a href="https://github.com/Snorfield/The-Library-Of-Shaders">github repository</a>. This library is built by developers for developers, and we appreciate everyone's help.</p>
 <h2 id="licensing-and-copyright">Licensing and Copyright</h2>
-<p>This entire library and all work inside it is licensed <strong>Creative Commons Zero</strong>. You can do anything you want with it, including clone the entire website. The license information is avalible on the <a href="https://github.com/Snorfield/The-Library-Of-Shaders/blob/main/LICENSE">repository</a>.</p></div>
+<p>This entire library, and all work inside it, is licensed <strong>Creative Commons Zero</strong>. You can do anything you want with it, including clone the entire website. The license information is avalible on the <a href="https://github.com/Snorfield/The-Library-Of-Shaders/blob/main/LICENSE">repository</a>.</p></div>
             </div>
         </div>
 
@@ -250,5 +250,5 @@ <h4 class="modal-title" id="keyboardModalLabel">Keyboard Shortcuts</h4>
 
 <!--
 MkDocs version : 1.6.1
-Build Date UTC : 2025-11-05 02:30:01.442789+00:00
+Build Date UTC : 2025-11-05 03:38:12.159606+00:00
 -->