Question

运行代码时出现以下错误：“INVALID_VALUE：getAttribLocation：没有删除任何对象或对象”

我是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

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

INVALID_VALUE： getAttribLocation ：没有删除任何对象或对象＆＃34;

由于getAttribLocation只需要2个值。第一个是WebGLProgram，第二个是字符串。由于您的字符串是常量，因此您的程序参数必定存在问题。＆＃34;没有对象＆＃34;可能意味着＆＃34;是空的＆＃34;或＆＃34;未定义＆＃34;

当我用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();

＆＃13;

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

＆＃13;

gl_Position

＆＃13;

错误是gl_position而不是var result = Cesium.Cartesian3.fromDegrees(latitude, longitude, elevation);。它区分大小写。

您应该使用standard boilerplate WebGL code打印着色器编译和链接错误，并确保检查JavaScript控制台是否有错误消息，或者如果编译失败则使用警报或抛出异常。

PS：请尽可能使用正在运行的代码段。对我们其他人来说，这项工作较少。

WebGl代码“对象不存在或已被删除”

1 个答案: