Build Complex 3D models with WebGL

54 minutes

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. Check out Create 3D Graphics in JavaScript Using WebGL for an in depth introduction to WebGL if some of these concepts are feeling unfamiliar.

pro-course-rss-logo

PRO RSS Feed

Apply varying colors per-vertex to WebGL triangles

Consolidate data into a single WebGL vertex array

P

Fix clipping and aspect ratio by implementing perspective in WebGL

P

Draw a complex 3D Model with WebGL Triangle Strips

P

Draw more complex 3D Models using Triangle Fans in WebGL

P

Draw a multicolored cube with WebGL drawElements

P

Use an image to texture a WebGL object

P

Create a directional light source in WebGL

P
js tutorial about Apply varying colors per-vertex to WebGL triangles

Apply varying colors per-vertex to WebGL triangles

4:55 js

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.
This lesson assumes prior knowledge in WebGL. Check out Create 3D Graphics in JavaScript Using WebGL for an in depth introduction to WebGL if some of these concepts are feeling unfamiliar.

js tutorial about Consolidate data into a single WebGL vertex array

Consolidate data into a single WebGL vertex array

5:44 js PRO

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.

js tutorial about Fix clipping and aspect ratio by implementing perspective in WebGL

Fix clipping and aspect ratio by implementing perspective in WebGL

8:20 js PRO

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

js tutorial about Draw a complex 3D Model with WebGL Triangle Strips

Draw a complex 3D Model with WebGL Triangle Strips

5:42 js PRO

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.

js tutorial about Draw more complex 3D Models using Triangle Fans in WebGL

Draw more complex 3D Models using Triangle Fans in WebGL

3:49 js PRO

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 to creating complex models.

js tutorial about Draw a multicolored cube with WebGL drawElements

Draw a multicolored cube with WebGL drawElements

6:08 js PRO

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.

js tutorial about Use an image to texture a WebGL object

Use an image to texture a WebGL object

11:21 js PRO

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 on WebGL.

js tutorial about Create a directional light source in WebGL

Create a directional light source in WebGL

8:16 js PRO

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.

Presented by:

Keith Peters

Keith Peters is a developer based in the Boston area. He is the author / coauthor of over a dozen programming books including Playing with Chaos: Programming Fractals and Strange Attractors in JavaScript and HTML 5 Animation with Javascript and the Actionscript 3.0 Cookbook.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?