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_ threejs logo

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