The IO module contains classes to load remote assets like images, shader files, textures, and more via different methods like XHR or JSONP. These methods are also exposed to the user so he can load models and data sets in an asynchronous way.
The XHR class provides an API for loading remote data asynchronously via an http request (AJAX). The domain serving the data must match the domain where the data is queried.
Initializes a new XHR instance.
var xhr = new PhiloGL.IO.XHR(options);
GET
or POST
. Default’s GET
.true
.false
.arraybuffer
to get binary data. More info here.sendAsBinary
is true
. The binary content to be sent. More info here).responseText
content.Creating a request object to a specific url.
var req = new PhiloGL.IO.XHR({
url: '/mydomain/somethingelse/',
onSuccess: function(text) {
alert(text);
},
onError: function() {
alert("An error ocurred");
}
});
Creates a connection and sends the information to be sent.
xhr.send();
Creating a request object to a specific url and making the request. Note the send
call at the end of the instanciation.
var req = new PhiloGL.IO.XHR({
url: '/mydomain/somethingelse/',
onSuccess: function(text) {
alert(text);
},
onError: function() {
alert("An error ocurred");
}
}).send();
The XHR Group class creates parallel XHR requests and returns the information in an array. Callbacks for when a single resquest is succesfull and also for when all requests are completed are provided.
Initializes a new XHR Group instance.
var xhr = new PhiloGL.IO.XHR.Group(options);
GET
or POST
. Default’s GET
.true
.false
.arraybuffer
to get binary data. More info here.sendAsBinary
is true
. The binary content to be sent. More info here).Creating a request object to a specific url.
var req = new PhiloGL.IO.XHR({
urls: ['/mydomain/1/' '/mydomain/2/'],
onError: function() {
alert("An error ocurred in one request");
},
onComplete: function(arr) {
alert("responses: " + arr);
}
});
Creates parallel connections for each url and sends the information.
xhr.send();
Creating a request object to a specific url and making the request. Note the send
call at the end of the instanciation.
var req = new PhiloGL.IO.XHR({
urls: ['/mydomain/1/', '/mydomain/2/'],
onSuccess: function(text) {
alert(text);
},
onError: function() {
alert("An error ocurred");
},
onComplete: function(arr) {
alert("answer array: " + arr);
}
}).send();
The JSONP class provides an API for loading remote data asynchronously via an http request. Instead of using the XMLHttpRequest
object JSONP creates a script
document that is appended to the head tag of the HTML page. This technique enables the user to query a different domain for JSON data. More information about this technique can be found here.
Creates and sends a JSONP request. Can be called without the new
keyword.
PhiloGL.IO.JSONP(options);
{}
)false
.Creating a request object to a specific url.
PhiloGL.IO.JSONP({
url: '/anotherdomain/somethingelse/',
callbackKey: 'callbackName',
data: {
'somekey': 'somevalue'
},
onComplete: function(json) {
console.log(json);
}
});
A very useful class that enables loading of multiple remote images asynchronously and returns an array with all the images loaded.
Creates a request to Images providing an array that will be asynchonously filled with loaded images.
var images = new PhiloGL.IO.Images(options);
images
variable will now have all loaded images.false
.Creating a request to load images.
var imageUrls = ['image1.png', 'image2.png', 'image3.png'];
var images = new PhiloGL.IO.Images({
src: imageUrls,
onProgress: function(perc) {
console.log(perc + ' loaded');
},
onComplete: function() {
alert("All images loaded! Now do something with the images array");
}
});
A very useful class that enables loading of multiple textures from remote images asynchronously.
Creates a request to Images to load the array of remote images and then generates Textures from them. The id of each texture will be the same as the url for each image. Can be called without the new
keyword.
PhiloGL.IO.Textures(program, options);
false
.Creating a request to load images and set them as textures for a specific program.
var program = PhiloGL.Program.fromShaderIds('vs-id', 'fs-id');
var imageUrls = ['image1.png', 'image2.png', 'image3.png'];
PhiloGL.IO.Textures(program, {
src: imageUrls,
onComplete: function() {
alert("All images and textures loaded!");
}
});