javascript - How to create a Texture from a ArrayBuffer in html5 and WebGL -

i having image reading in server side , pushing web browser via ajax call. have requirement have render them line line using webgl.

for example : image 640x480 640 width , 480 height. total number of pixels 640*480 = 307200 pixels. so, want render whole image in 640(total width) intervals in loop using webgl.

now have texture2d(as per knowledge) in webgl so, not getting idea of start . having arraybuffer me , thing using texture2d want render ,line line.

i ready go js libraries ,if satisfying requirements.

tagging babylon.js , three.js ,incase guys have answer question have.

adding code explain requirement :

//recieve data code : var imagedatafromserver = single line data server; var imagelinedata = new arraybuffer(imagedatafromserver.length); var imageuintarray = new uint8array(imagelinedata); (var = 0; < width(i.e.640) ;i++) //because know 1 line length =640. { //how put data in texture2d using three.js or babylon.js or plain webgl }

ok, below working code 1) put .html file 2) load image (see comment in inittextures function)

in code added vertex , fragment shaders

<canvas width="400" height="400"></canvas>  <script> function initshaders(gl, vshader, fshader) {   var program = createprogram(gl, vshader, fshader);       gl.useprogram(program);   gl.program = program;    return true; }  function createprogram(gl, vshader, fshader) {   var vertexshader = loadshader(gl, gl.vertex_shader, vshader);   var fragmentshader = loadshader(gl, gl.fragment_shader, fshader);   var program = gl.createprogram();    gl.attachshader(program, vertexshader);   gl.attachshader(program, fragmentshader);    gl.linkprogram(program);   return program; }  function loadshader(gl, type, source) {   var shader = gl.createshader(type);   gl.shadersource(shader, source);   gl.compileshader(shader);   return shader; }  function getwebglcontext(canvas, opt_debug) {   return canvas.getcontext('webgl'); }  var vshader_source =   'attribute vec4 a_position;\n' +   'attribute vec2 a_texcoord;\n' +   'varying vec2 uv;\n' +   'void main() {\n' +   '  gl_position = a_position;\n' +   '  uv = a_texcoord;\n' +   '}\n';  var fshader_source =   '#ifdef gl_es\n' +   'precision mediump float;\n' +   '#endif\n' +   'uniform sampler2d uimage0;\n' +   'uniform vec2 resolution;\n' +   'uniform float time;\n' +   'varying vec2 uv;\n' +   'void main() {\n' +       'vec2 position = 1.0 - gl_fragcoord.xy / resolution;\n' +       'vec3 color = vec3(1.0);\n' +        'if (time > position.y * 10.0) {\n' +           'color = vec3(texture2d(uimage0, uv));\n' +       '}\n' +   '  gl_fragcolor = vec4(color, 1.0);\n' +   '}\n';  function main() {   var canvas = document.queryselector('canvas');   var gl = getwebglcontext(canvas);   initshaders(gl, vshader_source, fshader_source);    var n = initvertexbuffers(gl);   gl.clearcolor(0.0, 0.0, 0.0, 1.0);   inittextures(gl, n)    function render (dt) {     gl.uniform1f(time, dt / 1000);     draw();     requestanimationframe(render);   }    render(); }  function initvertexbuffers(gl) {   var verticestexcoords = new float32array([     -0.5,  0.5,   0.0, 1.0,     -0.5, -0.5,   0.0, 0.0,      0.5,  0.5,   1.0, 1.0,      0.5, -0.5,   1.0, 0.0,   ]);   var n = 4;   var vertextexcoordbuffer = gl.createbuffer();    gl.bindbuffer(gl.array_buffer, vertextexcoordbuffer);   gl.bufferdata(gl.array_buffer, verticestexcoords, gl.static_draw);    var fsize = verticestexcoords.bytes_per_element;   var a_position = gl.getattriblocation(gl.program, 'a_position');   gl.vertexattribpointer(a_position, 2, gl.float, false, fsize * 4, 0);   gl.enablevertexattribarray(a_position);    var a_texcoord = gl.getattriblocation(gl.program, 'a_texcoord');   gl.vertexattribpointer(a_texcoord, 2, gl.float, false, fsize * 4, fsize * 2);   gl.enablevertexattribarray(a_texcoord);    return n; }  function inittextures(gl, n) {   var texture = gl.createtexture();   resolution = gl.getuniformlocation(gl.program, 'resolution');   gl.uniform2f(resolution, 256, 256);   time = gl.getuniformlocation(gl.program, 'time');    var uimage0 = gl.getuniformlocation(gl.program, 'uimage0');    var image = new image();   image.onload = function(){ loadtexture(gl, n, texture, uimage0, image); };    // load file: http://www.html5rocks.com/static/images/tutorials/easy-hidpi/chrome1x.png   // same folder .html file   image.src = 'chrome1x.png';    return true; }  function loadtexture(gl, n, texture, uimage0, image) {   count = n;   gl = gl;    gl.pixelstorei(gl.unpack_flip_y_webgl, 1);   gl.activetexture(gl.texture0);   gl.bindtexture(gl.texture_2d, texture);   gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear);   gl.teximage2d(gl.texture_2d, 0, gl.rgb, gl.rgb, gl.unsigned_byte, image);   gl.uniform1i(uimage0, 0);    draw(); }  function draw () {   if (!window.gl) {     return;   }   gl.clear(gl.color_buffer_bit);   gl.drawarrays(gl.triangle_strip, 0, count); }  main(); </script>