Let's talk about Graphics API's.

The application programming interface, or API, is a connection between computers or between computer programs. It acts as the software interface, offering a service to other pieces of software. In the case of what full-stack developers do, the API provides the user the ability to make a request, send that request to another acting piece of software, and then get a result from that software back. The program uses portions of it's API, or subroutines, methods, requests, or endpoints, to make, send, and receive these requests between the pieces of software. An API specification defines these calls, which explains to the developer on how to use or implement them.

API's exist in a variety of applications, but today, we're going to talk about graphics API's - the software that allows you to see what you're reading on the screen right now. The graphics API present between the software you're using and the drivers of your video card are what allow for visual representation of the information you want to display - be it browsing the web, watching a movie, or playing a game.

Specifically, Graphics API's

Graphics API's are the software libraries that sit between your software, (game, movie, YouTube video, or visualization) and your graphics card drivers. The API specification allows the developer to make a request of the API, and for the API to interface with the hardware through the drivers of that hardware. What this means is, that a system does not need to have such a specific set of code to interface with hardware. Unlike in the days of the Atari, or Commodore 64, where software communicated directly with the hardware, and thus had to be written for that specific set of hardware in mind, graphics API's allow for a greater flexibility in what hardware is supported, without the need for developers to write specific interfaces for every possible combination of hardware. These interfaces are a group effort, and are in most part managed by the non-profit technology group, called The Khronos Group. This group is comprised of operating system designers, graphics card manufacturers, and general technology groups such as Apple, Google, and Mozilla. These groups define what specifications an API needs, and what extensions are needed onto that API to run their hardware, allowing for a great flexibility in use-case and expandability for future versions of the API.

3D to Web

To start in on the initial foundations for the purpose of web development though, we can start with OpenGL. OpenGL is a cross-language, cross-platform API for rendering 2D and 3D vector graphics. Developed by Silicon Graphics Inc, its first version was released in 1992, and used extensively in computer-aided design (CAD), scientific visualization, info visualization, flight simulations, video games, and now more recently, virtual reality and augmented reality environments. Designed to be implemented mostly or entirely in hardware, the API is defined as a set of functions to be called by the client program, along named integer constants. While these definitions are similar to those of the programming language C, they are language independent, and such can be given language bindings, which gives languages like JavaScript use of the graphics API, WebGL.

As WebGL is more relevant for full-stack web developers, I will be talking about this one in a bit more detail. WebGL, short for Web Graphics Library, is a JavaScript API for rendering 2D and 3D graphics within any compatible browser by use of plug-ins. This allows developers to utilize the system hardware to accelerate physics, image and effects processing as part of the web page canvas. Starting off with the nice even number of 1.0, WebGL 1.0 was born of a previous project called Canvas 3D, started by developer Vladimir Kukicevic at Mozilla. Canvas 3D aimed to add support for low-level hardware acceleration 3D graphics in browser in 2006, but by 2007, other developers at Mozilla and Opera had made their own separate implementations of the technology. In 2009, Khronos Group took over Canvas3D, and started the 'WebGL Working Group', which is comprised of the previously mentioned developers.

First Steps

WebGL 1.0 is based on OpenGL ES (Embedded Systems) 2.0. It uses the HTML 5 canvas element, and is accessed on the DOM interface. Having been based on an OpenGL method for embedded systems, this version of WebGL was aimed specifically for embedded devices, like smartphones, tablet PCs, video game consoles, and PDA's. Unrelated, when is the last time you used a PDA? Currently, the latest stable release is WebGL 2.0, which is still based on OpenGL, now OpenGL ES 3.0, now enables developers guaranteed availability of the optional extensions of WebGL 1.0, but with additional access to other API's. The current implementation in the browsers Firefox and Chrome (Chromium too) is aptly named ANGLE (Almost Native Graphics Layer Engine), which is an open source abstraction layer developed by Google. Described as a portable OpenGL, it employs WebGL 2.0 to translate directly to OpenGL to make calls to Direct3D, which is the Windows graphics API. This implementation provides extremely fast calls to the actual graphics hardware drivers, allowing for much more complex and interactive rendering. The reason for this enhanced performance is in how the shader code (the way a developer wants a thing to render) is passed to the GPU. In WebGL 1.0, a developer would need to provide and implement shader code, and configure data endpoints explicitly in JavaScript. This explicit expression then would pass the shader code as text strings, where WebGL would then compile those shaders to the GPU code. This code is then executed for each vertex sent through the API and for each pixel rasterized to the screen, meaning longer loading times, and a greater chance for human error in writing. This is called a fixed-function API, meaning while it is simpler to implement, it is designed specifically, and has less extension capability.

WebGL 2.0 takes an alternate approach to passing information, through what is called a 'shader-based 3D API'. While the fixed-function API is simpler, the shader-based API treats graphics data generically, and thus, the program object can combine the shader stages into a single, linked whole, greatly reducing load time, and allowing for developers to spend more time focusing on the graphic they wish to display, rather than being limited by what they're capable of doing because of the method by which the data is passed. This means that hardware-level graphics API's, like Direct3D/DirectX (Microsoft), Metal (Apple), RenderMan (Pixar), and Vulkan (AMD) are more able to interact with the calls given from WebGL

WebGL is an incredible tool, which lets us enjoy short loading times, incredible in-browser graphics on both our desktop computers and mobile devices. From the fun halcyon days of basic HTML text boards, to fully interactive and engaging websites, WebGL is changing the way we are able to interact with each other via the Internet.

For further reading and points of interest, I'd advise you check these out.

Shadertoy, a library of WebGL 2.0 shaders

Three.JS, an amazing example of what you can do with WebGL to create high-level graphic detail