Kids Code & Computer Science

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/