WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements.

webgl

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

In this course, we’ll get started creating content with WebGL without any frameworks. You’ll write raw JavaScript code and shaders in GLSL. This intro course covers setting up WebGL in an HTML application and learning the basics of 3d vertices, shaders, drawing modes, animation, interaction and transformations.

In this lesson we cover setting up WebGL for use, including creating a canvas, getting the WebGL rendering context and clearing the canvas to a particular color.

Setting Up WebGL

In this lesson we learn about the two types of shaders required in WebGL - vertex shaders and fragment shaders. We create one of each and see how those shader programs affect what is drawn on the screen.

Introduction to WebGL Shaders

In this lesson we cover how to pass data into a WebGL shader from the main JavaScript program.

Passing Data to WebGL Shaders

In this lesson we cover how to pass an entire array of 3d points to a vertex shader, allowing you to render multiple points at once.

WebGL Vertex Buffers

In this lesson, we look at the different drawing modes you can use in gl.drawArrays and how to selectively draw subsets of a full vertex array.

Drawing Arrays in WebGL

In this lesson we look at a better way of writing WebGL shaders - loading them in from script tags rather than concatenating JavaScript strings.

Loading in WebGL Shaders

In this lesson, we take a look at a simple way of animating vertices in WebGL by simply changing the values of vertices.

Animating WebGL Vertices

In this lesson we accomplish some simple user interaction with animated 3D vertices.

User Interaction in WebGL

In this lesson, we look at how to create and apply 3D transformation matrices to rotate and perform other transformations on 3D shapes created in WebgL.

3D Transformation Matrices in WebGL

In this lesson, we see the benefits of using a 3rd party 3D matrix library for performing 3D matrix transformations.

Create 3D Graphics in JavaScript Using WebGL

Keith Peters

Course Content