WebGL 代码不工作

Question

我是 WebGL 新手。我正在尝试使用 WebGL 绘制一个三角形。但是我的程序在控制台中没有显示任何内容 window 我收到以下警告：

WebGL: INVALID_OPERATION: useProgram: program not valid
(index):96 WebGL: INVALID_OPERATION: getAttribLocation: program not linked
(index):107 WebGL: INVALID_OPERATION: drawArrays: no valid shader program in use

这是我的代码：

var gl;
var canvas=document.getElementById("painter");

//Step 1 Create gl Context using experimental-webgl at this stage

try
{
    gl=canvas.getContext("experimental-webgl");
}catch(e)
{
    alert("WebGL not Supported");
}

// Step 2 Creating the vertex shader. Pass the attribute vec4 from application

var shader_vertex_source="\n\
attribute vec4  vPosition; \n\
void main(vaoid) \n\
{\n\
gl_Position=vPosition;\n\
}";

//Step 3: Create Fragment Shader. Must pass precision variable from application. Normally specify medium precision as it should be //supported by all devices

var shader_fragment_source="\n\
precision mediump float;\n\
void main(void)\n\
{\n\
gl_FragColor=vec4(1.0,0.0,0.0,1.0);\n\
}";

// Step 4: Configure view of WebGL
gl.viewport(0,0,canvas.width,canvas.height);
gl.clearColor(1.0,1.0,1.0,1.0);

// Step 5: Create Vertices of Triangle. Each pair represent a point (-1,-1), (0,1), (1,-1) will be three vertices of triangle
var vertice=new Float32Array([-1,-1,0,1,1,-1]);
// Step 6: Compile the shaders.
var get_shader=function(shadersource,shadertype)
{
    var shader=gl.createShader(shadertype);
    gl.shaderSource(shader,shadersource);
    gl.compileShader(shader);
    return shader;
}

// Now using the above function get compiled vertex and fragment shaders. The following two varibales are compiled shaders
var vertex_shader=get_shader(shader_vertex_source,gl.VERTEX_SHADER);
var fragment_shader=get_shader(shader_fragment_source,gl.FRAGMENT_SHADER);

// Step 7: Create a Program
var program=gl.createProgram();

// Step 8 : attach the shaders to the program
gl.attachShader(program,vertex_shader);
gl.attachShader(program,fragment_shader);

// Step 9: Link the program with gl context
gl.linkProgram(program);

// Step 10: Tell the gl Context to use the linked program
gl.useProgram(program);

// Step 11: Create Buffer to GPU. Neede for GPU

var buffer=gl.createBuffer();

// Step 12: Bind the created buffer to the gl Context
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);

// Step 13: Now send the data to GPU through the buffer. We are going to sent vertice data and drawing info
gl.bufferData(gl.ARRAY_BUFFER,vertice,gl.STATIC_DRAW);

// Step 14: get the position location attirbute from the program using attribute name
var position=gl.getAttribLocation(program,"vPosition");// Our position attribute name is vPosition

// Step 14: Enable the position variable. As it will be used to draw vertices of triangle
gl.enableVertexAttribArray(position);

// Step 15: Tell to use position that gets data from GPU to draw triangle. 2 here mean use two points from the array at a time to //make a vertex
gl.vertexAttribPointer(position,2,gl.FLOAT,false,0,0);

// Step 16 Render using draw methods

gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES,0,3);

我也附上 jsfiddle Link 以获得更好的帮助。

Answer 1

我试过你的代码，但我编辑了你的函数 get_shader，并进行了编译错误检查：

var get_shader=function(shadersource,shadertype)
{
    var shader=gl.createShader(shadertype);
    gl.shaderSource(shader,shadersource);
    gl.compileShader(shader);

    // Check for any compilation error
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }

    return shader;
}

我收到以下错误：

ERROR: 0:3: 'vaoid' : syntax error

它来自您的顶点着色器：

var shader_vertex_source="\n\
attribute vec4  vPosition; \n\
void main(vaoid) \n\ // RIGHT HERE !
{\n\
gl_Position=vPosition;\n\
}";

所以最终只是打字错误。

WebGL 代码不工作

WebGL code not working

webgl