# Experience GLSL immediately by seeing the book Go to [The Book of Shaders](https://thebookofshaders.com/) by [**Patricio Gonzalez Vivo**](https://patriciogonzalezvivo.com/) and [Jen Lowe](https://www.jenlowe.net/) **What is GLSL?** - **GLSL stands for OpenGL Shading Language.** It's a high-level programming language designed specifically for graphics programming within the [[OpenGL]] ([[Open Graphics Library]]) framework. - **Purpose:** GLSL's primary role is to write programs called **shaders**. Shaders are executed directly on your Graphics Processing Unit (GPU) and help determine how 3D models and other graphical elements are rendered on your screen. **Key Features of GLSL** - **C-like Syntax:** If you're familiar with C or C++, you'll find GLSL's syntax quite comfortable. - **Graphics-focused:** GLSL includes built-in data types and functions specifically for handling: - Vectors (for positions, directions, colors) - Matrices (for transformations like scaling, rotation, and translation) - Textures (images applied to surfaces) - **Shader Types:** GLSL supports different types of shaders, each with a specific role within the rendering pipeline: - Vertex Shaders: Manipulate individual vertices of 3D models (position, color, etc.). - Fragment Shaders: Determine the final color of each pixel on the screen. - Geometry Shaders: Can generate new geometry on the fly. - Tessellation Shaders: Increase geometric detail of models. - Compute Shaders: Perform general-purpose computations on the GPU. **What is GLSL used for?** - **Real-time 3D graphics:** Video games, simulations, and CAD software heavily rely on GLSL for rendering complex scenes. - **Special effects:** GLSL enables stunning effects like lighting, shadows, reflections, water simulations, particle systems, and more. - **Image and video processing:** GLSL's parallel processing power on the GPU makes it suitable for image filters, video editing, etc. - **Scientific visualization:** Complex datasets can be visualized interactively using GLSL. - **General-purpose computing on GPUs (GPGPU):** GLSL can be used for tasks outside of graphics, like machine learning and computational simulations. **Learning GLSL** If you're interested in learning GLSL, there are numerous resources available: - **The OpenGL website:** ([https://www.opengl.org/](https://www.opengl.org/)) - **LearnOpenGL:** ([https://learnopengl.com/](https://learnopengl.com/)) - **The Book of Shaders:** ([https://thebookofshaders.com/](https://thebookofshaders.com/)) - **Online tutorials and courses** (Udemy, Coursera, etc.) # P5.js and GLSL **What is p5.js?** - **JavaScript Library:** [[p5.js]] is a JavaScript library specifically designed to make creative coding accessible to artists, designers, educators, and beginners. - **Based on Processing:** p5.js draws inspiration from the Processing programming language, which aims to simplify coding within a visual context. - **Focus on Ease of Use:** p5.js provides a friendly set of functions for drawing shapes, handling user input, creating animations, and more. This minimizes the technical overhead, allowing users to focus on the creative aspects of their projects. **How p5.js Relates to GLSL** - **WebGL Mode:** p5.js has a [[WebGL]] mode that lets you take advantage of hardware-accelerated 3D graphics using OpenGL and GLSL. This mode unlocks the power to create more complex and visually stunning projects. - **Accessing GLSL:** Within p5.js's WebGL mode, you can write custom GLSL shaders and integrate them directly into your p5.js sketches. Here's how it generally works: 1. **Shader Code:** You write your GLSL fragment and vertex shaders as strings within your p5.js code. 2. **Loading Shaders:** p5.js functions help load and compile these shaders for the GPU. 3. **Passing Data:** You can pass data from your p5.js sketch (like positions, colors, textures) to your shaders using uniforms and attributes. 4. **Rendering:** p5.js handles the process of using your shaders within the rendering pipeline. **Why use p5.js with GLSL?** - **Accessibility:** p5.js streamlines the process of working with shaders and WebGL, making it less intimidating for those new to graphics programming. - **Prototyping:** You can quickly experiment with visual ideas and shader effects within the familiar p5.js environment. - **Creative Expression:** Combine the ease of use of p5.js with the immense power and customization offered by GLSL. **Example** A simple p5.js sketch with a GLSL shader can look something like [https://editor.p5js.org/](https://editor.p5js.org/) or other coding repositories. **Resources to Learn More** - **p5.js reference:** [https://p5js.org/reference/](https://p5js.org/reference/) (especially the WebGL section) - **The Book of Shaders:** [https://thebookofshaders.com/](https://thebookofshaders.com/) - **p5.js and Shaders examples:** Search on the p5.js web editor or coding repositories like Github. # References ```dataview Table title as Title, authors as Authors where contains(subject, "GLSL" ) sort modified desc, authors, title ```