# WebGL [Khronos: WebGL Specification](https://www.khronos.org/registry/webgl/specs/1.0/#2.1) I would highly recommend grabbing the Khronos reference card for WebGL, and any other related APIs you might be interested in. This WebGL reference is very useful, but unfortunately it's gated behind a 30-day trial leading to subscription to Scirbd. This is the official source and the only way I know of to get it, and it's not my place to redistribute this material, so [here's the official link](https://www.khronos.org/developers/reference-cards/). I just subscribed with paypal, downloaded my PDFs (all Khronos references), then canceled my account immediately. Scribd might actually be useful if I had more leisure time to read, but I don't so for now it's a hard pass. [WebGL Fundamentals](https://webglfundamentals.org/) If you are familiar with OpenGL already, I would recommend reading through [drawing a simple texture on 3D geometry](https://webglfundamentals.org/webgl/lessons/webgl-3d-textures.html). You will see a lot of familiar concepts are used in the JavaScript API when compared to OpenGL in C++. Within an HTML page, you can wrap JavaScript within `

This is test HTML with some CSS. Logging with JS...
The following block is an OpenGL canvas

``` The rest of this page will cover some more advanced WebGL as I get more familiar coming from OpenGL in C++. These are just my personal notes, mostly from following tutorials at [WebGL Fundamentals](https://webglfundamentals.org/). Some snippets from this site may appear here. ### WebGL Rendering To actually render to an HTML canvas using WebGL, we need a few things first. 1. Valid OpenGL context within an HTML web page (we have this already!) 2. Compiled shader source code (we also have shader code, but haven't compiled yet) 3. OpenGL Shader Program 4. Defined geometry 5. Call to an OpenGL draw method 6. Animation callback method (optional for static geometry) #### Creating Programs To render using OpenGL, we need to create a shader program. To do this we need to compile our shader source code and link them together into a shader program. Usually the two shader types used are Vertex and Fragment shaders. You can use other combinations for different reasons, but for this simple example we will only need these two types of shaders. The Vertex shader is a geometry shader that handles vertex position, and the Fragment shader is used for coloring and blending between these vertices. The vertex shader passes information to the Fragment shader, and we will have to keep this in mind to understand the code. If you haven't already, I *highly recommend* looking at the Khronos WebGL reference cards that I link to at the top of this page. These references contain lots of useful at-a-glance information regarding GLSL shader code, and might help you get up to speed quickly. To start, this section assumes you have the following code - ```html Title

This is test HTML with some CSS. Logging with JS...
The following block is an OpenGL canvas

``` You can see that we have stored GLSL shader source code in the HTML document by using ` ``` That's it! For this example there's no rendering happening yet, but we're one step closer to actually drawing to the canvas. In the next section, we'll talk about vertex attributes, buffers, and how they're used to pass data between our shader program and OpenGL context. #### Vertex Attributes Now that we have a shader program, we're need to load some data into it so the shaders can be used to actually render something to the canvas. First, let's take the same single-file approach to writing this WebGL program. Up to the end of the previous section on Shader Programs, you should have the following code within a single `index.html` document - ```html Title

This is test HTML with some CSS. Logging with JS...
The following block is an OpenGL canvas

``` From this point on, we will be working within the final ` ``` After running this code, we get the following result - [![](https://knoats.com/uploads/images/gallery/2022-02/scaled-1680-/image-1644271825934.png)](https://knoats.com/uploads/images/gallery/2022-02/image-1644271825934.png) But that doesn't have the RGB color we had in mind. Check the next section to see the changes needed to add RGB interpolation between vertices. #### Shaders At the end of this section, we will have modified our vertex and fragment shaders to support using RGB interpolation between the vertex positions of our triangle. What this means is each point of the triangle can be assigned a color, and the triangle will then be shaded with the blending of the different point colors. To start, I'll assume you have all of the code from the previous section, but I'll also paste it below just to preserve it as it was when I first wrote this. ```html Title

This is test HTML with some CSS. Logging with JS...
The following block is an OpenGL canvas

``` Using this code as a starting point, we will make the following changes.. *Sorry!* This page is a WIP. Check back later for updates.