WebGL is an API currently based on the OpenGL ES 2 (embedded systems) standard. In order to access WebGL we need to get the WebGL context from the canvas element. The API serves as middleware between your application and the GPU drivers. This means that it is quite low level and there are several things you need to do to actually render your 3D scene.

Take a look at the base code located at:
https://cglearn.codelight.eu/files/course/1/tasks/HelloWebGL.zip

You will notice several important things there:

• To get the WebGL context we use the experimental-webgl keyword.
• We need to specify the viewport width and height. Viewport is an area we are currently rendering to.
• There are shaders loaded. Shaders are pieces of code that the GPU will execute in parallel. We will learn more about shaders and implement them ourselves soon.
• There is a color buffer, that we clear prior to rendering a frame.
• We use an array buffer to store the vertex positions of our triangle.
• Then we use an attribute pointer to specify the name we access the vertex data in the shader.
• After this we actually call a draw command that will take the current buffer data as vertex coordinates and draw the triangle.

The coordinates that we use are in normalized device space. We are not doing any transformations on them, so a coordinate [0, 0, 0] will be in the middle of the viewport. The coordinate [-1, -1, 0] will be in the bottom-left corner and so on. Later we will see how to use transformations and projection to have a more intuitive coordinate space (that will later be transformed into normalized device space).

The task is the same as before. Draw an equilateral triangle that has a center positioned at the coordinates given into the drawTriangle(position) function.

The result should look something like the image on the right.