Tutorials
Prerequisites
To benefit from this tutorial you need to have:
- Basic understanding of computer coding and function design;
- Knowledge of scientific computing;
- Basic familiarity with
HTML
andJavaScript
programming; - Basic understanding of
rgba
colors, images, and pixels; - Basic knowledge about geometry and coordinate systems;
- Understand
HTML
events; - Minimal familiarity with GLSL or C language;
- Access to a code editor;
- Access to a modern web-browser such as Google Chrome or Mozilla FireFox.
NOTICE: Microsoft Internet Explorer, Edge or Apple Safari do NOT support WebGL 2.0 at the moment.
What these tutorials are not about
Please, be aware that this is not a tutorial on
- detailed description of the graphical pipeline;
- computer graphics design;
- basic WebGL design without using Abubu.js;
- numerical methods and techniques;
- parallel algorithm design;
- JavaScript programming;
- Website design;
- Server setup;
If you need training on any of the above-mentioned topics, you are advised to refer to the numerous resources that can be found online. In the recommended resources section of this website, we have introduced a list of the resources that we found to be useful on some of the above-mentioned topics. The list is by no means exhaustive and may not be tailored or ideal to every individual.
What these tutorials are about
In this set of tutorials, you will learn how you can design numerical WebGL 2.0 applications without any direct calls to WebGL directives.
We will start by drawing a basic triangle, and then represent a rectangle with two triangles. We will build our computational fortress on the foundation of coloring a unit rectangle. Our codes will advance to looping and building recursive complex maps, and then we will advance to time marching problems.
You will get familiar with Abubu.js data structures, solver setups, and visualization tools.
We will also cover some examples of introducing user interactions into our computational codes.
How to view the source codes?
You can download the source codes for all the tutorials at the bottom of the each tutorial page as a single zip file.
Furthermore, at the end of each tutorial, there is a link to the completed program. You can click on the link to run/view the program/page. To see the source code for program, first open the link, then right click on the page in your browser and choose View Page Source
in Google Chrome or Firefox.