Shader | Waving Flag  

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

What is a Shader

A shader is a program written in GLSL (OpenGL Shading Language) that runs on the GPU (Graphics Processing Unit) to determine how 3D objects are rendered on the screen. Shaders are essential for defining the visual appearance of objects in a 3D scene, including their color, lighting, texture, and special effects.

Simple Explanation :

Shaders in Three.js are like special effects artists in a movie. Just like an artist adds visual effects to make a movie scene look amazing, shaders enhance the graphics in a 3D scene to make it look more realistic or artistic. They do this by manipulating how objects look when they are drawn on the screen.

We send a lot of data to the shader :

• Vertices coordinates
• Mesh transformation
• Information about the camera
• Colors
• Textures
• Lights
• Fog
• Etc

Two types of shaders

1. Vertex Shaders

Define the position of each vertex (point) in 3D space. They shape the geometry of objects.

• Function : Transform 3D coordinates to 2D screen coordinates, manage vertex positions, and pass data to the fragment shader.
• Example : Adjusting the position of vertices to animate a waving flag.
• Real-Life Analogy : Imagine you're designing a sculpture. The vertex shader is like the sculptor who shapes the clay into a specific form, deciding where each part of the sculpture should be.

vertex.glsl :

 uniform mat4 modelMatrix;   // apply transformations relative to the Mesh (position, rotation, scale).
 uniform mat4 viewMatrix;   // apply transformations relative to the Camera (position, rotation, fov, near, far).
 uniform mat4 projectionMatrix;   // transform the coordinates into the Clip Space coordinates.

 attribute vec3 position;

 void main() {
   vec4 modelPosition = modelMatrix * vec4(position, 1.0);
   vec4 viewPosition = viewMatrix * modelPosition;
   vec4 projectionPosition = projectionMatrix * viewPosition;

   gl_Position = projectionPosition;
 }

2. Fragment Shaders

Define the color and texture of each pixel on the object. They handle the details of how an object looks.

• Function : Determine the final color of pixels, handle lighting calculations, apply textures, and create visual effects.
• Example : Making a surface look shiny and reflective, like a metal.
• Real-Life Analogy : Once the sculpture is shaped, the fragment shader is like the painter who adds color, texture, and details to the sculpture to make it look realistic or stylized.

fragment.glsl :

 precision mediump float;   // sets the default precision for floating-point variables.

 void main() {
   gl_FragColor = vec4(1.0, 0.6, 0.0, 1.0);   // specifies the color of the pixel.
 }

Attributes

Attributes are variables that hold data specific to each vertex in a 3D model. These variables change from vertex to vertex.

• Attributes could be the position of each vertex, its color, or its texture coordinates.
• Analogy : When rendering a 3D model of a tree, each vertex might have attributes for its position in 3D space, its normal direction (for lighting calculations), and its UV coordinates (for applying textures).

Uniforms

Uniforms are variables in shaders that remain constant for all vertices and pixels during a single rendering pass.

• Uniforms could be the light direction, the color of a light source, or the current time for animations.
• Analogy : Uniforms are like the oven temperature or cooking time in a recipe—these values are the same for the entire batch of cookies (all vertices and fragments).

Varyings

Varyings are variables used to pass data from the "vertex" shader to the "fragment" shader. These values are interpolated, meaning they are smoothly transitioned between vertices across the surface of a polygon.

• Varyings are used for data that needs to be shared between vertex and fragment shaders, such as interpolated colors or texture coordinates.
• Analogy : Varyings are like the sauce that is spread across the pizza. You apply the sauce at a few key vertices (points), and it gets spread out evenly across the whole pizza (interpolated across fragments).

What is GLSL?

GLSL (OpenGL Shading Language) is the programming language used to write shaders. It is designed to run on the GPU and allows fine control over the graphics pipeline. It's close to C language.

GLSL Syntax and Features

1. C-like Syntax :

   • GLSL is syntactically similar to the C programming language, making it familiar to many developers.
   • Supports data types such as int, float, vec2, vec3, vec4, mat2, mat3, mat4, etc.

2. Built-in Functions :

   • Provides a rich set of built-in functions for mathematical operations, texture sampling, geometric calculations, and more.
   • Examples include sin(), cos(), normalize(), dot(), cross(), texture(), etc.

3. Precision Qualifiers :

   • Allows specifying the precision of floating-point calculations.
   • Common qualifiers include highp, mediump, and lowp.

[!IMPORTANT]

Benefits of Using Shaders

1. Enhanced Visuals : Create realistic lighting, shadows, reflections, and textures.
2. Performance Optimization : Offload heavy computations to the GPU, making rendering more efficient.
3. Customization : Craft unique visual effects that are not possible with standard materials.
4. Interactivity : Create dynamic effects that respond to user input or time, like animated water or glowing buttons.

[!CAUTION]

How to fix, SyntaxError: Unexpected identifier 'mat4'

Install: npm i vite-plugin-glsl --save-dev Go to "vite.config.js" :

  import glsl from 'vite-plugin-glsl';
  
  plugins: [
    glsl(), // Handle shader files
  ],

Feel free to delve into the code as it has been written in a straightforward manner for easy understanding.

Try it out immediately, and if you enjoy it, please give me a star.     Shaders | Waving Flag

https://github.com/user-attachments/assets/5d38ae04-0373-4767-99dc-7bc7b28e90b7

Find me around the Web