Advanced geometry loading techniques: JavaScript Object Notation (JSON) and AJAX

So far, we have rendered very simple objects. Now let's study a way to load the geometry (vertices and indices) from a file instead of declaring the vertices and the indices every time we call initBuffers. To achieve this, we will make asynchronous calls to the web server using AJAX. We will retrieve the file with our geometry from the web server and then we will use the built-in JSON parser to convert the context of our files into JavaScript objects. In our case, these objects will be the vertices and indices array.

Introduction to JSON - JavaScript Object Notation

JSON stands for JavaScript Object Notation. It is a lightweight, text-based, open format used for data interchange. JSON is commonly used as an alternative to XML.

The JSON format is language-agnostic. This means that there are parsers in many languages to read and interpret JSON objects. Also, JSON is a subset of the object literal notation of JavaScript. Therefore, we can define JavaScript objects using JSON.

Defining JSON-based 3D models

Let's see how this work. Assume for example that we have the model object with two arrays vertices and indices (does this ring any bells?). Say that these arrays contain the information described in the cone example (ch2_Cone.html) as follows: 

vertices =[1.5, 0, 0,
-1.5, 1, 0,
-1.5, 0.809017, 0.587785,
-1.5, 0.309017, 0.951057,
-1.5, -0.309017, 0.951057,
-1.5, -0.809017, 0.587785,
-1.5, -1, 0,
-1.5, -0.809017, -0.587785,
-1.5, -0.309017, -0.951057,
-1.5, 0.309017, -0.951057,
-1.5, 0.809017, -0.587785];
indices = [0, 1, 2,
0, 2, 3,
0, 3, 4,
0, 4, 5,
0, 5, 6,
0, 6, 7,
0, 7, 8,
0, 8, 9,
0, 9, 10,
0, 10, 1];

Following the JSON notation, we would represent these two arrays as an object, as follows: 

var model = {
"vertices" : [1.5, 0, 0,
-1.5, 1, 0,
-1.5, 0.809017, 0.587785,
-1.5, 0.309017, 0.951057,
-1.5, -0.309017, 0.951057,
-1.5, -0.809017, 0.587785,
-1.5, -1, 0,
-1.5, -0.809017, -0.587785,
-1.5, -0.309017, -0.951057,
-1.5, 0.309017, -0.951057,
-1.5, 0.809017, -0.587785],
"indices" : [0, 1, 2,
0, 2, 3,
0, 3, 4,
0, 4, 5,
0, 5, 6,
0, 6, 7,
0, 7, 8,
0, 8, 9,
0, 9, 10,
0, 10, 1]};

From the previous example, we can infer the following syntax rules:

  • The extent of a JSON object is defined by curly brackets {}
  • Attributes in a JSON object are separated by comma,
  • There is no comma after the last attribute
  • Each attribute of a JSON object has two parts: a key and a value
  • The name of an attribute is enclosed by quotation marks " "
  • Each attribute key is separated from its corresponding value with a colon :
  • Attributes of the type Array are defined in the same way you would define them in JavaScript

JSON encoding and decoding

Most modern web browsers support native JSON encoding and decoding through the built-in JavaScript object JSON. Let's examine the methods available inside this object:

Method

Description

var myText = JSON.stringify(myObject)

We use JSON.stringify for converting JavaScript objects to JSON-formatted text.

var myObject = JSON.parse(myText)

We use JSON.parse for converting text into JavaScript objects.

Let's learn how to encode and decode with the JSON notation.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.147.238.70