WebGL方法及属性(持续更新)

时间:2022-05-28 04:09:17
HTML的代码
1
<body> 2 <canvas id="canvas"></canvas> 3 </body>
获取WebGL对象,及gl
1
var canvas = document.getElementById("canvas"); 2 canvas.width = 500; 3 canvas.height = 300; 4 var gl = canvas.getContext('webgl') || canvas.getContext("experimental-webgl");
gl方法
gl.clearColor(R, G, B, A);//参数说明(参数为RGBA值,A最小为0,最大为1),方法说明(此方法清理屏幕并填充相对应的颜色)
gl.clear(gl.COLOR_BUFFER_BIT);//参数说明(缓冲类型),方法说明(此方法清理屏幕并填充之前的缓冲区)
gl.clearDepth(1.0);//参数说明(深度),方法说明(此方法清理当前屏幕的深度)
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);//参数说明(缓冲类型,缓冲对象)
gl.shaderSource(shader, scriptElement.text);//参数说明(空变量,标签中的代码),方法说明(将标签中的代码分配给生成的着色器)
gl.compileShader(shader);//参数说明(分配后的着色器对象),方法说明(编译着色器)
gl.getShaderParameter(shader, gl.COMPILE_STATUS)//参数说明(编译后的着色器,常量),方法说明(判断一下着色器是否编译成功)
gl.getShaderInfoLog(shader)//参数说明(编译后的着色器),方法说明(编译失败返回错误信息)
gl.getAttribLocation(prg, 'position');//参数说明(程序对象,想要获取的attribute变量的变量名)返回值是数值型,就是向顶点着色器传递数据时的序号
gl.createProgram();//生成程序对象
gl.attachShader(program, vs);//参数说明(程序对象,着色器),方法说明(向程序对象分配着色器,可以有多个着色器)
gl.linkProgram(program);//参数说明(程序对象),方法说明(将程序对象中的所有着色器连接起来)
gl.getProgramParameter(program, gl.LINK_STATUS)//参数说明(程序对象,常量),方法说明(判断着色器是否连接成功)
gl.getProgramInfoLog(program)//参数说明(程序对象),方法说明(如果着色器连接失败,返回错误信息)
gl.useProgram(program);//参数说明(程序对象),方法说明(如果着色器连接成功,将程序对象设置为有效)
gl.createBuffer();//方法说明(生成缓冲对象)
gl.flush();//刷新gl
gl参数
gl.COLOR_BUFFER_BIT//清空颜色常量
gl.DEPTH_BUFFER_BIT//清空深度常量
gl.ARRAY_BUFFER//写入缓存类型常量