back to main page

WebGL first triangle tutorial

This tutorial deals with WebGL 1.0. It is about displaying your first triangle using WebGL and knowing what is going on in the code.

Table of contents

• 00-01 intro notice
• 00-02 preconditions
• 01 introduction
• 02 clear canvas
• 03-01 detailed plan
• 03-02 create vertex data
• 03-03 put data into gpu buffer
• 03-04 vertex shader
• 03-05 fragment shader
• 03-06 shading program
• 03-07 plugging in the buffer
• 03-08 draw call
• 04 working triangle

Thanks to małpa from Hackerspace Wrocław for reviewing it.

Syntax highlight thanks to: https://highlightjs.org/

Article written 31.07.2014

Minor updates 26.04.2017