Shadertoy: The Ultimate Tutorial

Shadertoy is a unique community and platform where users can create and share cool real-time 3D animated visual shaders. These 'Shadertoys' have a wide range of uses - from being used in videos to linking up with an audio source to create audio-reactive visuals.

The platform has over 80,000 Shadertoys (35,000 are copyright-free), each with a unique visual style submitted by a community member. If you have some programming skills, you can create your own Shadertoy using their built-in programming interface.

However, it doesn't have any direct tools for making videos out of the Shadertoys. Sure, you can record clips, but you'll need some kind of video editing software to stitch them together.

That's where DJ.Studio comes in - one cool function of this software is the ability to create full videos for music or a DJ mix, with a direct interface to the Shadertoy library, and all the tools you need to arrange the videos.

This guide shows you everything you need to know about Shadertoy - you'll learn all the important details about the platform, how you can start to code your own custom Shadertoy graphics, and how you can easily use DJ.Studio to make music videos with Shadertoy!

TL;DR - Shadertoy#

• Shadertoy is a free, open-source platform for creating and sharing animated visual shaders.

• It features a built-in programming interface, for coding your own Shadertoy graphics (if you know how).

• Although, it lacks any video editing features, and only lets you record short individual snippets of each graphic.

• DJ.Studio has Shadertoy integration, letting you edit and stitch together graphics to make full-length music videos, using any of the public Shadertoys.

What is Shadertoy? An Overview#

At its core, Shadertoy is a platform for creating and sharing algorithmically generated visuals.

There are a few elements to this platform, but the core pieces are:

• An online coding environment for developing custom Shadertoy graphics using GLSL code.

• A community platform for sharing, discussing, and discovering Shadertoy graphics.

The graphical engine is deep and diverse, enabling users to create any visuals they can imagine, from fractals and patterns to animations and 3D simulations.

This platform has become popular in the underground graphics creation scene. It is a popular destination for tinkerers, graphics enthusiasts, programmers, educators, and people looking to learn how to code graphical engines.

Shadertoy is built on the GLSL code base (OpenGL Shading Language), which is designed for creating shaders in OpenGL, WebGL 2.0, and other similar graphical APIs.

On the Shadertoy website, users can browse the public community library, have a look at other user's Shadertoy patches, explore their compiled code, and comment on their work.

This is useful for getting inspiration on your patches, and learning how other people generate their graphics using the Shadertoy code. You can add comments to public Shadertoys, letting you give feedback or ask questions about the code.

Additionally, users can Create new Shadertoys using the built-in programming interface

This gives users a real-time graphical display of their code, and a coding window to change and compile the program. I'll explain the basic process of creating your own Shadertoy code later in this article.

It takes a bit of programming knowledge to make your shaders from scratch, but you can easily find inspiration and starting points from the community. The platform is the perfect place to learn graphical coding skills and start to develop your knowledge.

Shadertoy Overview Summary

While the mechanics under the hood are pretty complex, the overall concept of Shadertoy is simple.

In essence:

1. Users create an account and open the Shadertoy website.

2. They can browse the Shadertoy library, edit the code, and capture videos.

3. Or create and share their own Shadertoy from scratch using the IDE (Integrated Development Environment).

How to Make Music Videos with Shadertoy#

After you've collected a selection of your favorite Shadertoys from the community or made some yourself, it's time to put them to use. 

These kind of graphics are cool on their own, but their strengths are definitely shown when they're paired with music - particularly ones that react to audio.

On its own, Shadertoy only gives you the ability to record snippets of the graphics. You'll need to use some extra video editing software to stick them all together.

This is where DJ.Studio comes in!

Mixed with many other features (that I explain below), DJ.Studio includes a video creator and editor, which is used for making music videos to go along with your music or DJ mixes. Most notably - this is completely integrated with Shadertoy, so you can browse the library, and mix any Shadertoy graphics together in the video editing timeline.

This all-in-one solution streamlines the process of creating DJ mixes, making music videos, and rendering it to a video file.

Tutorial: Making Shadertoy Videos in DJ.Studio#

Follow these steps to make and edit a video using a range of Shadertoy graphics in DJ.Studio

1. Make your DJ mix (this is explained in full in the next section).

2. Open the Video Tab.

3. Click on the song you want to adjust the visuals for and choose the settings. Any of these layers can be combined.

   1. Background - Choose between 5 background types

      1. Animation - Choose from 100 popular audio-reactive animations from the Milkdrop and Butterchurn libraries.

      2. Shadertoy - Choose Shadertoy patches, you can browse our selection, or paste in the URL for any public Shadertoy on the platform.

      3. Album Art - Use the current track's album art as the background.

      4. Image - Upload a still image to use.

      5. Color - Select a single block color.

   2. Track Information - Here, you can choose how the track's information and cover art is displayed. This shows the artist and track name, as well as the cover image. It comes with a range of modes depending on how large, and where you want the info to be placed.

   3. Spectrum Analyzer - Create and control spectrum displays for playing music. This gives a nice visual indication of the frequencies of the current music.

   4. Transition - Select from 5 transition types that choose how the visuals are animated from one setting to the next. You can also choose the transition length

4. You can full-screen the video to see the graphics in a larger display.

5. If you want to manually adjust the placement and timing of video settings (rather than doing it on a per-track basis), simply right-click somewhere in the video timeline, and click 'Add Video'

6. You'll now see a yellow video block, which has independent controls, and creates a new transition between one setting to another. You can create as many of these as you like. When the timeline reaches the yellow block, the settings are changed. It will then transition to the next settings when it reaches another video block.

7. When you're happy with the video, click Export, and choose the video quality you want. This will take some time - but you can watch the progress bar.

As you can see, the process for creating videos using Shadertoy in DJ.Studio is super easy - and doesn't require any video editing knowledge. You can make really engaging DJ mix videos thanks to the ability to show the track info and album artwork too - especially with the audio-reactive visuals.

Now, let's have a closer look at what DJ.Studio is, and how to use it.

DJ.Studio - In Detail#

DJ.Studio is much more than a video creation tool - in fact, the video features are only a tiny portion of what it offers.

The main purpose of this software is to give DJs a method of creating mixes that don't revolve on recording through a mixer and decks. Instead, DJs can create pristine mixes with a laptop, mouse, and keyboard alone.

This type of workflow has several advantages over recording mixes live - and the software is fitted with a range of other features for making DJing easier and more efficient. It's also integrated with most live DJ software, so you can prepare a mix in DJ.Studio and then send it to your decks to mix for a crowd.

DJ.Studio is packed with tools and helps DJs in a range of situations. The best way to understand why this software is so powerful is to have a look at the process of using it to make mixes.

How to Use DJ.Studio to Make a Mix#

1. Open DJ.Studio

2. Import music - Or connect it to other DJ library software like rekordbox, Virtual DJ, Traktor, iTunes, Serato, and more.

3. Create a project - There are three project types

   1. Local File Mode- For mixing with downloaded music (and for creating videos with Shadertoy and the video engine).

   2. YouTube Mode - This is used for experimenting with music from streaming sources like YouTube and Spotify, making it the perfect tool for DJs to try out new ideas and test songs.

   3. Beatport Mode - Uses the Beatport Streaming library to give DJs access to an enormous collection of the latest music.

4. Build a playlist - Start adding tracks to your project that you want to mix together.

5. Automix - Use the AI enhanced automixing tool to help suggest the best order of your tracks, based on harmonic mixing and beatmatching - ensuring the tracks are matched with compatible keys.

6. Refine the mix - Use the timeline editing tools to craft your mix in as much details as you want, adding effects, loops, edits, samples, and more.

7. Create a Video - If you want, use the video tools as outlined above.

8. Export - You can export finished mixes to a range of locations. You can record local file projects as WAV/MP3 or video, and send them to your live DJ software as a DJ set file. You can upload YouTube mixes to the online DJ.Studio community player and you can convert your Beatport mixes to downloadable sets with the Legalize function.

This only shows one basic workflow of what DJ.Studio can do for DJs. It's a super powerful tool that speeds up the workflow, opens more creative doors, and makes DJs' lives easier.

You can try it yourself with the free 14-day trial, and start making killer mixes and hypnotic videos!

How Shadertoy Works - The Code Explained#

Now we get to the more complicated part - the inner mechanics behind the Shadertoy graphical engine.

Shadertoy's Foundational Programming Languages#

The foundation of Shadertoy is WebGL language (the Web Graphics Library). This is a JavaScript API designed to create interactive 2D and 3D graphics in a compatible web browser - without the need for additional code plugins. It can be run in a typical HTML canvas, meaning you can use it on most websites without any additional work.

Shadertoy (and other WebGL apps) are programmed using JavaScript code, and additional shader code using OpenGL ES Shading Language.

This WebGL code is run on the computer's GPU (Graphics Processing Unit), and uses an HTML5 canvas element on the front end.

With that technicality out of the way, we can start to look at how Shadertoy programs are coded using the online development environment.

The Shadertoy IDE - Programming Interface#

visualizationvisualization of the resulting graphics.

Shadertoy's IDE is split into two halves:

• On the left, you have the visual window, which displays the graphics generated by your code. It also gives you controls for pausing, recording, and full-screening the graphics.

• On the right, you have the programming interface, where you can write, compile, and debug your Shadertoy code.

The IDE also gives you controls for setting various shader inputs, for example, you might want to import an audio file that interacts with the graphical animation. You also get a range of iChannels, which can be used for importing additional textures to UV map onto your graphics.

This interface is very quick and easy to use.

'Simply' write the code, and then click the compile icon in the bottom left corner - you'll then see your new graphics running in the window (if it doesn't have errors).

Of course, the hardest part is writing the code itself, which takes some time and effort to learn.

The Core Principals of Writing Shadertoy Graphic Code#

Learning and writing code for Shadertoy is the hardest part of the equation.

I would say, that you should only start learning how to code Shadertoy if you already have a basic understanding of programming.

Graphical programming has a relatively high learning curve and is one of the more complex areas to get started with. If you are completely new to coding, I'd suggest looking at something like HTML, JavaScript (which is used in Shadertoy), and maybe some basic Python applications first.

Foundational Programming Concepts

I would advise that you understand the following concepts fairly well before starting:

• Variables

• Data Types

• Functions

• Control Structures

• Operators

• Arrays and Collections

• Classes and Objects

• Methods and Properties

• Syntax and Semantics

• Algorithm Design

You don't need to be an expert in these fields by any means, but you need to understand how all the pieces fit together - particularly if you want to start coding your own Shaders from scratch.

These are the foundational elements of programming, and you'll need to know how to use these concepts if you want to be able to write Shadertoy code effectively.

Concepts Relevant to Shadertoy & Graphical Programming

When creating Shadertoy programs, there are a lot of additional concepts you should understand. These are a little more advanced and specific compared to the basics above, but are worth learning about. Study these a bit, and then you will be more prepared to start writing code.

If you look at Shadertoy code and tutorials, you will often see these terms used.

Pixel Coordinates

Pixel coordinates in shaders typically refer to the position of a pixel within the rendering canvas. In Shadertoy, the coordinate system ranges from (0,0) at the bottom-left corner to (1,1) at the top-right corner.

Fragment Shaders

Fragment shaders, also known as pixel shaders, are programs that determine the color of individual pixels on the screen. In Shadertoy, you primarily work with fragment shaders to create visual effects.

Pixel Aspect Ratio

The pixel aspect ratio is the ratio of the width of a pixel to its height. It ensures proper scaling of images and shapes on different display devices.

Procedural Shaders

Procedural shaders generate visual effects or patterns algorithmically rather than relying on external images or textures.

Ray Tracing

Ray tracing is a rendering technique that simulates the path of light as it interacts with objects in a scene, allowing for realistic rendering of shadows, reflections, and refractions.

Alpha Channel

The alpha channel of a pixel determines its transparency or opacity. It allows for the blending of images or objects over one another.

Sound Shaders

Sound shaders in Shadertoy enable the generation of audio within the shader code, allowing for the creation of audio-visual experiences.

Final Color

The final color in a shader is the color that gets displayed on the screen after all calculations and effects have been applied in the shader code.

Ray Marching

Ray marching is a technique used in shader programming, particularly for rendering distance fields and complex geometries by iteratively stepping along ray directions.

mainImage Function

In Shadertoy, the mainImage function is the entry point for the fragment shader. It defines the color of each pixel on the screen based on its coordinates.

void mainImage

void mainImage is a function signature used in Shadertoy to define the main fragment shader function. It takes parameters like vec2 for the pixel coordinates and vec4 for the output color.

With these concepts starting to sink into your brain, you might be ready to start writing your first line of Shadertoy code!

How to Make Shadertoy Graphics: Basic Tutorial#

Shadertoy is a huge and diverse system, so I recommend checking out more specific tutorials on YouTube or in the Shadertoy Documentation - and look at particular techniques or styles of graphics you want to work on.

That said, here are some basic steps to start writing a Shadertoy program!

1. Open Shadertoy, login, and click New to start a blank program.

2. You will now see a basic template program, with some simple code in the IDE.

3. In this example, I'll show you some cool principles in a nice example - it creates a rotating square with a chequered black and white background. It's simple but gives you an idea of the process. You can adapt this code however you please.

4. void mainImage( out vec4 fragColor, in vec2 fragCoord )
   {
   // Background color alternates between black and white
   vec3 backgroundColor = mod(floor(fragCoord.x / 100.0) + floor(fragCoord.y / 100.0), 2.0) > 0.0 ? vec3(1.0) : vec3(0.0);
   
   // Center coordinates
   vec2 center = iResolution.xy / 2.0;
   
   // Calculate normalized coordinates
   vec2 uv = fragCoord.xy / iResolution.xy;
   
   // Calculate distance from the center
   float dist = length(uv - 0.5);
   
   // Rotate the coordinates
   vec2 rotatedUV = vec2(cos(iTime) * (uv.x - 0.5) + sin(iTime) * (uv.y - 0.5) + 0.5,
   -sin(iTime) * (uv.x - 0.5) + cos(iTime) * (uv.y - 0.5) + 0.5);
   
   // Create the square
   float size = 0.3;
   float square = max(abs(rotatedUV.x - 0.5), abs(rotatedUV.y - 0.5));
   float squareBorder = 0.01;
   float squareSmooth = smoothstep(size, size + squareBorder, square);
   
   // Square color
   vec3 squareColor = vec3(0.0, 0.0, 1.0); // Blue
   
   // Mix square color and background color
   vec3 finalColor = mix(backgroundColor, squareColor, squareSmooth);
   
   // Output final color
   fragColor = vec4(finalColor, 1.0);
   }
   

5. Compile the code, and watch the graphics window update with the new patch. Make any tweaks to the code as desired!

6. Now you can save and share your Shadertoy - give it a name and description, and share the link online - or even cooler, send it to DJ.Studio to make a music video.

This is a super basic example, and Shadertoy has a huge amount of depth and capability.

You can create 3D graphics - simulate physics and collision, and create interactive programs that move in time to music or react to the mouse position.

The best advice I can give is to explore the Shadertoy library, discover graphics that you like the look of, and dive deeper into their code - and try to learn how it works.

TIP! One particularly handy use of ChatGPT is its ability to assist with writing code.

You can simply give ChatGPT a prompt like "Write a Shadertoy code that shows a black square rotating around a white circle, on a green background". The results are usually pretty decent, and it can be a good place to start with snippets of code and to see how you might be able to execute some of your ideas. This is all free too!

Finally...#

You now have a clear idea of what Shadertoy is, how it works, and how you can start to code your own graphics.

The community library is mind-boggling, and there is an infinite source of cool and high-quality graphics to use in your videos.

The best way to start using Shadertoy graphics to make videos is with DJ.Studio, which has a powerful editing interface that allows you to easily combine the shaders however you please - and overlay additional information.

Try it today!