1.坐标系
2.渲染管线
顶点缓冲区：物品位置信息，形状坐标信息
图片装配：拼凑图形
光栅化：变成像素
片源着色器：像素着色
3.重点名称
顶点着色器
图元转配
光栅化
片元着色器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>坐标点</title>
<script>
window.onload = function () {
// 入口函数
var webgl
// 投影矩阵
var project
// 顶点着色器
var topShader=`
attribute vec4 a_position;
void main() {
gl_Position = a_position;
gl_PointSize=10.0
}`
// 片元着色器
var fragment=`
void main() { +
//设置颜色
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); +
}`
// function init(){
initWebgl()
initShader()
initBuffers()
draw()
// }
// webgl初始化
function initWebgl(){
let webglDiv=document.getElementById('canvas')
gl =webglDiv.getContext('webgl')
// // webgl视觉区域
// // (原点，可视宽。可视高)
// gl.viewport(0.0,webglDiv.clientWidth,webglDiv.clientHeight)
// // 投影坐标系
// gl.ortho(0,webglDiv.clientWidth,webglDiv.clientHeight,0,-1,1,project)
}
// Shader初始化
function initShader(){
// createShader：创建着色器对象，参数是着色器类型，标记一个着色器程序会被GPU渲染管线上哪一个着色器执行，
// shaderSource：绑定源。把字符串形式的顶点着色器代码、片元着色器代码分配给各自的着色器对象。
// compileShader：编译着色器程序。参数指定着色器程序源码。
// creatProgram：创建程序对象。程序对象的意义是为了实现CPU和GPU的通信，控制GPU着色器的工作状态，切换不同的着色器程序。
// attachShader：绑定着色器对象到一个程序对象上，每个程序对象就关联了一组顶点着色器程序、片元着色器程序。第一个参数表示目标程序对象，第二个参数表示要绑定的着色器对象。
// linkProgram：在执行useprogram方法之前，要先链接程序对象program的顶点和片元着色器程序，检查着色器程序的错误（检查顶点、片元着色器程序中同名varying变量是否一一对应；检查顶点着色器程序中是否给varying变量赋值顶点数据；硬件资源有限，要检测attribute\uniform\varying变量的数量是否超出限制范围）。通过链接测试后，才能通过useprogram方法把着色器程序传递给GPU，否则报错。
// useProgram：同一时刻GPU只能配置一组顶点、片元着色器程序。当你定义了多个程序对象，分别关联了一组顶点、片元着色器程序，不会同时传递给GPU。在代码中uswProgram的特点是当再次调用方法useProgram，使用新的program程序对象作为新的参数，再次执行绘制函数的时候CPU会与GPU进行通信，给GPU传入新程序对象program对应的顶点、片元着色器程序，这时候就实现了GPU着色器程序的切换，每次切换都会耗费一定的硬件资源，可以简单的类比CPU线程的切换。一般复杂的场景都会编写多套着色器程序，放在文件中，供WebGL程序调用。
//编译着色器
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, topShader);
gl.compileShader(vertShader);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragment);
gl.compileShader(fragShader);
// 创建一个glsl program，在gpu上运行
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
}
// 数据缓冲区初始化
function initBuffers() {
var shaderProgram = gl.createProgram();
var vertices = new Float32Array([
0.0, 0.5, -0.5, -0.5, 0.5, -0.5
]);
var vertexBuffer = gl.createBuffer();
if(!vertexBuffer){
console.log("Failed to create the butter object");
return -1;
}
//将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
//向缓冲区写入数据
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
//获取坐标点
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');
//将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
//连接a_Position变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Position);
}
// 绘制函数
function draw(){
// 清除指定<画布>的颜色
gl.clearColor(0.0, 0.0, 0.0, 0.5);
// 清空 <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 1);
}
}
</script>
</head>
<body >
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
