Problem with Binary XMLHttpRequest and WebGL buffers

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

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();
                        
}

If you’re trying to open local file then add this parameter to the chrome:

 --allow-file-access-from-files

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!

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

I can confirm this actually renders something.