beanz Magazine

Programming 3D Art in Shadertoy

Kris Temmerman on Flickr

An easy way to code your own 3D graphics online. Dive into the world of pixels, triangles, textures, and colours!

Want to create amazing 3D graphics with code? You’re in luck because in this article, we’re going to cover a little review of how graphics cards work, what kinds of software you use for programming 3D graphics, and how to get started quickly using a site called Shadertoy.

To start, let’s briefly summarize our August 2019 article on how programs turn code into graphics.

First, your screen is made of pixels: about 2 million of them for a 1080p screen. Each pixel can display one of millions of possible colors by combining red, green, and blue light together. The job of the graphics card is to tell each of these pixels exactly what color goes in each pixel, and it does this in a few steps.

  • The program sends a description of the scene to the graphics card, in the form of a bunch of objects defined as tiny tiny triangles.
  • The program tells the graphics card how to take the description of the scene and rotate and move it around relative to the “camera” that the player is looking through.
  • The graphics card calculates how all these objects relate to pixels on the screen.
  • The program finally tells the graphics card all the textures, lights, and colors of all the objects and it calculates the color in each pixel. This is the fragment shading phase.

So, we’ve said that you “write code” that tells the graphics card to do all of these things.

Does that mean you can just write some Python code and talk directly to the graphics card? Well, no. You’re going to need a special software library. Which library you need depends on what kind of system you want your program to run on.

You’ll use:

  • OpenGL for Linux, Windows, or Android phones
  • Metal for Mac OSX or iOS
  • DirectX if you’re a Windows programmer who doesn’t want to use OpenGL
  • Vulkan if you’re an OpenGL programmer who doesn’t want to use OpenGL
  • WebGL if you want your graphics code to run in the browser

No matter how you swing it, that’s a lot. Each of those is a pretty big thing to learn in its own right.

We’re going to advocate for taking a shortcut to doing 3D graphics, though, by programming only the fragment shading phase we talked about above. For this kind of programming, we’ll use the language GLSL – the OpenGL Shading Language – on the site Shadertoy.

Shadertoy is a free website that handles a bunch of WebGL setup for you so all you need to do is write your fragment shader.

GLSL is a pretty big topic, so we’re going to talk about just a few concepts before we leave off.

First in Shadertoy, you write code that calculates the color of each pixel on the screen. You can use the position of the pixel on the screen for this calculation as well as all sorts of other properties like the position of your mouse, how much time has passed since the program started, or input from the microphone.

Here’s an example that makes pixels more red as you move towards the right of the screen, more green as you move up the screen, and more blue depending on how loud you are (you do have to enable iChannel0 as the microphone by clicking on it at the bottom of the screen).

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
	vec2 uv = fragCoord/iResolution.xy;
	float heck = texture(iChannel0,vec2(uv.x,0.25)).x;
    vec3 col = vec3(uv.x,uv.y,heck);
    
	// Output to screen
	fragColor = vec4(col,1);
}

What else can you do in Shadertoy? My goodness, what can’t you do? You can create randomly generated landscapes, render 3D models of objects, create interactive art pieces, or even practice graphical effects like fire or smoke! What you learn about GLSL in Shadertoy is applicable in all sorts of graphics programs or game development environments.

With the following resources in hand you’ll quickly be making awesome 3D art in no time!

Learn More

Vulkan

https://en.wikipedia.org/wiki/Vulkan_(API)

OpenGL

https://kids.kiddle.co/OpenGL

DirectX

https://en.wikipedia.org/wiki/DirectX

How to install DirectX

https://www.lifewire.com/how-to-download-install-directx-2624489

OpenGL Shading language

https://en.wikipedia.org/wiki/OpenGL_Shading_Language

what is a shader

https://thebookofshaders.com/01/

Vertex and pixel shaders

https://academickids.com/encyclopedia/index.php/Vertex_and_pixel_shaders

Metal

https://en.wikipedia.org/wiki/Metal_(API)

Shadertoy

https://www.shadertoy.com/

Also In The February 2020 Issue

Can you figure out how to divide up coconuts between a group of sailors and a monkey? This puzzle mixes math and coding. Plus you can go online to try the code yourself!

Recreate the classic game in this simple Python tutorial. What whimsical stories can you write?

If you like ships, then you’ll love this easy-to-use website that keeps track of seafaring vessels around the world. Bonus: it helps prevent maritime collisions!

Ready for some good old-fashioned winter fun? In this article, build a digital snowman with Sketchup.

A fun, silly way to share your coding trials and triumphs with friends — because everything is better with kittens!

Should you learn Python, Scratch, Java, Assembly? If you’re feeling overwhelmed by too many options, this article is here to help.

Illustrating computational concepts like decomposition and algorithms with simple, hands-on, and occasionally messy activities.

In the old days, before video game systems had cameras and sensors, programmers had to get creative.

Six women were hired to use their math skills to program the ENIAC computer. They called themselves The First Programmers Club.

Learn about the key software that keeps your computer safe from viruses.

Programs are constantly being patched and improved. How do we keep track of all this new code?

Dive into the nitty-gritty details of binary numbers: how they work, why they’re used, and where they come from.

An easy way to code your own 3D graphics online. Dive into the world of pixels, triangles, textures, and colours!

Learn about the smallest, simplest computers and where they’re still used today.

Interesting stories about science and technology for February 2020.

Links from the bottom of all the February 2020 articles, collected in one place for you to print, share, or bookmark.