Shadertoy.com is an online community and tool for creating and sharing

shader In computer graphics, a shader is a computer program that calculates the appropriate levels of light, darkness, and color during the rendering of a 3D scene - a process known as ''shading''. Shaders have evolved to perform a variety of spec ...

s through

WebGL WebGL (Short for Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated ...

, used for both learning and teaching

3D computer graphics 3D computer graphics, or “3D graphics,” sometimes called CGI, 3D-CGI or three-dimensional computer graphics are graphics that use a three-dimensional representation of geometric data (often Cartesian) that is stored in the computer for th ...

in a

web browser A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on ...

Overview

Shadertoy.com is an online community and platform for

computer graphics Computer graphics deals with generating images with the aid of computers. Today, computer graphics is a core technology in digital photography, film, video games, cell phone and computer displays, and many specialized applications. A great de ...

professionals, academicshttp://graphics.cs.williams.edu/courses/cs371/f14/reading/shadertoy.pdf and enthusiasts who share, learn and experiment with rendering techniques and procedural art through

GLSL OpenGL Shading Language (GLSL) is a high-level shading language with a syntax based on the C programming language. It was created by the OpenGL ARB (OpenGL Architecture Review Board) to give developers more direct control of the graphics pipeli ...

code. There are more than 52 thousand public contributions as of mid-2021 coming from thousands of users.

allows Shadertoy to access the compute power of the

GPU A graphics processing unit (GPU) is a specialized electronic circuit designed to manipulate and alter memory to accelerate the creation of images in a frame buffer intended for output to a display device. GPUs are used in embedded systems, mobil ...

to generate procedural art, animation, models, lighting, state based logic and sound.

History

Shadertoy.com was created by Pol Jeremias and Inigo Quilez in January 2013 and came online in February the same year. The roots of the effort are in Inigo's "Shadertoy" section in his computer graphics educational website. With the arrival of the initial

implementation by Mozilla's

Firefox Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current and ...

in 2009, Quilez created the first online live coding environment and curated repository of procedural shaders. This content was donated by 18 authors from the

Demoscene The demoscene is an international computer art subculture focused on producing demos: self-contained, sometimes extremely small, computer programs that produce audiovisual presentations. The purpose of a demo is to show off programming, visual ...

and showcased advanced real-time and interactive animations never seen in the Web before, such as raymarched metaballs, fractals and tunnel effects. After having worked together in several real-time rendering projects together for years, in December 2012 Quilez and Pol decided to create a new Shadertoy site that would follow the tradition of the original Shadertoy page with its demoscene flavored resource and size constrained real-time graphics content, but would add social and community features and embrace an open-source attitude. The page came out with the live editor, real-time playback, browsing and searching capabilities, tagging and commenting features. Content wise, Shadertoy provided a fixed and limited set of textures for its users to utilize in creative ways. Over the years Shadertoy added extra features, such as webcam and microphone input support, video, music, Virtual Reality rendering and multi-pass rendering. There are over 31 thousand contributions in total from thousands of users, several of which are referenced in academic papers. Shadertoy also hosts annual competitions and events for its community to enjoy, such as the Siggraph 2015 Shadertoy Competition

Features

* Editing: syntax highlighted editor with immediate visual feedback * Social: commenting on shadertoys, voting (liking) * Sharing: permanent URLs, embedded in other websites, private shader sharing * Rendering: floating point buffer based multipass and history * Media inputs: microphone, webcam, keyboard, mouse, VR HMDs, soundcloud, video, textures

Usage

An example of a procedural animation created in Shadertoy could be the following square tunnel: void mainImage( out vec4 fragColor, in vec2 fragCoord ) The code above generates the following image: Shadertoy Tunnel Example

Mentions

Shadertoy.com is referenced in several sources: * ''NVidia developer blog'', Jun 2016, Shadertoy Contest 2016 Announced. * ''Siggraph Real-Time Live!'', 2015, an interactive sound visualizing project. * ''Hacker News'', 2014, Shadertoy adds procedural GPU-generated music in the browser. * ''Numerical Methods for Ray Tracing Implicitly Defined Surfaces'', * ''CS 371 Course at Williams College'', 2014, Inspiration for CS 371 * ''Real-Time Rendering'', Aug 2015, Seven Things for August 20, 2015.

References

External links

* {{Official website, https://www.shadertoy.com/ Software developer communities WebGL