WebGL纹理加载结果(Javascript)类型错误

WebGL Texture Loading Results In (Javascript) TypeError

本文关键字:类型 错误 Javascript 纹理 加载 结果 WebGL      更新时间:2023-09-26

我正在尝试开发一个面向对象的WebGL引擎,在实现纹理支持时收到一个类型错误。

我在这里引用这个教程。我花了大约5个小时从头开始重写(试图解决错误),但似乎什么都不起作用。

此要点的完整来源:https://gist.github.com/tsujp/a57664ae963c0b510d45

##我收到以下错误:##

[Error] TypeError: Type error
    drawScene (gule.js, line 951)
    render (gule.js, line 856)
    render (main.js, line 291)
    tick (main.js, line 278)
    init (main.js, line 18)

有问题的行是:_gl.bindBuffer( _gl.TEXTURE_2D, currentObject.TEXTURE.IMAGE );

注意:gule.js是"已编译"的文件,由下面列出的子文件(以及更多)组成。

以下是运行时相关对象的输出:

[OUTPUT FOR OBJECT cube_2]
Object
COLOUR_INFO: Object
INDEX_BUFFER: WebGLBuffer
NO_CORNERS: 8
NO_FACES: 6
POINT_ITEM_ARRAY: Float32Array[72]
POINT_ITEM_SIZE: 3
POINT_NUM_ITEMS: 24
POSITION_BUFFER: WebGLBuffer
TEXTURE: Object
    IMAGE: WebGLTexture
    SOURCE: "textures/texture_1.gif"
    WRAP_ITEM_ARRAY: Float32Array[48]
    WRAP_ITEM_SIZE: 2
    WRAP_NUM_ITEMS: 24
    __proto__: Object
TEXTURE_BUFFER: WebGLBuffer
VERT_ITEM_ARRAY: Uint16Array[36]
VERT_ITEM_SIZE: 1
VERT_NUM_ITEMS: 36
children: Array[0]
id: 2
name: "Cube 2"
parent: Object
uuid: "f25a4d62-1e7f-4d8f-82b1-76cef29e708f"
__proto__: Object

我不明白为什么我会收到一个类型错误,如果我正在构建完全相同的教程。下面是纹理构造的"简短"轨迹。

main.js

  // I want some textures instead
  texture = new GULE.Texture( "textures/texture_1.gif" );
  // Define wrapping
  var texture_wrap = [
    // Front face
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0,
    // Back face
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0,
    0.0, 0.0,
    // Top face
    0.0, 1.0,
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,
    // Bottom face
    1.0, 1.0,
    0.0, 1.0,
    0.0, 0.0,
    1.0, 0.0,
    // Right face
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0,
    0.0, 0.0,
    // Left face
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0,
  ];
  // Set wrap
  texture.setWrap( texture_wrap, 24 );
  // Set the cubes texture to be this "texture"
  cube_2.defineTexture( texture );

cube.js

GULE.Cube.prototype.defineTexture = function ( texture ) {
  this.TEXTURE = texture;
};
GULE.Cube.prototype.initialiseTextures = function ( context, program ) {
  this.TEXTURE._createTexture( context );
  context.bindTexture( context.TEXTURE_2D, this.TEXTURE.IMAGE );
  context.pixelStorei( context.UNPACK_FLIP_Y_WEBGL, true );
  context.texImage2D( context.TEXTURE_2D, 0, context.RGBA, context.RGBA, context.UNSIGNED_BYTE, this.TEXTURE.IMAGE.image );
  context.texParameteri( context.TEXTURE_2D, context.TEXTURE_MAG_FILTER, context.NEAREST );
  context.texParameteri( context.TEXTURE_2D, context.TEXTURE_MIN_FILTER, context.NEAREST );
  context.bindTexture( context.TEXTURE_2D, null );
};

texture.js

  setWrap: function ( wrap, numItems ) {
    this.WRAP_ITEM_ARRAY = new Float32Array( wrap );
    this.WRAP_NUM_ITEMS = numItems;
  },
  _createTexture: function ( context ) {
    this.IMAGE = context.createTexture();
    this.IMAGE.image = new Image();
    this.IMAGE.image.src = this.SOURCE;
  }

scene_renderer.js(渲染循环内部)

        _gl.bindBuffer( _gl.ARRAY_BUFFER, currentObject.TEXTURE_BUFFER );
        _gl.vertexAttribPointer( _program.textureCoordAttribute, currentObject.TEXTURE.WRAP_ITEM_SIZE, _gl.FLOAT, false, 0, 0 );
        _gl.activeTexture( _gl.TEXTURE0 );
        _gl.bindBuffer( _gl.TEXTURE_2D, currentObject.TEXTURE.IMAGE );
        _gl.uniform1i( _program.samplerUniform, 0 );

gl.bindBuffer不采用纹理。你给它传递了一个WebGLTexture。只需要WebGLBuffers。因此出现了类型错误。您还使用gl.TEXTURE_2D调用它,一旦修复了类型错误,它最终将生成gl.INVALID_ENUM

我怀疑你想打gl.bindTexture