glsl throws bunch of errors-CodePudding

I am trying to get a square drawn on to a html canvas using GLSL and I am actually having a hard time understanding the errors. Here is my code for defining vertex and fragment shaders.Also Don't forget to leave a comment about the question

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

And here is my code for loading and compiling above glsl code.

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

this is where the gSquareVertexBuffer variable from above code is defined.

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

And I call these functions in another file as below.

"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();
}

After I open the index.html file in the browser I can only see the canvas and I get the following errors in the console.

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

And also these WebGL warnings WebGL warning: linkProgram: Must have a compiled vertex shader attached: SHADER_INFO_LOG: ERROR: 0:3: '(' : syntax error

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

WebGL warning: useProgram: Program must be linked successfully.

WebGL warning: enableVertexAttribArray: -1 is not a valid index. 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.

I am new to WebGL and javaScript so don't forget to leave a comment.

CodePudding user response：

There is a syntax error in the vertex shader and in the fragment shader. void is the return type. The name of the main function is main:

~~void(main){~~

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

Furthermore, it is TRIANGLE_STRIP not 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>