01 · Hello, triangle

Fragment shader

Vertex shader rotate the triangle draw as gl.LINE_LOOP

Only three vertices ever reach the GPU. Every other pixel's color is produced by the rasterizer interpolating the per-vertex values and the fragment shader running once per pixel.

What TinyGraphics.js does for you

This demo is plain WebGL on purpose. From demo 02 on, the TinyGraphics.js library performs these same calls: Shape creates and fills the buffers and the vertex array, Shader compiles and links the program and looks up every uniform, and Canvas_Widget runs the render loop and resizes the canvas. Your vertex and fragment shaders stay exactly as you write them.