极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<!-- 顶点着色器 -->
<script type='x-shader/x-vertex' id='shader-vs'>
attribute vec4 a_Position;
attribute vec2 a_TextCoord;
varying vec2 v_TexCoord;
void main(){
gl_Position=a_Position;
v_TexCoord = a_TextCoord;
}
</script>
<!-- 片段着色器 -->
<script type='x-shader/x-fragment' id='shader-fs'>
precision mediump float;
uniform sampler2D u_Sampler;
varying vec2 v_TexCoord;
void main(){
gl_FragColor=texture2D(u_Sampler,v_TexCoord);
}
</script>
</head>
<body>
<canvas id='webgl' width='400' height='400'>
</canvas>
</body>
<script>
var canvas = document.getElementById('webgl');
var gl = canvas.getContext('webgl');
// 2.清空屏幕
gl.clearColor(1,1, 1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// 3.初始化着色器
var vs_source = document.getElementById('shader-vs').innerHTML,
fs_source = document.getElementById('shader-fs').innerHTML;
// 创建顶点着色器对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
// 绑定资源
gl.shaderSource(vertexShader, vs_source);
// 编译着色器
gl.compileShader(vertexShader);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fs_source);
gl.compileShader(fragmentShader);
// 创建一个着色器程序
var glProgram = gl.createProgram();
// 把前面创建的二个着色器对象添加到着色器程序中
gl.attachShader(glProgram, vertexShader);
gl.attachShader(glProgram, fragmentShader);
// 把着色器程序链接成一个完整的程序
gl.linkProgram(glProgram);
// 使用这个完整的程序
gl.useProgram(glProgram);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
var tempData = new Float32Array([
0.0, 0.5, 10.0,
-0.5, -0.5, 20.0,
-0.5, 0.5,30.0
]);
gl.bufferData(gl.ARRAY_BUFFER,tempData,gl.STATIC_DRAW);
var FSIZE = tempData.BYTES_PER_ELEMENT;
//console.log(FSIZE);
var a_Position = gl.getAttribLocation(glProgram,'a_Position');
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,FSIZE*3,0);
gl.enableVertexAttribArray(a_Position);
var a_TextCoord = gl.getAttribLocation(glProgram,'a_TextCoord');
gl.vertexAttribPointer(a_TextCoord,2,gl.FLOAT,false,FSIZE*3,FSIZE*2);
gl.enableVertexAttribArray(a_TextCoord)
var texture = gl.createTexture();
var u_Sampler = gl.getUniformLocation(glProgram,'u_Sampler');
var image = new Image();
image.crossOrigin = "anonymous";
image.onload = function(){
loadText(gl,3,texture,u_Sampler,image);
}
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D";
function loadText(gl,n,texture,u_Sampler,image){
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D,texture);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);
gl.uniform1i(u_Sampler,0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE,0,3);
}
// gl.drawArrays(gl.TRIANGLES, 0, 3)
</script>
</html>错误信息：
[.WebGL-0x7f7fdf84f400]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0