webgl是基于 canvas 进行绘制,通过 getWebGLContext()来获取 webgl 的绘图上下文,使用 gl.clearColor()函数来设置 canvas 的背景色.例如设置红色
gl.clearColor(1.0,0,0,1.0)
可以使用 gl.clear()函数,用之前指定的背景色清空(即用背景色填充,擦除已经绘制的内容)绘制区域
gl.clear(buffer)
参数说明:
buffer:
gl.COLOR_BUFFER_BIT 指定颜色缓存
gl.DEPTH_BUFFER_BIT 指定深度缓存
gl.STENCIL_BUFFER_BIT 指定模板缓冲区
webgl对应图形的绘制离不开着色器.在代码中着色器是以字符串的形式嵌入到 JavaScript 代码中的,在程序真正开始运行之前就已经设置好了.
webgl 着色器
webgl 中着色器有两种:顶点着色器和片元着色器
顶点着色器:顶点着色器是用来描述顶点的特性的(如 位置,颜色等)的程序.顶点是指二维或者三维空间中的某个点.
片元着色器:进行逐片元处理过程如关照的程序.片元是 webgl 的一个术语.可以理解为像素
JavaScript 读取着色器的相关信息,然后存储在 wengl 系统以供调用.简单流程:从执行 JavaScript,到在 webgl 系统中使用着色器在浏览器上绘制图形
初始化着色器
在使用着色器的时候,首先需要先初始化着色器.初始化着色器一般分为 7 个步骤
- 创建着色器对象(gl.createShader())
- 向着色器对象中填充着色器程序的源代码(gl.shaderSource())
- 编译着色器(gl.compileShader())
- 创建程序对象(gl.createProgram)
- 为程序对象分配着色器(gl.attachShader)
- 链接程序对象(gl.linkProgram)
- 使用程序对象(gl.useProgram)
顶点着色器
顶点着色器设置顶点的位置和大小.着色器的语言使用的是 GLSL ES 语言.GLSL ES 语法后续在学习.一个简单的顶点着色器如下:
void main () {
gl_Position = vec4(0.0,0.0,0.0,1);
gl_PointSize = 20.0;
}
顶点着色器中包含内置的变量
vec4 gl_Position 表示顶点的位置
float gl_PointSize: 表示点的尺寸
GLSL ES 语言
GLSL ES语言是一种强类型的语言,也就说开发者必须明确指出某个变量的类型 GLSL ES 语言中数据类型 float 表示浮点数,vec4 表示由 4 个浮点数组成的矢量.4 个分量组成的矢量称为齐次坐标.齐次坐标的第 4 个分量必须大0.齐次坐标表示(x,y,z,w)等价三维坐标(x/w,y/w,z/w),如果 w等于 1,他就可以当做三维坐标使用.w 的值必须大于 0,如果 w 趋近 0,那么表示点趋近无穷大.
片元着色器
片元着色器显示屏幕上的一个像素(严格意义上来说,片元包括这个像素的位置,颜色和其他信息).片元着色器的作用就是处理片元,使其在显示在屏幕上,它和顶点着色器一样,都是从 main()函数开始执行.
片元着色器的内置函数
vec4 gl_FragColor 指定片元的颜色(RGBA 格式)
绘制操作
建立着色器之后,需要进行绘制操作,绘制函数是 gl.drawArrays()
gl.drawArrays(mode,first,count)
model:指定绘制的方式,可接受一下常量符号
gl.LINES:表示线段,
gl.LINE_STRIP 表示线条
gl.LINE_LOOP表示闭合线条,
gl.TRIANGLES表示独立三角形,
gl.TRIANGLE_STRIP 环尧三角形,
gl.TRIANGLE_FAN 三角扇
first:表示从哪个顶点开始绘制
count:表示绘制顶点数量
程序调用 drawArrays 时,顶点着色器将被执行 count 次,当顶点着色器执行完毕之后开始执行片元着色器,调用片元的 main 函数,将颜色值赋值给 gl_FragColor.
webgl 坐标系统
由于 webgl处理的是三维图形,使用三维坐标系,具有 x,y,z轴.x 轴是水平向右代表正方向,y 轴是垂直(正方向向下),z轴垂直屏幕.这套坐标也称为右手坐标系.
实例如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400"></canvas>
</body>
<script id="vertextShader" type="x-shader/x-vertex">
void main () {
gl_Position = vec4(0.0,0.0,0.0,1);
gl_PointSize = 20.0;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
void main () {
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
</script>
<script src="./jsm/util.js"></script>
<script>
function main () {
const canvas = document.getElementById('webgl')
const gl = canvas.getContext('webgl')
const vertextShader = document.getElementById('vertextShader').innerText
const fragmentShader = document.getElementById('fragmentShader').innerText
if (!initShaders(gl,vertextShader,fragmentShader)) return
if (!gl) return
gl.clearColor(0.0,0.0,0.0,1.0)
// 清空颜色缓存
// gl.DEPTH_BUFFER_BIT 清空深度缓存
// STENCIL_BUFFER_BIT 清空模板缓存
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.POINTS,0,1)
}
</script>
</html>
初始化 着色器代码如下
function initShaders (gl,vsShader,fShader) {
const program = gl.createProgram();
const vertextShader = loaderShader(gl,gl.VERTEX_SHADER,vsShader)
const fragmentShader = loaderShader(gl,gl.FRAGMENT_SHADER,fShader)
gl.attachShader(program,vertextShader)
gl.attachShader(program,fragmentShader)
// 链接 webgl 上下文和程序对象
gl.linkProgram(program)
gl.useProgram(program)
gl.program = program
return true
}
// 加载着色器
function loaderShader (gl,type,source) {
const shader = gl.createShader(type)
gl.shaderSource(shader,source)
// 编译着色器
gl.compileShader(shader)
return shader
}
