PDA

View Full Version : Problem with Binary XMLHttpRequest and WebGL buffers



rambutan
01-16-2011, 12:30 AM
Hi all,

I'm just getting into webGL and want to start loading binary data directly into buffers instead of translating JSON into arrayBuffers. I can load the data correctly into a buffer but when I try and set that buffer as current I get this error in Chrome:

Uncaught TypeError: Type error


Here's a code snippet, the webGL parts are based off Lesson 1:



function onLoad()
{
var canvas = document.getElementById("lesson01-canvas");
initGL(canvas);

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "cube.bm", true);
xmlhttp.responseType = "arraybuffer";

xmlhttp.onload = function()
{
var buffer = xmlhttp.response;
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// Reading Data
var v1 = new Float32Array(buffer);

alert(v[0]); // This works fine.
}
xmlhttp.send();

}


I guess I need a solid example of how to give the result of a binary XMLHttpRequest into an arrayBuffer correctly. This is a Chrome only thing, I know that Firefox has a different way of requesting binary data at the moment.

Thanks!

Ram

rambutan
01-16-2011, 12:35 AM
Arrrg it wouldnt let me edit the orig post but here's a slight update to the code:



function onLoad()
{
var canvas = document.getElementById("lesson01-canvas");
initGL(canvas);

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "cube.bm", true);
xmlhttp.responseType = "arraybuffer";

xmlhttp.onload = function()
{
var buffer = xmlhttp.response;
gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // This causes an error

// Reading Data
var v1 = new Float32Array(buffer);

alert(v1[0]); // This works fine.
}
xmlhttp.send();

}

wglb
01-16-2011, 09:16 AM
If you're trying to open local file then add this parameter to the chrome:
--allow-file-access-from-files

rambutan
01-16-2011, 05:24 PM
No it's not a file issue, I can open the file correctly and I've tested that the binary data I receive is correct, the problem is getting that binary data into webGL. But thanks for the reply!

rambutan
01-16-2011, 05:37 PM
I have yet to actually try and render anything but this at least doesn't generate any JS errors:



function onLoad()
{
var canvas = document.getElementById("lesson01-canvas");
initGL(canvas);

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "cube.bm", true);
xmlhttp.responseType = "arraybuffer";

xmlhttp.onload = function()
{
var XHR_buffer = xmlhttp.response;
var GL_Buffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, GL_Buffer);

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(XHR_buffer), gl.STATIC_DRAW);

// Reading Data
var v1 = new Float32Array(XHR_buffer);
alert(v1[0]);
}
xmlhttp.send();

}


Thank goes out to cultureulterior and his/her blog:
http://calumnymmo.wordpress.com/2010/12 ... comment-12 (http://calumnymmo.wordpress.com/2010/12/22/so-i-decided-to-wait/#comment-12)

rambutan
01-18-2011, 02:25 AM
I can confirm this actually renders something.