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.