Question

Chrome中的Javascript控制台说getAttribLocation-＆gt;无效的程序未链接，使用program-＆gt;程序无效且drawArrays-＆gt;程序无效。在我看来，我创建了程序，附加着色器，链接所有并告诉webgl使用它但没有显示。这是代码

<!DOCTYPE HTML>
<html>

<canvas id = "can" width="400" height="400">

</canvas>


<script>
var webgl_canvas = document.getElementById('can');
var gl = webgl_canvas.getContext('experimental-webgl');

var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,0,1]), gl.STATIC_DRAW); 

vertexBuffer.itemSize = 2;
vertexBuffer.numItems = 3;





var vertexShader_source = 'attribute vec2 a_position;' + 'void main() { gl_position = vec4 (a_position, 0,1); }';
var fragmentShader_source = 'precision = mediump float;' + 'void main() { gl_FragColor = vec4 (0.9,0,0.1,1); }';









//Compile shaders
var buildShader = function (shaderSource, typeOfShader) {
var shader = gl.createShader(typeOfShader);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
return shader;
}

var compiledVertexShader = buildShader (vertexShader_source, gl.VERTEX_SHADER);
var compiledFragmentShader = buildShader (fragmentShader_source, gl.FRAGMENT_SHADER);

//setup GLSL program
var program = gl.createProgram();
gl.attachShader(program,compiledVertexShader);
gl.attachShader(program,compiledFragmentShader);
gl.linkProgram(program);


//Draw

var positionLocation = gl.getAttribLocation(program,"a_position");
gl.enableVertexAttribArray(positionLocation);
gl.useProgram(program);
gl.vertexAttribPointer(positionLocation, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays (gl.TRIANGLES, 0, vertexBuffer.numItems);
</script>

</html>

WebGL中的简单三角形

0 个答案: