Learning to create an infinite grid procedurally using GLSL shaders. This post contains my notes, lessons and findings, and is intended for personal reference. Therefore, you might find errors, misjudgments, and other issues, which are fine by me because my intention was to learn by teaching myself. In a way, I was being my own rubber duck.
The Best Darn Grid Shader (Yet)
For as long as I’ve been writing shaders, there’s been one specific shader I’ve always tried to write…
stack.gl
Before getting started with stackgl, you'll want to get familiar with the basics of WebGL and GLSL. One place to start would be by trying out one of our graphics-themed NodeSchool workshops. Shader School and WebGL Workshop are interactive and may be taken in any order.
Making Worlds: Introduction
In this multi-part series I try to make a procedural planet generator that runs on the GPU.
modular and versioned GLSL
a WebGL demo of glsl-lut, for efficient color transforms on the GPU. source code here Contents # Intro glslify Installing Dependencies Compiling The Shader Relative Requires Example Modules The Awesomeness of NPM Unit Testing Extras As a Source...
Shades of Halftone - The Blog of Maxime Heckel
An interactive deep dive into building halftone shaders in GLSL, covering everything from classic dot patterns and CMYK color separation to Moiré interference, gooey effects, and animated displacement.
Evaluating and Sampling Glinty NDFs in Constant Time
Geometric features between the micro and macro scales produce an expressive family of visual effects grouped under the term 'glints'. Efficiently rendering these effects amounts to finding the highlights caused by the geometry under each pixel. To allow for fast rendering, we represent our faceted geometry as a 4D point process on an implicit multiscale grid, designed to efficiently find the facets most likely to cause a highlight. The facets' normals are generated to match a given micro-facet normal distribution such as Trowbridge-Reitz (GGX) or Beckmann, to which our model converges under increasing surface area. Our method is simple to implement, memory-and-precomputation-free, allows for importance sampling and covers a wide range of different appearances such as anisotropic as well as individually colored particles. We provide a base implementation as a standalone fragment shader.
Sparse Virtual Shadow Maps
Devlogs and tutorials about GPGPU and graphics programming
Visualizing GL_NV_shader_sm_builtins
Using GL_NV_shader_sm_builtins to visualize Streaming Multiprocessors and Warps
Lindenmayer Systems
Let me show you how to use Lindenmayer systems to produce beautiful images like this one:
An In-Depth look at Lerp, Smoothstep, and Shaping Functions
Hash Functions for GPU Rendering – Nathan Reed’s coding blog
Pixels and polygons and shaders, oh my!
Stylized GGX shading | Alexandre Lamure
A practical guide to stylized GGX shading: mixing sharp toon specular highlights with soft PBR gradients.
GRID: A simple visual cheatsheet for CSS Grid Layout
Learn all about the properties available in CSS Grid Layout through simple visual examples.
