Set the background color

Draw a point (size, position and color are hardcoded in the shader)

Draw a point (the position is passed in from outside)

Passing the mouse click position to the shader

Passing the mouse click position and random color to the shader

Draw multiple points

Draw a triangle

Translation

Matrix Translation

Rotation

Matrix Rotation

Matrix Scaling

Matrix scaling (using a third-party library)

Rotation Animation

Use two buffers to pass position and size respectively

Use a buffer to pass both position and size

Define the color of the point and interpolate to generate other colors

Generate the corresponding color according to the coordinates

Using Texture Mapping

Blending multiple texture maps

Sets the direction of the viewer's sight

Fixed the direction of the observer's sight, and used the A and D keys to change the observer's position

Multiply the view direction matrix by the projection matrix

When the projection ratio and canvas ratio are inconsistent, the image will be distorted

Perspective Projection

Turn on hidden surface elimination to handle the front-back relationship of triangles

When two surfaces are too close, depth conflict may occur. Press P to enable polygon offset

Draw a cube by vertex index

Use a single vertex per face to draw a solid color face

Parallel light shines on the red cube

Ambient light + parallel light shines on the red cube

Dealing with the lighting problem after model transformation by inverting the transpose matrix, Press R to correct the problem

Point light - calculates the color of each vertex and interpolates

Point Lights - Calculates the color of all points, including interpolated ones

Use two cubes to represent the upper arm and forearm, and control them through 1,2,3,4

Draw a more complex "robot" and control it through 1,2,3,4,5,6,7,8

Rotate an object by dragging the mouse

Determine whether the object is clicked

Determine whether a certain face of the object is clicked

Overlay multiple canvases together to achieve an overlay effect

Fog effect

Draw circular points

Alpha blending, transparency blending

Alpha blending, semi-transparent cube

Draw both opaque and transparent objects

Use gl.useProgram to switch between multiple shaders

Use the drawn content as the texture of another object

Drawing shadows. Press F to fix the Mach band

Loading a model from a file

Handling context loss events

Left-handed and right-handed coordinate systems

Load shader code from a file