初识绘图流程、缓冲区、着色器、attribute和uniform变量
先画一个蓝色的正方形
html代码：
<!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>Document</title>
</head>
<body onload="main()"> //指定 onload 属性，告诉浏览器<body>元素加载完从何处开始执行
<canvas id="example" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="./js/DrawRectangle.js"></script>
</body>
</html>
JS代码：
// DrawRectangle.js
function main() {
// 获取<canvas>元素
let canvas = document.getElementById('example')
if (!canvas) {
console.log('Failed to retrieve the <canvas> element')
return
}
// 获取绘制二维图形的绘图上下文
let ctx = canvas.getContext('2d')
// 绘制蓝色矩形
ctx.fillStyle = 'rgba(0,0,255,1.0)'
ctx.fillRect(120, 10, 150, 150)
}
HTML5引入<canvas>标签，允许JavaScript动态的绘制图形
<body οnlοad="main()"> //指定 onload 属性，告诉浏览器<body>元素加载完从何处开始执行，作为JavaScript程序的入口
绘制蓝色矩形的js程序的，为了在<canvas>上绘制二维图形，需要经过三个步骤：
- 获取<canvas>元素
- 向该元素请求二维图形的“绘制上下文”
- 在绘图上下文上调用相应的绘图函数，绘制二维图形
ctx对象的fillRect方法，方法的语法为 context.fillRect(x,y,width,height),x，y为矩形左上角的坐标，剩下两个是宽度和高度
canvas 中的坐标和 OpenGL 一致
清空绘图区示例与背景色设置(初识多缓冲区模型与颜色缓冲区)
效果：
代码：
<!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,inital-scale=1.0"/>
<title>Document</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
</canvas>
<script src="HelloCanvas.js"></script>
</body>
</html>// HelloCanvas.js
function main() {
// 获取<canvas>元素
let canvas = document.getElementById('webgl')
// 获取WebGL绘图上下文
// let gl = getWebGLContext(canvas) (书中的函数)
let gl = canvas.getContext('webgl')
if (!gl) {
console.log('Failed to get the rendering context for WebGL')
return
}
// 指定清空<canvas>的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0) // 黑色
// 清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT)
}
因为没找到书中的函数库，所以参考了别人的代码
示例程序中 main 函数的执行流：
设置 canvas 背景色
- 一旦指定背景色后，背景色会贮存在WebGL系统中，在下次调用
gl.clearColor()方法之前不会改变。所以，如果未来还需要再次清空绘图区，没必要再指定一次颜色。 - 这是挂载在
WebGLRenderingContext对象上的方法。
gl.clear(buffer)
清空颜色缓冲区将导致 WebGL 清空页面上的 <canvas> 区域
WebGL中的gl.clear()方法继承自OpenGL，基于多基本缓冲区模型。
绘制一个点 与 静态着色器
相关内容：着色器初识、使用着色器的WebGL程序结构、初始化着色器、顶点着色器及内置变量、片元着色器及内置变量、齐次坐标、WebGL坐标系统、JavaScript程序和着色器程序的协同运行机制
相关函数：initShaders(), vec4(), gl.drawArrays()
示例程序将在原点(0.0, 0.0, 0.0)处的10个像素大的红色的点。
因为WebGL处理的是三维图形，所以我们有必要为这个点指定三维坐标。
<!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>Draw a point (1)</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use the browser supporting "canvas"
</canvas>
<script src="../libs/webgl-utils.js"></script>
<script src="../libs/webgl-debug.js"></script>
<script src="../libs/cuon-utils.js"></script>
<script src="HelloPoint1.js"></script>
</body>
</html>
// HelloPoint1.js
// 顶点着色器程序
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // 设置坐标
' gl_PointSize = 10.0;\n' + // 设置尺寸
'}\n'
// 片元着色器程序
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // 设置颜色
'}\n'
// 主程序
function main() {
// 获取<canvas>元素
let canvas = document.getElementById('webgl')
// 获取WebGL绘图上下文
// let gl = getWebGLContext(canvas)
let gl = canvas.getContext('webgl')
if (!gl) {
console.log('Failed to get the rendering context for WebGL')
return
}
// 初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to initialize shaders')
return
}
// 设置<canvas>背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0)
// 清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT)
// 绘制一个点
gl.drawArrays(gl.POINTS, 0, 1)
}
着色器程序以字符串的形式嵌入在 JavaScript 文件中，在程序真正开始运行前它就已经设置好了
WebGL中有两种着色器：
- 顶点着色器(Vertex shader)：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。顶点（vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。
- 片元着色器(Fragment shader)：进行逐片元处理过程如光照的程序。片元（fragment）是一个WebGL术语，你可以将其理解为像素（图像的单元）。
参考：【《WebGL编程指南》读书笔记-WebGL入门】_getwebglcontext-CSDN博客
