跟OGL一样 需要先有VBO 再用vertexAttribute传定点属性 然后draw
这个是一个基本例子 包含创建使用VBO EBO 创建使用shaderProgram
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#canvas {
margin: 0;
display: block;
}
</style>
</head>
<body onload="main()">
<canvas id="canvas" height="800" width="800"></canvas>
</body>
<script src="lib/webgl-utils.js"></script>
<script src="lib/webgl-debug.js"></script>
<script src="lib/cuon-utils.js"></script>
<script src="lib/cuon-matrix.js"></script>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 a_pos;
attribute vec3 a_color;
varying vec4 mycolor;
void main()
{
mycolor=vec4(a_color,1.0);
gl_Position=a_pos;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif
varying vec4 mycolor;
void main()
{
gl_FragColor=mycolor;
}
</script>
<script id="fragment-shader2" type="x-shader/x-fragment">
void main()
{
gl_FragColor=vec4(0.0,0.0,0.0,1.0);
}
</script>
<script>
function main()
{
var vertices =new Float32Array([0.0,0.0,1.0,-0.5,1.0,1.0]);
var vertices2 =new Float32Array([-1.0,-0.0,1.0,-0.5,-1.0,-1.0]);
var colors=new Float32Array([0.0,0.5,0.0,5.0,0.0,3.0,0.3,0.0,1.0]);
var indices=new Uint8Array([0,1,2]);
var cvs=document.getElementById("canvas");
cvs.width=window.innerWidth;
cvs.height=window.innerHeight;
var gl=getWebGLContext(cvs);
if(gl)
{
//before draw
gl.clearColor(1.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);//, |gl.DEPTH_BUFFER_BIT
}
//use drawElements
var program=createProgram(gl,document.getElementById("vertex-shader").innerHTML,document.getElementById("fragment-shader").innerHTML);
if(!program)
{
console.log("err shader");
return;
}
var vbo=gl.createBuffer();
if(!vbo)
{
console.log("err vbo");
}
gl.bindBuffer(gl.ARRAY_BUFFER,vbo);
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
var ebo=gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,ebo);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);
if(!ebo)
{
console.log("err ebo");
}
program.a_pos=gl.getAttribLocation(program,"a_pos");//getUniformLocation
program.a_color=gl.getAttribLocation(program,"a_color");
gl.vertexAttribPointer(program.a_pos, 2, gl.FLOAT, false, 0, 0);//3个float
gl.enableVertexAttribArray(program.a_pos);
var colorBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,colors,gl.STATIC_DRAW);
gl.vertexAttribPointer(program.a_color, 3, gl.FLOAT, false, 0, 0);//color
gl.enableVertexAttribArray(program.a_color);
gl.useProgram(program);
gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_BYTE, 0);//3个vertex
//use drawArray
var vbo2=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vbo2);
gl.bufferData(gl.ARRAY_BUFFER,vertices2,gl.STATIC_DRAW);
var p2=createProgram(gl,document.getElementById("vertex-shader").innerHTML,document.getElementById("fragment-shader2").innerHTML);
p2.a_pos=gl.getAttribLocation(p2,"a_pos");//getUniformLocation
gl.vertexAttribPointer(p2.a_pos, 2, gl.FLOAT, false, 0, 0);//3个float
gl.enableVertexAttribArray(p2.a_pos);
// gl.clearColor(1.0,0.0,0.0,1.0);
// gl.clear(gl.COLOR_BUFFER_BIT);//, |gl.DEPTH_BUFFER_BIT
gl.useProgram(p2);
gl.drawArrays(gl.TRIANGLES,0,3);
window.onresize=function(){
cvs.width=window.innerWidth;
cvs.height=window.innerHeight;
}
}
</script>
</html>
