WebGl 代码 "object does not exist or has been deleted"

Question

当我运行我的代码时，我不断收到以下错误："INVALID_VALUE: getAttribLocation: no object or object deleted"

我是 webGL 的新手，非常感谢任何帮助！对不起，如果这个问题太宽泛。

HTML

<html>
<head>
    <script type="text/javascript" src = "prog1.js"></script>
    <script type="text/javascript" src = "webgl-utils.js"></script>
    <script type="text/javascript" src = "webgl-debug.js"></script>
    <script type="text/javascript" src = "cuon-utils.js"></script>
    <script type="text/javascript" src = "cuon-matrix.js"></script>

</head>
<body onload="init()">
    <script id ="vertexShader" type="x-shader/x-vertex">
        precision mediump float;
        attribute vec4 vertexPosition;
        void main(){
            gl_position = vertexPosition;
        }

    </script>

    <script id ="fragmentShader" type ="x-shader/x-fragment">
        void main(){
            gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
        }
    </script>
    <canvas id = "webgl" width = "300" height = "300"></canvas>
</body>
</html>

JAVASCRIPT

function flatten(a) {
    return a.reduce(function(b, v) {
        b.push.apply(b, v);
        return b
    }, [])
}

function init() {

    var positions = [
        [-0.25, 0.5, 0],
        [-0.5, 0.0, 0],
        [0.0, 0.0, 0.0]
    ];
    var triangles = [
        [0, 1, 2]
    ];

    // initialize the GL context

    canvas = document.getElementById("webgl");
    gl = getWebGLContext(canvas, false);

    // initialize the program object

    var vertexSource = document.getElementById("vertexShader").text;
    var fragmentSource = document.getElementById("fragmentShader").text;
    program = createProgram(gl, vertexSource, fragmentSource);
    gl.useProgram(program);

    // initialize the buffer objects

    positionBuffer = gl.createBuffer();
    triangleBuffer = gl.createBuffer();

    // copy vertex data to the gpu

    positionArray = new Float32Array(flatten(positions));
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, positionArray, gl.STATIC_DRAW);

    // copy triangle data to the gpu

    triangleArray = new Uint16Array(flatten(triangles));
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, triangleArray, gl.STATIC_DRAW);

    requestAnimationFrame(draw);
}

function draw() {
    var vertexSource = document.getElementById("vertexShader").text;
    var fragmentSource = document.getElementById("fragmentShader").text;

    gl.clearColor(0.0, 0.8, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    var vertexPositionLocation = gl.getAttribLocation(program, "vertexPosition");
    gl.vertexAttribPointer(vertexPositionLocation, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexPositionLocation);
    gl.drawElements(gl.TRIANGLES, triangleArray.length, gl.UNSIGNED_SHORT, 0);
}

Answer 1

您的着色器程序可能没有 compile/link 并且您的 createProgram 函数返回了 null。错误直接解释

INVALID_VALUE: getAttribLocation: 没有对象或对象被删除"

因为 getAttribLocation 只需要 2 个值。第一个是 WebGLProgram ，第二个是字符串。由于您的字符串是常量，因此您的程序参数一定有问题。 "no object" 可能意味着 "is null" 或 "undefined"

当我运行你的代码替换 createProgram 我得到

*** Error compiling shader: ERROR: 0:4: 'gl_position' : undeclared identifier 
ERROR: 0:4: 'assign' :  cannot convert from 'attribute mediump 4-component vector of float' to 'float'

function flatten(a) {
  return a.reduce(function(b, v) {
    b.push.apply(b, v);
    return b
  }, [])
}

function init() {

  var positions = [
    [-0.25, 0.5, 0],
    [-0.5, 0.0, 0],
    [0.0, 0.0, 0.0]
  ];
  var triangles = [
    [0, 1, 2]
  ];

  // initialize the GL context

  canvas = document.getElementById("webgl");
  gl = canvas.getContext("webgl");

  // initialize the program object

  var vertexSource = document.getElementById("vertexShader").text;
  var fragmentSource = document.getElementById("fragmentShader").text;
  program = createProgram(gl, vertexSource, fragmentSource);
  gl.useProgram(program);

  // initialize the buffer objects

  positionBuffer = gl.createBuffer();
  triangleBuffer = gl.createBuffer();


  // copy vertex data to the gpu

  positionArray = new Float32Array(flatten(positions));
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, positionArray, gl.STATIC_DRAW);

  // copy triangle data to the gpu

  triangleArray = new Uint16Array(flatten(triangles));
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, triangleArray, gl.STATIC_DRAW);

  requestAnimationFrame(draw);
}

function draw() {

  var vertexSource = document.getElementById("vertexShader").text;
  var fragmentSource = document.getElementById("fragmentShader").text;

  gl.clearColor(0.0, 0.8, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  var vertexPositionLocation = gl.getAttribLocation(program, "vertexPosition");
  gl.vertexAttribPointer(vertexPositionLocation, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vertexPositionLocation);
  gl.drawElements(gl.TRIANGLES, triangleArray.length, gl.UNSIGNED_SHORT, 0);


}

function createProgram(gl, vs, fs) {
  return twgl.createProgramFromSources(gl, [vs, fs]);
}

init();

<script id ="vertexShader" type="x-shader/x-vertex">
precision mediump float;
attribute vec4 vertexPosition;
void main(){
  gl_position = vertexPosition;
}
</script>

<script id ="fragmentShader" type ="x-shader/x-fragment">
void main(){
  gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
}
</script>

<canvas id = "webgl" width = "300" height = "300"></canvas>
<script src="https://twgljs.org/dist/twgl.min.js"></script>

错误是 gl_Position 而不是 gl_position。区分大小写。

您可能应该使用 standard boilerplate WebGL code 打印着色器编译和链接错误，并确保检查 JavaScript 控制台中的错误消息，或者在编译失败时使用警报或抛出异常。

PS：请尽可能使用运行ning 片段。这对我们其他人来说工作更少。

WebGl 代码 "object does not exist or has been deleted"

WebGl Code "object does not exist or has been deleted"

javascript

webgl