Javascript WebGL中的简单三角形_Javascript_Webgl

Javascript WebGL中的简单三角形

javascript webgl

Javascript WebGL中的简单三角形,javascript,webgl,Javascript,Webgl,Chrome中的Javascript控制台显示GetAttriblLocation->not valid program not linked，use program->program not valid和drawArrays->program not valid。在我看来，我已经创建了程序，附加了着色器，链接了所有内容，并告诉webgl使用它，但没有显示任何内容。这是密码 <!DOCTYPE HTML> <html> <canvas id = "can" w

Chrome中的Javascript控制台显示GetAttriblLocation->not valid program not linked，use program->program not valid和drawArrays->program not valid。在我看来，我已经创建了程序，附加了着色器，链接了所有内容，并告诉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>


var webgl_canvas=document.getElementById（'can'）；
var gl=webgl_canvas.getContext（'experimental-webgl'）；
var vertexBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，vertexBuffer）；
gl.bufferData（gl.ARRAY_BUFFER，新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）；}'；
//编译着色器
var buildShader=函数（shaderSource，typeOfShader）{
var shader=gl.createShader（typeOfShader）；
gl.shaderSource（着色器，shaderSource）；
gl.compileShader（着色器）；
返回着色器；
}
var compiledVertexShader=buildShader（vertexShader\u源，gl.VERTEX\u着色器）；
var compiledFragmentShader=buildShader（fragmentShader\u源，gl.FRAGMENT\u着色器）；
//安装GLSL程序
var program=gl.createProgram（）；
gl.attachShader（程序，编译的VertexShader）；
gl.attachShader（程序，编译碎片着色器）；
总账链接程序（程序）；
//画
var positionLocation=gl.GetAttriblLocation（程序，“a_位置”）；
gl.EnableVertexAttributeArray（位置位置）；
gl.useProgram（程序）；
gl.VertexAttribute指针（位置位置，vertexBuffer.itemSize，gl.FLOAT，false，0，0）；
gl.DrawArray（gl.TRIANGLES，0，vertexBuffer.numItems）；

精度=中间泵浮动应为<代码>精度中间泵浮动就是那个和gl_位置，拼写为gl_位置。gl.getShaderInfoLog也有帮助。谢谢