# WebGL. Or... how to draw a single point, the hard way.
This time let's start with WebGL. For today let's walk through setting up a project and writing a basic WebGL program.
If you are familiar with Three.js, you will notice that WebGL is much *much* more low level.
WebGL is just an API for using the GPU to draw pixels on the screen. It is not, contrary to what you may think, a 3D graphics library.
There is *a lot* of work before we can draw triangles on the screen...
## Initial Setup
You can set up your project however you want. I am using Vite with plain TypeScript. My folder structure looks something like this:
```plaintext
./root
|-- src
|-- utils
|-- WebGLUtils.ts
|-- webgl_programs
|-- simple_program
|-- shaders
|-- fragment.glsl
|-- vertex.glsl
|-- simple.module.ts
|-- main.ts
|-- style.css
|-- index.html
|-- package.json
|-- tsconfig.json
```
Nothing too complicated if you have used Vite or some other frontend tooling before.
The only thing to note is those `.glsl` files. Those are *shaders* written in *GLSL*, a strongly typed language similar to C, and they are the code that is run by the GPU. We will get to that in a bit, don't worry!
As I am using Vite, I will use the ES Module style:
```html
```
We start with an HTML `canvas` element somewhere on our page as you can see above. Then, from `main.ts` we get a reference and get its webgl2 context.
```TypeScript
import "./style.css"
function main () {
// WebGL setup
const canvas = document.querySelector("#webgl")
const gl = canvas.getContext("webgl2")
}
document.addEventListener("DOMContentLoaded", () => {
main()
})
```
A few notes before continuing. First, I am writing this file as if it was an ES module, that's what the `type` attribute of the `