20+ Webgl Resources for Web Developers in 2021

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

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.

Create 3D Graphics in JavaScript Using WebGL

We’ll cover per-vertex coloring, advanced use of vertex arrays, more drawing modes for building 3D models, perspective, textures, and lighting.
This course assumes prior knowledge in WebGL. 
**Note:** Check out [Create 3D Graphics in JavaScript Using WebGL](https://egghead.io/courses/create-3d-graphics-in-javascript-using-webgl) for an in depth introduction to WebGL if some of these concepts are feeling unfamiliar.

Build Complex 3D models with WebGL

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

This video will cover how to load and apply textures to 3d forms in WebGL. This video scratches the surface of textures in WebGL. For more information on textures, check out the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) on WebGL.

Use an image to texture a WebGL object

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 look at how to consolidate different data, such as position and color, into a single vertex array. This becomes more important as we keep adding attributes such as per-vertex data for lighting and textures. We will update the `stride` value in the `vertexAttribPointer` method to accommodate these changes.

Consolidate data into a single WebGL vertex array

In this lesson we actually handle several issues - perspective, clipping and aspect ratio. The perspective method that is used handles all of these issues.


Fix clipping and aspect ratio by implementing perspective in WebGL

This time we look at the last drawing mode, triangle fan, which can be useful for drawing different types of 3d forms. Combine this mode with [triangle strip](https://egghead.io/lessons/javascript-drawing-triangle-fans-in-webgl?course=intermediate-webgl) to creating complex models.

Draw more complex 3D Models using Triangle Fans in WebGL

In this lesson we will apply a single color per vertex and see how those colors are interpolated across an entire triangle, making use of a new kind of shader variable. We will also see how enabling `gl.DEPTH_TEST` will give our model proper depth by having webGL pay attention to z-values.
**Note:**
This lesson assumes prior knowledge in WebGL. Check out [Create 3D Graphics in JavaScript Using WebGL](https://egghead.io/courses/create-3d-graphics-in-javascript-using-webgl) for an in depth introduction to WebGL if some of these concepts are feeling unfamiliar.

Apply varying colors per-vertex to WebGL triangles

In this lesson, we look at how to draw more complex shape by building a list of indices that define different shapes to draw. This lets us re-use vertices to draw different parts of the shape.

Draw a multicolored cube with WebGL drawElements

An introduction to light sources in WebGL. We will start with an overview the different types of lighting in WebGL. This lesson will cover creating a directional light source of a certain color, setting normals on vertices, and use these two things to calculate the color of a surface at any point. 

Create a directional light source in WebGL

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 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 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 see the benefits of using a 3rd party 3D matrix library for performing 3D matrix transformations.

Using a Matrix Library for WebGL

In this lesson we start doing some more advanced modeling by connecting multiple triangles into a single surface with a simple for-loop. We will review the different modes WebGL has for drawing arrays. After reviewing, triangle strip will be used to create a complex mathematical 3D form.

Topics

Instructors

Content Type