You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Fragment shaders are the shaders that run directly on geometryafter vertex shaders usually. They can do a lot of things, such as texturing, fog, and normal map effects.
3
+
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.
Copy file name to clipboardExpand all lines: docs/articles/post/ChromaticAberration.md
+8-7Lines changed: 8 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
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.
4
4
5
-
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.
5
+
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.
6
6
7
7
Let's first assume a couple variables we have access to.
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.
36
+
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.
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.
48
+
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.
49
49
50
50
To make this effect more realistic, we can simulate that.
51
51
52
-
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.
52
+
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.
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.
74
+
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.
75
75
76
76
This means that the effect will only really be visible around the edges, which is exactly what we want.
77
77
78
-
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.
78
+
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.
79
79
80
80
```js
81
81
shiftedCoords =abs(shiftedCoords) *2.0;
82
82
```
83
83
84
-
Doubling it brings it back to the original strength, but you can increase this or decrease it however you want to tweak the strength.
84
+
Doubling it brings it back to the original strength, but you can increase or decrease this however you want to tweak the strength.
85
85
86
86
87
87
## Full Program
@@ -111,3 +111,4 @@ void mainImage( out vec4 fragColor, in vec2 fragCoord )
Copy file name to clipboardExpand all lines: docs/articles/vertex/index.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Vertex Shaders
2
2
3
-
Vertex shaders don't get a lot of recognition. They are integral to how we see graphics though, especially 3D graphics.
3
+
Vertex shaders don't get a lot of recognition, but they are integral to how we see graphics, especially 3D graphics.
4
4
5
5
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.
Copy file name to clipboardExpand all lines: docs/index.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
1
# Welcome to the Library of Shaders
2
2
3
-
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.
3
+
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.
4
4
5
-
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.
5
+
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.
6
6
7
7
8
8
## Variables
@@ -32,4 +32,4 @@ All contributions are welcomed, and the contribution guide can be viewed on the
32
32
33
33
## Licensing and Copyright
34
34
35
-
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).
35
+
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).
0 commit comments