Abubu.js
The WebGL Computational Library
Tutorials 0 - Introduction 1 - Hello, triangle! 2 - Hello, rectangle! 3 - Unit rectangle 4 - Scaled unit rectangle 5 - Pixel positions 6 - Default vertex shader 7 - Circle by the fragment shader 8 - Iterations and the Mandelbrot set 9 - Macros and the Julia set 10 - Using textures as output 11 - Uniforms and interactions 12 - Time marching

Tutorials

Prerequisites

To benefit from this tutorial you need to have:


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


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.

Download the source code for all tutorials