WebGL GL FEHLER: GL_INVALID_OPERATION: glDrawElements: Versuch, außerhalb der Reichweite Scheitelpunkte in Attribut 1 zu erreichen

Question

Ich versuche, einen bereits vorhandenen Bug in einigen Code zu reparieren, der auf THREE.js rev 49 mit einigen benutzerdefinierten Shadern basiert.

Ich bin ein gesamter WebGL newb, so dass ich nicht in der Lage gewesen bin, viel Kopf oder Zahl von anderen Antworten zu machen, da sie viel mehr Wissen anzunehmen schienen als ich. Ich wäre sehr dankbar für sogar irgendwelche Hinweise darauf, wonach ich suchen sollte! :) Das Endergebnis des Codes besteht darin, einen transparenten Drahtgitterrahmen zu zeichnen und die Flächen mit transluzenten Texturen zu bemalen.

Der besondere Fehler ist:

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

ich das Problem zu einem bestimmten _gl.drawElements(_gl.TRIANGLES, geometryGroup.__webglFaceCount, _gl.UNSIGNED_SHORT, 0); in THREE.WebGLRenderer.renderBuffer verfolgt.

Hier ist ein Ausschnitt des anrufenden Code:

scene.overrideMaterial = depthMaterial; // shaders below 
var ctx = renderer.getContext(); // renderer is a THREE.WebGLRenderer 
ctx.disable(ctx.BLEND); 
// renderTarget is a THREE.WebGLRenderTarget, _camera, scene is obvious 
renderer.render(scene, _camera, renderTarget, true); // error occurs here 

Hier sind die relevanten Shadern:

uniforms: {}, 

    vertexShader: [ 
     "varying vec3 vNormal;", 

     "void main() {", 

      "vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);", 
      "vNormal = normalMatrix * normal;", 

      "gl_Position = projectionMatrix * mvPosition;", 

     "}" 
    ].join("\n"), 

    fragmentShader: [ 
     "vec4 pack_depth(const in highp float depth) {", 

      "const highp vec4 bit_shift = vec4(256.0, 256.0*256.0, 256.0*256.0*256.0, 256.0*256.0*256.0*256.0);", 
      "vec4 res = depth * bit_shift;", 
      "res.x = min(res.x + 1.0, 255.0);", 
      "res = fract(floor(res)/256.0);", 
      "return res;", 

     "}", 

     "void main() {", 
      "gl_FragData[0] = pack_depth(gl_FragCoord.z);", 
     "}" 
    ].join("\n") 

Vielen Dank für Ihre Hilfe!

Answer 1

In WebGL richten Sie Puffer voller Daten ein, in der Regel Vertexpositionen, Normalen, Farben, Texturkoordinaten. Sie bitten dann WebGL, etwas mit diesen Puffern zu zeichnen. Sie können mit gl.drawArrays oder mit gl.drawElements fragen. gl.drawElements verwendet einen anderen Puffer voller Indizes, um zu entscheiden, welche Scheitelpunkte verwendet werden sollen.

Der Fehler, den Sie erhalten haben, bedeutet, dass Sie WebGL gebeten haben, mehr Elemente als die von Ihnen eingerichteten Puffer zu zeichnen oder darauf zuzugreifen. Mit anderen Worten, wenn Sie nur 3 Vertices Daten zur Verfügung stellen, aber Sie bitten, 4 Ecken zu zeichnen, wenn Sie gl.drawArrays aufrufen, erhalten Sie diesen Fehler. Wenn Sie also nur 3 Datenpunkte mit Scheitelpunkten bereitstellen, dann aber Indizes erstellen, die auf einen Scheitelpunkt größer als 2 zugreifen, erhalten Sie diesen Fehler. Sie haben 3 Eckpunkte, die mit # 0, # 1 und # 2 nummeriert sind. Wenn einer Ihrer Indizes größer als 2 ist, bitten Sie WebGL, auf etwas außerhalb des Bereichs der drei von Ihnen bereitgestellten Eckpunkte zuzugreifen.

Also, überprüfen Sie Ihre Daten. Sind die Indizes außerhalb des zulässigen Bereichs? Ist einer Ihrer Puffer kürzer als die anderen? etc ..

Answer 2

ich bin, diese für Gründlichkeit - ich ein importiertes OBJ-Modell wurde mit und wurde diesen Fehler, wenn die Shader über THREE.ShaderLib [ „normalmap“]

Das Update wurde einfach Aufruf computeTangents Schaffung() für das Geometrieobjekt des Netzes:

model.geometry.computeTangents();

archiviert die Antwort here