2016-08-29 3 views
0

У меня есть один вопрос о функции texImage2D и texSubImage2D WebGLRenderingContext. То, что я пытаюсь создать, похоже на загрузку изображения по плитке.Функция WebGLRenderingContext texImage2D и texSubImage2D

Вот моя первая функция. Он работает нормально, пока он первый. Но всякий раз, когда загружаешь второй раз, используя ту же функцию, но плиточный фон. Не удалось. Посмотрите на код ниже

// Это первый код нагрузка, которая работает нормально

gl.bindTexture(gl.TEXTURE_2D, handle) 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null) 

gl.bindTexture(gl.TEXTURE_2D, handle) 
gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, gl.RGBA, gl.UNSIGNED_BYTE, image) 

// Это второй раз с использованием такой же, но один другой раздел кодирования [данные изображения из холста]. Но это не работает.

gl.bindTexture(gl.TEXTURE_2D, handle) 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, [image data from canvas]) 

gl.bindTexture(gl.TEXTURE_2D, handle) 
gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, gl.RGBA, gl.UNSIGNED_BYTE, image) 

У вас когда-либо возникала проблема, подобная мне. Тогда, пожалуйста, наведите меня на свет. Очень ценю это.

UPD

on('start', function (data) { 

     gl.bindTexture(gl.TEXTURE_2D, handle) 
     // gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, data.width, data.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, myCanvasData) 
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, data.width, data.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(myCanvasData.buffer)) 

    }).on('progress', function (ev) { 
     var x = ev.position[0] 
     var y = texHeight - ev.position[1] - ev.image.height 

     // now blit the intermediate image 
     gl.bindTexture(gl.TEXTURE_2D, handle) 
     gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, gl.RGBA, gl.UNSIGNED_BYTE, ev.image) 

    }).on('complete', function() { 
    }) 

Console warning image

+1

Вы проверили консоль JavaScript на наличие ошибок? Не видя фактического кода для '[данных изображения с холста]', это несколько подозрительно. Другими словами, отправьте этот код и сообщите нам, есть ли какие-либо ошибки в консоли. – gman

ответ

0

Если я правильно понял ваш вопрос, вы, вероятно, используя texImage2D неправильно. Дело в том, для ImageDatasignature of the function немного отличается (это то же самое, как для утра изображения):

void texImage2D(GLenum target, GLint level, GLint internalformat, GLenum format, GLenum type, TexImageSource? source), 

где TexImageSource может быть ImageData объектом. Так что вам просто нужно пройти, без явной передачи ширины и высоты изображения:

gl.texImage2D(
    gl.TEXTURE_2D, 
    0, 
    gl.RGBA, 
    gl.RGBA, 
    gl.UNSIGNED_BYTE, 
    canvas.getImageData(/* ... */) 
); 
+0

Он мог бы выполнять 'gl.texImage2D (gl.TEXTURE_2D, 0, gl.RGBA, ширина, высота, gl.RGBA, gl.UNSIGNED_DATA, новый Uint8Array (canvas.getImageData (...). Data.buffer))) ; '? – gman

+0

Да, он мог. Если это так, то мой ответ не подходит :) –

+0

'gl.texImage2D ( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas.getImageData (/ * ... * /) ); ' этот код работает, но функция' texSubImage2D' работает неправильно. Я думаю, должен пройти ширину и высоту. Потому что без ширины и высоты 'texSubImage2D' эта функция не знает размер холста. –

0

Вы должны использовать как texImage2D без явной передачи ширины и высоты. Потому что я думаю, что texSubImage2D ширина и высота функция требует думал

0
on('start', function (data) { 

     gl.bindTexture(gl.TEXTURE_2D, handle) 
     // gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, data.width, data.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, myCanvasData) 
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, data.width, data.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(myCanvasData.buffer)) 

    }).on('progress', function (ev) { 
     var x = ev.position[0] 
     var y = texHeight - ev.position[1] - ev.image.height 

     // now blit the intermediate image 
     gl.bindTexture(gl.TEXTURE_2D, handle) 
     gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, gl.RGBA, gl.UNSIGNED_BYTE, ev.image) 

    }).on('complete', function() { 
    }) 

Console warning image

Смежные вопросы