https://github.com/shahramshakiba/shader-patterns-p17
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: 4 months ago
JSON representation
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 (12 months ago)
- Default Branch: main
- Last Pushed: 2024-07-22T09:36:05.000Z (12 months ago)
- Last Synced: 2025-01-16T18:00:13.287Z (6 months ago)
- Language: GLSL
- Homepage:
- Size: 123 KB
- Stars: 8
- 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
***