0

I have written a program for displaying a model using WebGL. The program takes the input data(-vertices, indices, color) from an XML and is working very well. However, it takes some amount of time (during which the browser is unresponsive) to load the vertex data before drawing the model. Once it obtains the data it works as though the model is manipulated in a desktop application.

How can I be able to draw the model (step-by-step) as the vertex data is sent to the program? This could display the model slowly as the vertices are being fed. And for ease, I have the program in such a way, that I did not use an index array. The vertices are aligned in the vertex array based on the index data. So, I could use gl.drawArrays automatically without using gl.drawElements (the reason being - for color).

So, finally, is there a way for the progressive rendering? so that the code streams the vertices as they come in? I have seen examples of progressive rendering in http://webgl-loader.googlecode.com/svn/trunk/samples/happy/happy.html and read similar stuff in Three.js. I did not use any framework like Three.js.

It would help if you have a simple example program for progressive rendering.

genpfault
  • 51,148
  • 11
  • 85
  • 139
grajesh
  • 91
  • 1
  • 1
  • 3

1 Answers1

0

You could use JavaScript "onload" event handlers to wait until you have downloaded all the data needed, before transferring t to the GPU. I could also suggest to use XMLHttpRequest objects to load data from network asynchronously; perhaps this is a better option.

At the beginning, when you don't have vertex data yet, you can initialize your buffers with some "temporal" data(like a cube for example). Than replace it within onload/oncomplete handlers of your data loading mechanism.

Pavel Beliy
  • 494
  • 1
  • 3
  • 14
  • Thanks for the reply. I was using XMLHttpRequest in my code already. It is written in a function which takes an input argument, the filename (basically the url). Calling this function loads the data from the xml completely and then executes the WebGL commands. It does not flush the vertices after each line or something. Do you have an existing simple example that I can refer to? – grajesh Oct 23 '13 at 08:39