glsl抛出一堆错误

Question

我正在尝试使用 GLSL 在 html canvas 上绘制一个正方形，实际上我很难理解这些错误。这是我定义顶点和片段着色器的代码。另外不要忘记对问题发表评论

        <script type="x-shader/x-vertex" id="VertexShader">
            attribute vec3 aSquareVertexPosition;
            void(main){
                gl_Position = vec4(aSquareVertexPosition, 1.0);
            }
        </script>

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

这里是我加载和编译上述 glsl 代码的代码。

var gSimpleShader = null;
var gShaderVertexPositionAttribute = null;

function loadAndCompile(id, shaderType) {
    var shaderText, shaderSource, compiledShader;
    
    shaderText = document.getElementById(id);
    shaderSource = shaderText.firstChild.textContent;

    compiledShader = gGL.createShader(shaderType);

    gGL.shaderSource(compiledShader, shaderSource);
    gGL.compileShader(compiledShader);

    var errorOrNot = gGL.getShaderParameter(compiledShader, gGL.COMPILE_STATUS);
    if (!errorOrNot){
        console.error(gGL.getShaderInfoLog(compiledShader));    
    }
    return compiledShader;
}

function initSimpleShader(vertexShaderID, fragmentShaderID) {
    var vertexShader = loadAndCompile(vertexShaderID, gGL.VERTEX_SHADER);
    var fragmentShader = loadAndCompile(fragmentShaderID, gGL.FRAGMENT_SHADER);

    gSimpleShader = gGL.createProgram();
    gGL.attachShader(gSimpleShader, vertexShader);
    gGL.attachShader(gSimpleShader, fragmentShader);
    gGL.linkProgram(gSimpleShader);

    var errorOrNot = gGL.getProgramParameter(gSimpleShader, gGL.LINK_STATUS);
    if (!errorOrNot){
        console.error(gGL.getProgramInfoLog(gSimpleShader));    
    }

    gShaderVertexPositionAttribute = gGL.getAttribLocation(gSimpleShader, "aSquareVertexPosition");

    gGL.bindBuffer(gGL.ARRAY_BUFFER, gSquareVertexBuffer);

    gGL.vertexAttribPointer(gShaderVertexPositionAttribute, 3, gGL.FLOAT, false, 0, 0);
}

这是定义上面代码中的 gSquareVertexBuffer 变量的地方。

"use strict";
var gSquareVertexBuffer = null;

function initSquareBuffer() {
    var verticesOfSquare =
    [
        0.5, 0.5, 0.0,
        -0.5, 0.5, 0.0,
        0.5, -0.5, 0.0,
        -0.5, -0.5, 0.0,
    ];

    gSquareVertexBuffer = gGL.createBuffer();
    
    gGL.bindBuffer(gGL.ARRAY_BUFFER, gSquareVertexBuffer);

    gGL.bufferData(gGL.ARRAY_BUFFER, new Float32Array(verticesOfSquare), gGL.STATIC_DRAW);
}

然后我在另一个文件中调用这些函数，如下所示。

"use strict";
var gGL = null;

function initializeGL()
{
    var canvas = document.getElementById("GLCanvas");
    gGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

    if (gGL != null){
        gGL.clearColor(0.0, 0.0, 1.0, 1.0);

        initSquareBuffer();
        initSimpleShader("VertexShader", "FragmentShader");
    }else{
        document.write("<br><b>WebGL is not supported</b>");
    }
}

function drawSquare()
{
    gGL.clear(gGL.COLOR_BUFFER_BIT);

    gGL.useProgram(gSimpleShader);
    gGL.enableVertexAttribArray(gShaderVertexPositionAttribute);
    gGL.drawArrays(gGL.TRANGLE_STRIP, 0, 4);
}

function doGLDraw()
{
    initializeGL();
    drawSquare();
}

在浏览器中打开 index.html 文件后，我只能看到 canvas 并且在控制台中出现以下错误。

Must have a compiled vertex shader attached: SHADER_INFO_LOG: ERROR: 0:3: '(' : syntax error

还有这些 WebGL 警告 WebGL warning: linkProgram: Must have a compiled vertex shader attached: SHADER_INFO_LOG: ERROR: 0:3: '(' : syntax error

WebGL warning: vertexAttribI?Pointer: 索引 (4294967295) must be < MAX_VERTEX_ATTRIBS.

WebGL warning: useProgram: Program must be linked successfully.

WebGL warning: enableVertexAttribArray: -1 is not a valid 索引. This value probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program.

WebGL warning: drawArraysInstanced: The current program is not linked.

我是 WebGL 的新手，javaScript 所以不要忘记发表评论。

Answer 1

顶点着色器和片段着色器中存在语法错误。 void 是 return 类型。主函数的名字是main:

~~void(main){~~

void main(){
    // [...]
}

而且是TRIANGLE_STRIP不是TRANGLE_STRIP

~~gGL.drawArrays(gGL.TRANGLE_STRIP, 0, 4);~~

gGL.drawArrays(gGL.TRIANGLE_STRIP, 0, 4);

var gSimpleShader = null;
var gShaderVertexPositionAttribute = null;

function loadAndCompile(id, shaderType) {
    var shaderText, shaderSource, compiledShader;
    
    shaderText = document.getElementById(id);
    shaderSource = shaderText.firstChild.textContent;

    compiledShader = gGL.createShader(shaderType);

    gGL.shaderSource(compiledShader, shaderSource);
    gGL.compileShader(compiledShader);

    var errorOrNot = gGL.getShaderParameter(compiledShader, gGL.COMPILE_STATUS);
    if (!errorOrNot){
        console.error(gGL.getShaderInfoLog(compiledShader));    
    }
    return compiledShader;
}

function initSimpleShader(vertexShaderID, fragmentShaderID) {
    var vertexShader = loadAndCompile(vertexShaderID, gGL.VERTEX_SHADER);
    var fragmentShader = loadAndCompile(fragmentShaderID, gGL.FRAGMENT_SHADER);

    gSimpleShader = gGL.createProgram();
    gGL.attachShader(gSimpleShader, vertexShader);
    gGL.attachShader(gSimpleShader, fragmentShader);
    gGL.linkProgram(gSimpleShader);

    var errorOrNot = gGL.getProgramParameter(gSimpleShader, gGL.LINK_STATUS);
    if (!errorOrNot){
        console.error(gGL.getProgramInfoLog(gSimpleShader));    
    }

    gShaderVertexPositionAttribute = gGL.getAttribLocation(gSimpleShader, "aSquareVertexPosition");

    gGL.bindBuffer(gGL.ARRAY_BUFFER, gSquareVertexBuffer);

    gGL.vertexAttribPointer(gShaderVertexPositionAttribute, 3, gGL.FLOAT, false, 0, 0);
}

var gSquareVertexBuffer = null;

function initSquareBuffer() {
    var verticesOfSquare =
    [
        0.5, 0.5, 0.0,
        -0.5, 0.5, 0.0,
        0.5, -0.5, 0.0,
        -0.5, -0.5, 0.0,
    ];

    gSquareVertexBuffer = gGL.createBuffer();
    
    gGL.bindBuffer(gGL.ARRAY_BUFFER, gSquareVertexBuffer);

    gGL.bufferData(gGL.ARRAY_BUFFER, new Float32Array(verticesOfSquare), gGL.STATIC_DRAW);
}

var gGL = null;

function initializeGL()
{
    var canvas = document.getElementById("GLCanvas");
    gGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

    if (gGL != null){
        gGL.clearColor(0.0, 0.0, 1.0, 1.0);

        initSquareBuffer();
        initSimpleShader("VertexShader", "FragmentShader");
    }else{
        document.write("<br><b>WebGL is not supported</b>");
    }
}

function drawSquare()
{
    gGL.clear(gGL.COLOR_BUFFER_BIT);

    gGL.useProgram(gSimpleShader);
    gGL.enableVertexAttribArray(gShaderVertexPositionAttribute);
    gGL.drawArrays(gGL.TRIANGLE_STRIP, 0, 4);

    requestAnimationFrame(drawSquare);
}

function doGLDraw()
{
    initializeGL();
    drawSquare();
}

doGLDraw()

<script type="x-shader/x-vertex" id="VertexShader">
attribute vec3 aSquareVertexPosition;
void main(){
    gl_Position = vec4(aSquareVertexPosition, 1.0);
}
</script>

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

glsl抛出一堆错误

glsl throws bunch of errors

javascript

webgl