复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绘制点坐标</title>
<script src="./glMatrix-0.9.6.min.js"></script>
<script>
var webgl;
var projMat4;
var projMat4 = mat4.create()
// 顶点着色器
var vertexString = `
attribute vec4 a_posiiton;
uniform mat4 proj;
void main(){
gl_Position=proj*a_posiiton;
}
`
// 片元着色器
var fragmentString = `
void main(){
gl_FragColor=vec4(1.0,0,1.0,1.0);
}
`
// 入口函数
function init() {
initWebgl()
initShader()
initBuffer()
draw()
}
// webgl初始化函数
function initWebgl() {
let webglDiv = document.getElementById("webglCanvas")
// 获取webgl的上下文
webgl = webglDiv.getContext("webgl")
// 设置webgl的视觉区域
webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight)
// 设置webgl的投影
mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)
}
// shader初始化函数
function initShader() {
let vsshader = webgl.createShader(webgl.VERTEX_SHADER)
let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER)
webgl.shaderSource(vsshader, vertexString)
webgl.shaderSource(fsshader, fragmentString)
// 将shader编译进行打包
webgl.compileShader(vsshader)
webgl.compileShader(fsshader)
let program = webgl.createProgram()
webgl.attachShader(program, vsshader)
webgl.attachShader(program, fsshader)
webgl.linkProgram(program)
webgl.useProgram(program)
webgl.program = program
}
// 数据缓冲区初始化函数
function initBuffer() {
let aPosition = webgl.getAttribLocation(webgl.program, "a_posiiton")
let arrindex=[
0,1,2,
0,3,4,
]
let arr = [
100.0, 100.0, 0, 1.0,
200.0, 200.0, 0, 1.0,
300.0, 200.0, 0, 1.0,
400.0, 600.0, 0, 1.0,
500.0, 700.0, 0, 1.0
]
let pointPosition = new Float32Array(arr)
let lineBuffer = webgl.createBuffer()
webgl.bindBuffer(webgl.ARRAY_BUFFER, lineBuffer)
webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW)
webgl.enableVertexAttribArray(aPosition)
//把值赋给shader
webgl.vertexAttribPointer(aPosition, 4, webgl.FLOAT, false, 4 * 4, 0 * 4)
let indexArr=new Uint16Array(arrindex);
let indexBuffer=webgl.createBuffer();
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER,indexBuffer)
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER,indexArr, webgl.STATIC_DRAW)
// webgl.vertexAttrib4fv(aPosition, pointPosition)
let uniformproj = webgl.getUniformLocation(webgl.program, "proj")
webgl.uniformMatrix4fv(uniformproj, false, projMat4)
}
// webgl的绘制函数
function draw() {
webgl.clearColor(0.0, 0.0, 0.0, 1.0)
// 颜色检测
webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT)
webgl.drawElements(webgl.TRIANGLES,6, webgl.UNSIGNED_SHORT,0)
}
</script>
</head>
<body onload="init()">
<canvas id="webglCanvas" width="1000" height="800"></canvas>
</body>
</html>
