WebGL 2: Cameras & Perspective (Part 1)

This is the first of two videos on adding camera-like perspective to your 3D programs. This video will focus on the actual steps of adding a camera view, and the things to memorize so you can do this on your own completely off the top of your head. We'll look at both `perspective projection` and `orthographic projection` and begin to see why things can go wrong in our renders when we choose our near and far planes badly.

You can find supplementary materials on this video series' GitHub page:

This series on WebGL 2 was produced for anyone who, like me, had major problems getting a firm understanding of WebGL's intermediate and advanced concepts. Every video is focused on a single concept. If I've done this well, you shouldn't really need to "get up to speed" before watching any of these videos. There are no external libraries. I'm not building up to a custom API or injecting any abstractions. And I don't expect you to have watched from episode #1 to get "how I'm doing things with WebGL."

Complete playlist:

Videos:

I really hope someone out there will find this series helpful.

[samueleb.]

Please don't quit doing this series. It's THE hidden gem of this kind of content. Mindblowing work.

[cinemarat]

don't stop making these videos man. This series has been essential for my pursuit of computer graphics because my job is not related to computer graphics, but this series certainly keeps my passion for it alive. Thanks.

[barefootfunk]

This is the best intro to webgl series out there. By miles. Exceptional work.

[peterhayman]

Thanks Andrew, your explanations are really helpful! I got so excited today with my two cyan squares, the beginnings of a particle system, woot woot!

[gnorts_mr_alien]

Andrew, this is an amazing series I keep coming back to. Little question: At around 6:24, when you set the view matrix, we are faced with the opposite side of the cube with the rotation reversed. Is this expected behavior? In the video you sound like it is weird and begs an explanation but then you go on to explain clipping.

Also I see that it is common to premultiply projection and view matrix on CPU side (and send that as a uniform instead of sending them separately) to avoid doing the matrix multiplication for every vertex. Any downsides to that?

[bitWatermelon]

Thank you so much for this video Andrew it really helped a lot. Also I would like to ask is it possible to still set the viewing without having to set the Model. Having only view and Projection;
// Vertex shader
attribute vec4 vPosition;
uniform mat4 projMatrix;
uniform mat4 viewMatrix;
attribute vec4 vColor;
varying vec4 fColor;
void main(){
gl_Position = projMatrix * viewMatrix * vPosition;

fColor = vColor;
}
// Fragment shader

varying vec4 fColor;
void main(){
gl_FragColor = fColor;
}

[malachas]

Amazing videos! Are there any plans to do more videos on cameras? I'm having issues with rotation. It works fine without rotation, I can transform the view matrix and move around, but can't get rotation to work.