Question

我有一些问题也许语法可能逻辑不知道，但我的着色器没有编译时，它通过控制台可能有人知道发生了什么，我按照youtube上的教程：WebGl Tutorial

var vertexShaderText = 
[
'precision mediump float;',
'',
'attribute vec2 vertPosition;',
'',
'void main()',
'{',
'gl_position = vec4(vertPosition,0.0,1.0);',
'}'
].join('\n');

var fragmentShaderText = 
[
'precision mediump float;',
'',
'void main()',
'{',
'gl_FragColor = vec4(1.0,0.0,0.0,1.0);',
'}'
].join('\n');

var initDemo = function()
{
    console.log("this is working");
    var canvas = document.getElementById("myCanvas");
    var gl = canvas.getContext("webgl");

if(!gl)
{
    console.log("your browser doesnt support webgl, trying expermiental");
    gl = canvas.getContext("experimental-webgl");
}

if(!gl)
{
    alert("your bwoser doesnt support webgl");
}

gl.clearColor(0,1,0,1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// create shadders
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(vertexShader,vertexShaderText);
gl.shaderSource(fragmentShader,fragmentShaderText);

    console.log(fragmentShader);

if(!gl.getShaderParameter(vertexShader,gl.COMPILE_STATUS))
{
    console.error("Error compiling",gl.getShaderInfoLog(vertexShader));
}

gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

var program = gl.createProgram();
gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader);
gl.linkProgram(program);

if(!gl.getProgramParameter(program,gl.LINK_STATUS))
{
    console.error("Error linking program",gl.getProgramInfoLog(program));
    return;
}
gl.validateProgram(program);
  if(!gl.getProgramParameter(program,gl.LINK_STATUS))
{
    console.error("Error linking program",gl.getProgramInfoLog(program));
    return;
}

var triangleVertices = 
[
    0.0,0.5,
    0.5,0.5,
    0.5,-0.5
]

var triangleVertexBufferObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexBufferObject);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices),gl.STATIC_DRAW);

var positionAtribLocation = gl.getAttribLocation(program,'vertPosition');
gl.vertexAttribPointer(
 positionAtribLocation,
 2,
 gl.FLOAT,
 gl.FALSE,
 2 * Float32Array.BYTES_PER_ELEMENT,
 0
);

gl.enableVertexAttribArray(positionAtribLocation);

gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES,0,3);   


}

Answer 1

可以使用以下代码查询着色器的编译错误：

var error_log = gl.getShaderInfoLog(vertexShader);
console.log(error_log);

在您的情况下，您至少写了gl_position而不是gl_Position。

Answer 2

GLSL着色器需要以#version xxx为前缀才能编译。

为了安全起见，当我编写GLSL着色器时，我通常会这样写：

#version 400 core
layout(location = 0) in vec3 vertex;

void main() {
    gl_Position = vec4(vertex, 1);
}

如果我需要GL4.0中没有的功能

，我会更新号码

另外，正如另一个答案已经指出的那样，你写了gl_position而不是gl_Position

着色器没有编译

2 个答案: