Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shahramshakiba/shader-patterns-p17
Shader Patterns ⁞|⁞ Shader patterns are techniques used in computer graphics to create visual effects on 3D models. ⁞|⁞ ⚪Three.js 🔵GLSL
https://github.com/shahramshakiba/shader-patterns-p17
Last synced: 2 days ago
JSON representation
Shader Patterns ⁞|⁞ Shader patterns are techniques used in computer graphics to create visual effects on 3D models. ⁞|⁞ ⚪Three.js 🔵GLSL
- Host: GitHub
- URL: https://github.com/shahramshakiba/shader-patterns-p17
- Owner: ShahramShakiba
- Created: 2024-07-17T16:32:19.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-22T09:36:05.000Z (4 months ago)
- Last Synced: 2024-07-22T12:55:43.607Z (4 months ago)
- Language: GLSL
- Homepage:
- Size: 123 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
_Shader Patterns_ 
### 
_Description_
> To begin with, it is important to note that, this project have been sourced from an exceptional `Three.js Journey` Course.
### 👤 Instructed by a _proficient_ and _expert educator_ _"Bruno Simon"_ .
> [!TIP]
> Within the _"fragment.glsl"_ file, you will locate the code corresponding to each pattern. I have provided comments and marked each one for easy identification.
## Shader Patterns
Pattern 01
Pattern 02
Pattern 03
Pattern 04
Pattern 05
Pattern 06
Pattern 07
Pattern 08
Pattern 09
Pattern 10
Pattern 11
Pattern 12
Pattern 13
Pattern 14
Pattern 15
Pattern 16
Pattern 17
Pattern 18
Pattern 19
Pattern 20
Pattern 21
Pattern 22
Pattern 23
Pattern 24
Pattern 25
Pattern 26
Pattern 27
Pattern 28
Pattern 29
Pattern 30
Pattern 31
Pattern 32
Pattern 33
Pattern 34
Pattern 35
Pattern 36
Pattern 37
Pattern 38
Pattern 39
Pattern 40
Pattern 41
Pattern 42
Pattern 43
Pattern 44
Pattern 45
Pattern 46
Pattern 47
Pattern 48
Pattern 49
Pattern 50
Pattern 51
Pattern 52
Pattern 53
Pattern 54
Pattern 55
Pattern 56
Pattern 57
Pattern 58
Pattern 59
Pattern 60
Pattern 61
Pattern 62
Pattern 63
Pattern 64
Pattern 65
Pattern 66
Pattern 67
Pattern 68
Pattern 69
Pattern 70
## What are Shader Patterns
Shader patterns are techniques used in computer graphics to create visual effects on 3D models. They are pieces of code that run on the GPU to determine the color of each pixel on the screen.
Shaders can create complex visual effects like lighting, shadows, reflections, and textures.
> ### Patterns in Shaders
These are "reusable" solutions or techniques used to solve common graphics problems. They help in creating specific visual effects consistently across different projects.
> ### Why Use Patterns in Shaders?
1. Efficiency :
- Patterns provide a tested and optimized way to achieve common visual effects. Instead of writing shader code from scratch, you can use or adapt existing patterns.
2. Consistency :
- Using patterns ensures that similar visual effects look the same across different parts of your application or different applications altogether.
3. Simplification :
- Patterns simplify the shader development process. Developers can focus on creating new effects rather than reinventing existing ones.
## Shader Patterns and UV Drawing
> ### Why Drawing Instead of Using Textures?
#### _Procedural Textures_ :
When shaders create patterns or textures mathematically rather than using image files, this is called procedural texturing. Procedural textures are generated on the fly by the shader code.
> ### Advantages of Procedural Textures:
1. ` Scalability ` :
Procedural textures can be scaled to any size without losing quality.
2. ` Variation ` :
They can produce infinite variations, which is great for natural phenomena like noise, wood grain, or marble patterns.
3. ` Performance ` :
Sometimes, procedural textures can be more efficient because they reduce the need for memory and texture fetching.
> ### UV Drawing
- _UV Mapping_ :
This is the process of projecting a 2D texture onto a 3D model. UV coordinates define how the 2D texture maps to the 3D surface.
- _UV Drawing_ :
In the context of shaders, "drawing" with UV coordinates means creating patterns directly in the shader using mathematical functions that operate on the UV coordinates.
So, shaders can "draw" patterns directly based on UV coordinates, and this can be preferable in certain scenarios due to the benefits of procedural generation.
## UV Coordinates
UV coordinates are 2D coordinates used in 3D modeling to map textures onto the surfaces of 3D models.
- ` Range ` :
- Typically, UV coordinates range from (0,0) to (1,1), covering the entire texture space.
- ` U and V Axes ` :
- The U and V axes correspond to the horizontal and vertical axes of the texture, respectively.
> ### How UV Coordinates Work:
1. _Mapping_ :
- When you apply a texture to a 3D model, each vertex of the model is associated with a UV coordinate. This tells the renderer which part of the texture should be mapped to that vertex.
2. _Interpolation_ :
- The renderer interpolates the UV coordinates across the surface of the polygon, determining how the texture pixels (texels) map to the pixels on the screen.
> [!IMPORTANT]
> #### Benefits of Using Shader Patterns
>> 1. Improved Performance :
Patterns are often optimized for performance. Using them can lead to faster and more efficient rendering.
>> 2. Code Reusability :
Patterns can be reused across different projects, saving development time and effort.
>> 3. Easier Maintenance :
Patterns are well-documented and understood by many developers, making it easier to maintain and update shader code.
>> 4. Learning and Sharing :
Shader patterns help in learning how to create various effects and share knowledge within the developer community.
Feel free to delve into the code as it has been written in a straightforward manner for easy understanding.
https://github.com/user-attachments/assets/dfa5f1c6-d007-46e8-8ff1-a1c22db696a3
***
### 
_Please contact me for collaboration or inquiries._
