WebGL纹理加载结果（Javascript）TypeError

Question

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

我正在引用本教程here。我花了大约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是＆＃39;编译的＆＃39;文件由下面列出的子文件（及更多）组成。

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

[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

如果我构建它与教程完全相同，我不明白为什么会收到类型错误。以下是＆＃39;短＆＃39;跟踪纹理的构造方式。

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 );

Answer 1

gl.bindBuffer不接受纹理。您已将WebGLTexture传递给它。它只需要WebGLBuffers。因此类型错误。您还使用gl.TEXTURE_2D调用它，一旦您修复了类型错误，最终会生成gl.INVALID_ENUM。

我怀疑你想打电话给gl.bindTexture？