 | A major contributor to this article appears to have a close connection with its subject.(August 2016) |
| Original author(s) | Inigo Quilez & Pol Jeremias |
|---|---|
| Initial release | February 14, 2013 |
| Stable release | Release 0.8.3 / March 3, 2016 |
| Written in | GLSL, JavaScript, PHP |
| Type | 3D computer graphics tool community |
| Website | www |
Shadertoy is an online community and tool for creating and sharing shaders through WebGL, used for both learning and teaching 3D computer graphics in a web browser.
Shadertoy is an online community and platform for computer graphics professionals, academics [1] and enthusiasts who share, learn and experiment with rendering techniques and procedural art through GLSL code. There are more than 52 thousand public contributions as of mid-2021 coming from thousands of users. WebGL [2] allows Shadertoy to access the compute power of the GPU to generate procedural art, animation, models, lighting, state based logic and sound.
Shadertoy 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 [3] in his computer graphics educational website. [4] 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 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 [5]
 | This article is written like a manual or guide.(August 2016) |
An example of a procedural animation created in Shadertoy could be the following square tunnel:
voidmainImage(outvec4fragColor,invec2fragCoord){// input: pixel coordinatesvec2p=(-iResolution.xy+2.0*fragCoord)/iResolution.y;// angle of each pixel to the center of the screenfloata=atan(p.y,p.x);// modified distance metricfloatr=pow(pow(p.x*p.x,4.0)+pow(p.y*p.y,4.0),1.0/8.0);// index texture by (animated inverse) radius and anglevec2uv=vec2(1.0/r+0.2*iTime,a);// pattern: cosinesfloatf=cos(12.0*uv.x)*cos(6.0*uv.y);// color fetch: palettevec3col=0.5+0.5*sin(3.1416*f+vec3(0.0,0.5,1.0));// lighting: darken at the center col=col*r;// output: pixel colorfragColor=vec4(col,1.0);}The code above generates the following image:
|
Shadertoy is referenced in several sources:
Rendering or image synthesis is the process of generating a photorealistic or non-photorealistic image from a 2D or 3D model by means of a computer program. The resulting image is referred to as the render. Multiple models can be defined in a scene file containing objects in a strictly defined language or data structure. The scene file contains geometry, viewpoint, textures, lighting, and shading information describing the virtual scene. The data contained in the scene file is then passed to a rendering program to be processed and output to a digital image or raster graphics image file. The term "rendering" is analogous to the concept of an artist's impression of a scene. The term "rendering" is also used to describe the process of calculating effects in a video editing program to produce the final video output.
OpenGL is a cross-language, cross-platform application programming interface (API) for rendering 2D and 3D vector graphics. The API is typically used to interact with a graphics processing unit (GPU), to achieve hardware-accelerated rendering.
Texture mapping is a method for mapping a texture on a computer-generated graphic. Texture here can be high frequency detail, surface texture, or color.
X3D is a set of royalty-free ISO/IEC standards for declaratively representing 3D computer graphics. X3D includes multiple graphics file formats, programming-language API definitions, and run-time specifications for both delivery and integration of interactive network-capable 3D data. X3D version 4.0 has been approved by Web3D Consortium, and is under final review by ISO/IEC as a revised International Standard (IS).
Direct3D and OpenGL are both application programming interfaces (APIs) that can be used in applications to render 2D and 3D computer graphics. As of 2005, graphics processing units (GPUs) almost always implement one version of both of these APIs. Examples include: DirectX 9 and OpenGL 2 circa 2004; DirectX 10 and OpenGL 3 circa 2008; and most recently, DirectX 11 and OpenGL 4 circa 2011. GPUs that support more recent versions of the standards are backwards compatible with applications that use the older standards; for example, one can run older DirectX 9 games on a more recent DirectX 11-certified GPU.
In computer graphics, texture filtering or texture smoothing is the method used to determine the texture color for a texture mapped pixel, using the colors of nearby texels.
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 specialized functions in computer graphics special effects and video post-processing, as well as general-purpose computing on graphics processing units.
OpenGL for Embedded Systems is a subset of the OpenGL computer graphics rendering application programming interface (API) for rendering 2D and 3D computer graphics such as those used by video games, typically hardware-accelerated using a graphics processing unit (GPU). It is designed for embedded systems like smartphones, tablet computers, video game consoles and PDAs. OpenGL ES is the "most widely deployed 3D graphics API in history".
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 to give developers more direct control of the graphics pipeline without having to use ARB assembly language or hardware-specific languages.
The Radeon R100 is the first generation of Radeon graphics chips from ATI Technologies. The line features 3D acceleration based upon Direct3D 7.0 and OpenGL 1.3, and all but the entry-level versions offloading host geometry calculations to a hardware transform and lighting (T&L) engine, a major improvement in features and performance compared to the preceding Rage design. The processors also include 2D GUI acceleration, video acceleration, and multiple display outputs. "R100" refers to the development codename of the initially released GPU of the generation. It is the basis for a variety of other succeeding products.
The Blinn–Phong reflection model, also called the modified Phong reflection model, is a modification developed by Jim Blinn to the Phong reflection model.
Computer graphics lighting is the collection of techniques used to simulate light in computer graphics scenes. While lighting techniques offer flexibility in the level of detail and functionality available, they also operate at different levels of computational demand and complexity. Graphics artists can choose from a variety of light sources, models, shading techniques, and effects to suit the needs of each application.
Web3D, also called 3D Web, is a group of technologies to display and navigate websites using 3D computer graphics.
WebGL 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 usage of physics, image processing, and effects in the HTML canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.
PICA200 is a graphics processing unit (GPU) designed by Digital Media Professionals Inc. (DMP), a Japanese GPU design startup company, for use in embedded devices such as vehicle systems, mobile phones, cameras, and game consoles. The PICA200 is an IP Core which can be licensed to other companies to incorporate into their SOCs. It was most notably licensed for use in the Nintendo 3DS.
In image processing, a kernel, convolution matrix, or mask is a small matrix used for blurring, sharpening, embossing, edge detection, and more. This is accomplished by doing a convolution between the kernel and an image. Or more simply, when each pixel in the output image is a function of the nearby pixels in the input image, the kernel is that function.
Vulkan is a low-level low-overhead, cross-platform API and open standard for 3D graphics and computing. It was intended to address the shortcomings of OpenGL, and allow developers more control over the GPU. It is designed to support a wide variety of GPUs, CPUs and operating systems, it is also designed to work with modern multi-core CPUs.
Standard Portable Intermediate Representation (SPIR) is an intermediate language for parallel computing and graphics by Khronos Group. It is used in multiple execution environments, including the Vulkan graphics API and the OpenCL compute API, to represent a shader or kernel. It is also used as an interchange language for cross compilation.
This is a glossary of terms relating to computer graphics.
Cg and High-Level Shader Language (HLSL) are two names given to a high-level shading language developed by Nvidia and Microsoft for programming shaders. Cg/HLSL is based on the C programming language and although they share the same core syntax, some features of C were modified and new data types were added to make Cg/HLSL more suitable for programming graphics processing units.