webgl 图元装配以及光栅化
2021-07-07 本文已影响0人
Viewwei
绘制一个彩色三角形,第一个顶点为红色,第二个顶点为红色,第三个顶点为蓝色
示例代码如下
<!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">
attribute vec4 a_Position;
attribute float a_PointSize;
attribute vec4 a_Color;
varying vec4 v_Color;
void main () {
gl_Position = a_Position;
gl_PointSize = a_PointSize;
v_Color = a_Color;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
// 全局设置浮点数的精确度,其他类型都有默认的精度类型,浮点数需要单独的设置
precision mediump float;
// uniform vec4 u_FragColor;
varying vec4 v_Color;
void main () {
gl_FragColor = v_Color;
}
</script>
<script src="./jsm/util.js"></script>
<script src="tool/cuon-matrix.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
const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
const a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize')
const a_Color = gl.getAttribLocation(gl.program, 'a_Color')
if (a_Position < 0) return
// debugger
let n = initVertexBuffers(gl,a_Position,a_PointSize,a_Color)
gl.clearColor(0.0, 0.0, 0.0, 1.0)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.TRIANGLES, 0, n)
}
function initVertexBuffers(gl, a_Position, a_PointSize,a_Color) {
var vertices = new Float32Array([
0.0, 0.5, 10.0, 1.0,0.0,0.0,
-0.5, -0.5, 20.0, 0.0,1.0,0.0,
0.5, 0.5, 30.0, 0.0,0.0,1.0
])
var n = 3
var buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
let fsize = vertices.BYTES_PER_ELEMENT;
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, fsize * 6, 0)
gl.enableVertexAttribArray(a_Position)
gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, fsize * 6, fsize * 2)
gl.enableVertexAttribArray(a_PointSize)
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, fsize * 6, fsize * 3)
gl.enableVertexAttribArray(a_Color)
return n
}
</script>
</html>
- 图形装配过程
将孤立的坐标装配成几何图形,几个图形的类型由 gl.drawArrays()函数的第一个参数决定 - 光栅化过程
将装配好的几何图形转化为片元(像素)
结合上述代码理解下图形装配过程以及关栅化过程
- 执行顶点着色器,在缓冲区对象的第一个顶点坐标被传递给attribute 变量 a_Position, 一旦一个顶点的坐标赋值个 a_Position,它就进入了图形装配区域
- 再次指定顶点着色器和上面一步相似
- 在次指定顶点着色器,将第三个坐标传入装配区,现在顶点着色器指定完毕,3 个顶点已经在装配区了
- 开始装配图形,使用传入的坐标.网元装配完成
- 装配好了之后将装配好的网元转化成片元,完成光栅化过程.
- 光栅化过程结束后,程序就开始逐片元调用片元着色器,对于每个片元,片元着色器计算出该片元的最终颜色,并写入到颜色缓冲区,全部片元执行完毕,浏览器才会显示最终的结果
gl_FragCoord
片元着色器中存在内置变量 gl_FragCoord, 标识在指定片元着色器的时候,当前片元在 canvas 上面的位置
varying 变量的作用和内插过程
varying 变量变量发现在顶点着色器执行完毕之后,顶点着色器的 varying 变量会直接内嵌到片元着色器中.
