《WebGL编程指南》学习笔记1——WebGL概述
2021-01-27 本文已影响0人
小鸟游露露
本系列仅作为本人学习《WebGL编程指南》这本书的笔记所用
clipboard.png
GLSL ES（着色器代码）是以字符串形式在js中编写
WebGL程序是使用三种语言开发：HTML、JaveScript、GLSL ES。
绘制一个点——版本1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01描绘一个点1</title>
<script src="./lib/cuon-matrix.js"></script>
<script src="./lib/cuon-utils.js"></script>
<script src="./lib/webgl-debug.js"></script>
<script src="./lib/webgl-utils.js"></script>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
不支持canvas的浏览器会展示这段文字
</canvas>
<script>
// 顶点着色器程序
let VSHADER_SOURCE =
`
void main() {
gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // 设置坐标
gl_PointSize = 10.0; // 设置尺寸
}
`;
// 片元着色器程序
let FSHADER_SOURCE =
`
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// 主程序
function main() {
let canvas = document.getElementById('webgl');
// 获取WebGL绘图上下文
let gl = getWebGLContext(canvas);
if(!gl) {
console.error('无法使用WebGL');
return;
}
// 初始化着色器
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.error('无法使用着色器');
}
// 设置<canvas>的背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
}
// 片元着色器程序
</script>
</body>
</html>
截图.png
截图2.png
顶点着色器：用来描述顶点特性（位置、颜色等）的程序 （顶点-》二维或三维图形的端点或交点）
指定了点的位置和尺寸。
片元着色器：进行逐片处理过程如光照等的程序。（片元-》像素，图像测单元）
指定了点的颜色。
WebGL程序的结构分析
1.WebGL程序包括运行在浏览器中的JavaScript 程序和运行在WebGL 系统的着色器程序这两部分。
2.WebGL程序的基本结构：1.顶点着色器程序。 2.片元着色器程序。 3.主程序。
3.初始化着色器部分
截图3.png
大部分WebGL程序都遵循这样的流程
截图4.png
截图5.png
绘制一个点 —— 版本2
之后的程序都会以此为基准
顶点位置从js程序中传入着色器程序
点的位置和尺寸传入顶点着色器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02描绘一个点2</title>
<script src="./lib/cuon-matrix.js"></script>
<script src="./lib/cuon-utils.js"></script>
<script src="./lib/webgl-debug.js"></script>
<script src="./lib/webgl-utils.js"></script>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
不支持canvas的浏览器会展示这段文字
</canvas>
<script>
// 顶点着色器程序==============
let VSHADER_SOURCE =
`
attribute vec4 a_Position;
attribute float a_PoinSize;
void main() {
gl_Position = a_Position; // 设置坐标
gl_PointSize = a_PoinSize; // 设置尺寸
}
`;
// 片元着色器程序
let FSHADER_SOURCE =
`
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// 主程序
function main() {
let canvas = document.getElementById('webgl');
// 获取WebGL绘图上下文
let gl = getWebGLContext(canvas);
if(!gl) {
console.error('无法使用WebGL');
return;
}
// 初始化着色器
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.error('无法使用着色器');
}
// 获取attribute 变量的存储位置=======================
let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('无法获取 a_Position')
return;
}
let a_PoinSize = gl.getAttribLocation(gl.program, 'a_PoinSize');
// 将顶点位置传输给attribute 变量=======================
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
gl.vertexAttrib1f(a_PoinSize, 18.0);
// 设置<canvas> 背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清除<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
}
</script>
</body>
</html>
