Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Library of GLSL shaders and explanations to empower developers to learn shader d
So you want to add your own articles or other stuff to this project. That's awesome, there's just a few rules for contribution.

### Rule 1
Use the ShaderToy uniforms in all your code.
Use the ShaderToy uniforms in all of your code.

```js
Shader Inputs
Expand Down
2 changes: 1 addition & 1 deletion docs/articles/fragment/index.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Fragment Shaders

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.
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.

15 changes: 8 additions & 7 deletions docs/articles/post/ChromaticAberration.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

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.

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.
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.

Let's first assume a couple variables we have access to.

Expand Down Expand Up @@ -33,7 +33,7 @@ float green = texture(iChannel0, normalizedCoords + greenOffset).g;
vec2 blueAlpha = texture(iChannel0, normalizedCoords + blueOffset).ba;
```

Using [swizzling](https://en.wikipedia.org/wiki/Swizzling_(computer_graphics)), 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.
Using [swizzling](https://en.wikipedia.org/wiki/Swizzling_(computer_graphics)), 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.

Now, we can join it all together.

Expand All @@ -45,11 +45,11 @@ fragColor = vec4(red, green, blueAlpha);

## Edge Strengthing

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.
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.

To make this effect more realistic, we can simulate that.

We have the current normalized position in `normalizedCoords`. Now this ranges from 0 to 1, but with a bit of clever math we can get something cool.
We have the current normalized position in `normalizedCoords`. At the moment this ranges from 0 to 1, but with a bit of clever math we can get something cool.

First, let's shift our coordinates over.

Expand All @@ -71,17 +71,17 @@ float green = texture(iChannel0, normalizedCoords + (shiftedCoords * greenOffset
vec2 blueAlpha = texture(iChannel0, normalizedCoords + (shiftedCoords * blueOffset)).ba;
```

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.
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.

This means that the effect will only really be visible around the edges, which is exactly what we want.

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.
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.

```js
shiftedCoords = abs(shiftedCoords) * 2.0;
```

Doubling it brings it back to the original strength, but you can increase this or decrease it however you want to tweak the strength.
Doubling it brings it back to the original strength, but you can increase or decrease this however you want to tweak the strength.


## Full Program
Expand Down Expand Up @@ -111,3 +111,4 @@ void mainImage( out vec4 fragColor, in vec2 fragCoord )




2 changes: 1 addition & 1 deletion docs/articles/post/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Post Processing Shaders

Post processing shaders are, well, they are what they sound like. These shaders run after, or post, processing happens.
Post processing shaders are what they sound like. These shaders run after (post-) processing happens.

Instead of affecting how objects are drawn, they can apply final visual effects, before the user sees the frame.

Expand Down
2 changes: 1 addition & 1 deletion docs/articles/vertex/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Vertex Shaders

Vertex shaders don't get a lot of recognition. They are integral to how we see graphics though, especially 3D graphics.
Vertex shaders don't get a lot of recognition, but they are integral to how we see graphics, especially 3D graphics.

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.

Expand Down
6 changes: 3 additions & 3 deletions docs/index.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Welcome to the Library of Shaders

The Library of Shaders is an open-source project that intends to release **copyright and license free** examples and explanations for shader effects, in order to empower developers to learn and develop shader effects.
The Library of Shaders is an open-source project that intends to release **copyright and license free** examples and explanations of miscellaneous shader effects, in order to empower developers to learn and develop shader effects themselves.

All shader code is written to be valid **GLSL** or **OpenGL Shading Language**. We define a few variables which match the [ShaderToy](https://www.shadertoy.com/new) environment for ease of testing, but they can be swiftly adapted.
All shader code here is written to be valid **GLSL** or **OpenGL Shading Language**. We define a few variables which match the [ShaderToy](https://www.shadertoy.com/new) environment for ease of testing, but they can be easily adapted as needed.


## Variables
Expand Down Expand Up @@ -32,4 +32,4 @@ All contributions are welcomed, and the contribution guide can be viewed on the

## Licensing and Copyright

This entire library and all work inside it is licensed **Creative Commons Zero**. You can do anything you want with it, including clone the entire website. The license information is avalible on the [repository](https://github.com/Snorfield/The-Library-Of-Shaders/blob/main/LICENSE).
This entire library, and all work inside it, is licensed **Creative Commons Zero**. You can do anything you want with it, including clone the entire website. The license information is avalible on the [repository](https://github.com/Snorfield/The-Library-Of-Shaders/blob/main/LICENSE).