Tutorials

These tutorials are targeted at people with a reasonable web programming knowledge (HTML and JavaScript languages) and a basic web 3D programming knowledge (WebGL API).

Tutorial 0 : Setup The Name Space

This tutorial introduces the modular structure of the library, essential to understand where to find the various tools provided. Furthermore, the SpiderGL name space is described in detail.

View DemoDownload Source

Welcome to the first SpiderGL tutorial! In this basic lesson we will see only one SpiderGL command, that initializes a simple (but important) part of the library: the name space.
SpiderGL is: a JavaScript library, created to make easiest to design 3D web pages with WebGL. In order to achieve this goal our library provides to the graphic API useful data structures, mathematical functions, and various others tools, structured in different components, each called in a different way depending by the specific scope.
The SpiderGL namespace is simply a series of prefix conventions to compose shortcuts to calls that would otherwise require a concatenation of references to class members. For example we can obtain a three dimensional array of zeroes by writing "SglVec3.zero()" instead of "SpiderGL.Math.Vec3.zero()". More specifically, SpiderGL makes available to the user the following components:

  • Core
  • DOM
  • I/O (Input/Output)
  • Math
  • Model
  • Space
  • Type
  • UI (User Interface)
  • Utility
  • Version
  • WebGL

Each of these components contain different classes; for example, in Math we can find the sections Mat3 and Mat4, to handle respectively 3x3 and 4x4 dimensional matrices (browse the SpiderGL online documentation for a complete overview).

To enable an easy and fast access to the components, to their methods and to their default values, it was introduced a particular system of name space. Thanks to this system using only three short prefixes is possible to reach every constants, functions and classes inside SpiderGL:

SGL_-gives access to constant values present in each component (e.g., "SGL_PI" allows to get the costant π preventing to type "SpiderGL.Math.PI" ).
sgl-can be used before the function names of each component (e.g., "sglRandom()" allows to get a random number avoiding to use the full path "SpiderGL.Math.random()" ).
Sgl-allows to reach the different components to get to the various classes (e.g., "SglVec3.zero()" returns a three dimensional array of zeroes preventing to type "SpiderGL.Math.Vec3.zero()" ).

Let's look to the tutorial code. This first example is the simplest as possible: there are only a couple of HTML elements (a textarea for debugging and a rudimental text field), and few JavaScript lines of code.
In particular we have two script blocks: in the first, as it is obvious, the SpiderGL library is loaded; in the second, instead, in addiction to some JavaScript function to manage the loading of the web page and the text in the textarea, we have our first SpiderGL call:

SpiderGL.openNamespace();

This line enables the name space system earlier explained, and allows us to use the prefixes just seen, simplifying the writing of our code. In the JavaScript function "tutorial" we can see an example of this:

function tutorial() {
  log("SpiderGL Version: " + SGL_VERSION_STRING);	 
}

Using the name space "SGL_" we can access easily the constant "VERSION_STRING" containing the current version of the SpiderGL library in use.

The lesson 0 ends here. Now, the reader should have a good understanding of how the SpiderGL name space system works, and a bit more knowledge of the main structure of the library and his division into components.

In the next tutorial we will introduce some of the mathematical tools and utilities provided by SpiderGL.

Tutorials List