index previous next

Detailed plan

1. Rule No. 1
2. General plan
3. Detailed plan

Rule No.1 Don't get lost

If you ever get lost in this text, you don't know what you are doing or why you are doing something - backtrack. Get to some comfortable point and slowly go forward.

General plan

In the introduction there was something like

1. Get webgl context from canvas
2. Create vertex data
3. Put data into GPU buffer
4. Create vertex shader
5. Create fragment shader
6. Create shading program from vertex and fragment shader
7. Plug in buffer into shading program
8. Draw

Point 1. is behind us ;)

Let's expand this plan a bit.

Detailed plan

1. Get webgl context from canvas
2. Create vertex data
   1. create array with triangle's vertex data
   2. create float32 typed array with the same data
3. Put data into GPU buffer
   1. create buffer
   2. put data into buffer
4. Create vertex shader
   1. write vertex shader code
   2. embed vertex shader code into the page and get that code into string
   3. create vertex shader object
   4. put vertex shader code inside vertex shader object
   5. compile vertex shader
5. Create fragment shader
   1. write fragment shader code
   2. embed fragment shader code into the page and get that code into string
   3. create fragment shader object
   4. put fragment shader code inside fragment shader object
   5. compile fragment shader
6. Create shading program from vertex and fragment shader
   1. create program object
   2. attach vertex and fragment shader to the program
   3. link them
   4. use program
7. Plug in buffer into shading program
   1. set shader parameter to take values from array
   2. plug in array to the shader parameter
8. Draw

This plan is for you to remember - do not hurry. Take your time.

index previous next