# bradley/blotter

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/bradley-blotter).**

3,078 stars · 204 forks · JavaScript · other

## Links

- GitHub: https://github.com/bradley/Blotter
- Homepage: https://blotter.js.org
- awesome-repositories: https://awesome-repositories.com/repository/bradley-blotter.md

## Topics

`animation` `creative-coding` `css` `design` `glsl` `glsl-shaders` `javascript` `lsd` `text` `typography` `webgl`

## Description

Blotter is a WebGL text rendering engine and fragment shader text visualizer. It provides a system for composing and previewing stylized text effects by applying custom GLSL fragment shaders to text elements on a web canvas.

The project includes a shader editor for defining and updating custom shader logic and uniforms in real time. This interface allows for the creation of unique visual styles and the modification of rendering variables without reloading the underlying logic.

The engine incorporates performance optimizations for WebGL rendering, utilizing texture atlas batching and a single back buffer to minimize draw calls. It also supports real-time visual animation by synchronizing updates with the display refresh rate.

## Tags

### Graphics & Multimedia

- [Shader-Based Effects](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/text-rendering/shader-based-effects.md) — Implements a high-performance rendering engine that uses custom GLSL fragment shaders to apply visual effects to text.
- [Custom Shader Programming](https://awesome-repositories.com/f/graphics-multimedia/custom-shader-programming.md) — Implements custom fragment shader programming to define the visual appearance of text pixels.
- [Custom Shader Programs](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/materials-shading/custom-shader-programs.md) — Allows users to define custom shader programs that are compiled into GPU-executable code for text effects. ([source](https://cdn.jsdelivr.net/gh/bradley/blotter@master/README.md))
- [Texture Atlases](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/texture-mapping-pipelines/texture-atlases.md) — Uses texture atlas batching to group multiple text elements into a single texture, minimizing GPU draw calls.
- [Real-Time Shader Parameters](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/shaders/material-and-shader-configuration/real-time-shader-parameters.md) — Provides a visual editor to modify shader properties in real-time using uniform parameters. ([source](https://github.com/bradley/Blotter/wiki/Custom-Materials))
- [Text Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/text-rendering.md) — Renders stylized text strings onto a web canvas with configurable shader-based visual effects. ([source](https://cdn.jsdelivr.net/gh/bradley/blotter@master/README.md))
- [Patterned Text Effects](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/text-rendering/patterned-text-effects.md) — Implements artistic, non-standard text rendering using coordinate-based patterns and shader effects.
- [Shader Uniform Management](https://awesome-repositories.com/f/graphics-multimedia/shader-uniform-management.md) — Provides a system for passing dynamic uniform variables to GPU shaders for real-time visual parameterization.
- [Draw Call Batching](https://awesome-repositories.com/f/graphics-multimedia/draw-call-batching.md) — Reduces CPU-to-GPU overhead by batching draw calls for multiple stylized text elements.
- [Render-to-Texture Buffers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/texture-mapping-pipelines/render-to-texture-buffers.md) — Renders stylized text elements into shared off-screen buffers before final screen output.
- [Visual Effect Shaders](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/visual-effects/visual-effect-shaders.md) — Provides a streamlined interface to compose GLSL visual effect shaders for stylized text. ([source](https://blotter.js.org/))

### Web Development

- [Shader-Based Effects](https://awesome-repositories.com/f/web-development/text-styling/shader-based-effects.md) — Applies fragment shaders to text on a canvas to create advanced, GPU-accelerated visual effects. ([source](https://github.com/bradley/Blotter/wiki/Custom-Materials))

### Part of an Awesome List

- [WebGL Rendering Pipelines](https://awesome-repositories.com/f/awesome-lists/devtools/canvas-and-webgl-graphics/webgl-rendering-pipelines.md) — Implements a WebGL rendering pipeline that converts text geometry into shader-manipulated pixel grids.
- [Animations and Effects](https://awesome-repositories.com/f/awesome-lists/devtools/animations-and-effects.md) — Implements smooth visual animations for text effects by synchronizing updates with the display refresh rate. ([source](https://cdn.jsdelivr.net/gh/bradley/blotter@master/README.md))
- [GLSL Editors](https://awesome-repositories.com/f/awesome-lists/devtools/glsl-editors.md) — Provides a real-time interface for writing and testing GLSL shader code specifically for text visual effects.
- [Text Animation Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/text-animation-libraries.md) — API for creating unconventional text effects.

### User Interface & Experience

- [Draw Call Batching](https://awesome-repositories.com/f/user-interface-experience/rendering-optimization/text-rendering-optimizations/draw-call-batching.md) — Minimizes GPU draw calls by using texture atlasing and a shared back buffer for stylized text. ([source](https://blotter.js.org/))
- [Batch Renderers](https://awesome-repositories.com/f/user-interface-experience/rendering-optimizers/batch-renderers.md) — Increases rendering speed by grouping multiple text elements sharing the same effect into single draw calls. ([source](https://blotter.js.org))