Samiksha Jaiswal (Editor)

Shadertoy

Updated on
Edit
Like
Comment
Share on FacebookTweet on TwitterShare on LinkedInShare on Reddit
Development status
  
Active

Written in
  
GLSL, JavaScript, PHP

Original author(s)
  
Inigo Quilez & Pol Jeremias

Initial release
  
February 14, 2013 (2013-02-14)

Stable release
  
Release 0.8.3 / March 3, 2016

Type
  
3D computer graphics tool community

Shadertoy.com is a cross-browser online community and tool for creating and sharing shaders through WebGL, used both for learning and teaching 3D computer graphics in a web browser.

Contents

Overview

Shadertoy.com is an online community and platform for Computer graphics professionals, academics and enthusiast who share, learn and experiment with rendering techniques and procedural art though GLSL code. There are more than 11 thousand public contributions as of 2016 coming from thousands of users. Thanks to WebGL. Shadertoy access the compute power of the GPU 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 WebGL implementation by Mozilla's Firefox 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 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 and 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 11 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:

    The code above generates the following image:

    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

    Shadertoy Wikipedia