Member-only story
WebGL 2 Basics: Drawing a Full-Screen Quad
As mentioned in the previous article, WebGL 2 uses a programmable pipeline.
This article covers shaders and GLSL language fundamentals — the essential building blocks before tackling fluid simulation.
Before creating complex effects, you need to understand how WebGL fundamentally renders anything to the screen. Unlike declarative approaches like HTML/CSS, WebGL requires to explicitly define the geometry and the appearance using custom programs. These programs, called shaders, are written in GLSL and executed directly on the GPU.
Code to the article: repo
This article is also available on my website at ostefani.dev.
Introduction to GLSL ES 3.0
GLSL ES 3.0 (OpenGL Shading Language for Embedded Systems version 3.0) is a high-level shading language with a C-like syntax, specifically designed for graphics processing units (GPUs) in embedded systems and web browsers.
The GLSL ES 3.00 specification requires every shader to begin with `#version 300 es` to specify GLSL version for Embedded Systems. Without this directive, the shader won’t compile. It also requires precision qualifiers in fragment shaders (e.g., `precision mediump float;`)
