SQL Shader
Try the DuckDB-WASM Live Demo Here.
A browser-based SQL shader editor that uses database engines as pixel shaders.
Write SQL queries that run on every frame to generate real-time, procedural graphics. The application is designed to be a coding tool for exploring the performance and capabilities of different database engines on cpu-bound queries.
If you are familiar with Shadertoy - that's Shadertoy, in SQL.
It currently supports the following database engines:
- DuckDB-WASM: Runs entirely in the browser using WebAssembly. No server required! Can run your on phone as well!
- ClickHouse: Connects to a 'remote' (as external to the browser) ClickHouse server via its HTTP interface. It can be a local instance running on your machine. See quickstart on how to run it in docker.
- DataFusion: Connects to a 'remote' (as external to the browser) DataFusion server, similar to ClickHouse
See adding a new engine if you want to integrate a new database engine.
Features
- Live SQL Editor: editor with SQL syntax highlighting, autocompiling as you type.
- Real-time Rendering: render the shader every frame based on your SQL query's output.
- Performance Profiling: profile your query with a simple click.
- Configurable Environment: adjust resolution, zoom, editor and more to your flow.
sql-shader-clickhouse-walkthrough.mp4
Quick Start
This project uses just as a command runner to simplify starting the required services (Caddy web server and ClickHouse).
-
Prerequisites:
- Install Docker.
- Install
just.
-
Configure (Optional):
- Open the
justfilein the project root. - Set the
ch_passwordvariable to your desired ClickHouse password. Default issql_shader
- Open the
-
Run:
- Start all services (Caddy web server and ClickHouse):
- Point your browser to
http://localhost:8000.
-
Stop:
- To stop all services:
-
Help:
- To see all available commands and their descriptions:
How it works
Please start from Getting Started to understand how it works.
Why a SQL-based shader editor?
This is a very good question, and the best answer is: why not ? 😏
It's a fun way to delve into database engines internals, especially when it comes to understanding some of their modern performance optimisation techniques. The main idea is to keep a very tight loop between making a change and see its impact by providing an easy way to access the profiling info each engine offers.
Some prior inspiring work:
- MySQL Raytracer
- DuckDB-Doom
- Building a DOOM-like multiplayer shooter in pure SQL
- Shadertoy
- Inigo Quilez's shaders articles
- chdig
The tool was built while trying to create a simple ASCII based SQL shader renderer and the subsequent need to improve its performance. How to turn 10 lines shell script into a full blown webapp 🤦
You can stil invoke it by running
sql-shader-terminal-walkthrough.mp4
License
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.
Third-Party Dependencies
SQL Shader uses several open-source libraries with different licenses. See THIRD-PARTY-LICENSES.md for complete details.
The optional Strudel audio feature (accessed via the "Audio" button) is licensed under AGPL-3.0, which has copyleft requirements. The Strudel integration is:
- Optional - not required for core SQL Shader functionality
- Isolated - contained in
src/inputs/strudel_input.js - Loaded dynamically - from https://strudel.cc
If you modify and deploy SQL Shader as a network service with Strudel enabled, you must comply with AGPL-3.0. For details, see the THIRD-PARTY-LICENSES.md file.