Question

我有一个关于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

Answer 1

如果我已正确理解您的问题，您可能错误地使用了texImage2D。问题是，ImageData signature of the function有点不同（它与am图像相同）：

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(/* ... */)
);

Answer 2

您需要像texImage2D一样使用而不显式传递宽度和高度。因为我认为texSubImage2D函数的宽度和高度需要思考

Answer 3

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

WebGLRenderingContext的texImage2D和texSubImage2D函数

3 个答案: