WebGL着色器是什么？

2022-07-14 12:25:33

什么是着色器呢？先来看一个例子：

HelloPoint1.html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset="utf-8" />
    <title>Draw a point (1)</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
    Please use the browert supporting "canvas"
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>

<script src="HelloPoint1.js"></script>
</body>
</html>

HelloPoint1.js

// 顶点着色器程序
var VSHADER_SOURCE =
    ‘void main() {\n‘ +
    ‘ gl_Position = vec4(0.5, 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>元素
    var canvas = document.getElementById(‘webgl‘);

    // 获取WebGL绘图上下文
    var gl = getWebGLContext(canvas);

    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);
}

　　运行结果：

　　要用WebGL进行绘图就必须使用着色器，在代码中，着色器程序是以字符串形式“嵌入”在Javascript文件中的，在程序真正开始运行前它就已经设置好了。

　　顶点着色器(Vertex shader):顶点着色器是用来描述顶点特性(如位置、颜色等)的程序。顶点（vertex）是指二维或者三维空间中的一个点，比如二维或三维图形的端点或交点。

　　片元着色器(Fragment shader):进行逐片元处理过程，如光照等。片元(fragment)是一个WebGL术语，你可以将其理解为像素。

　　WebGL的执行流程：

　　程序执行的流程大概是：首先运行JavaScript程序，调用了WebGL的相关方法，然后顶点着色器和片元着色器就会执行，在颜色缓冲区内进行绘制，这是就清空了绘图区，最后颜色缓冲区中的内容会自动在浏览器的<canvas>上显示出来。

　　上面的示例是要在屏幕上绘制一个10像素大小的点，它用到了两个着色器：(1):顶点着色器指定了点的位置和尺寸，示例中点的位置是(0.0,0.0,0.0),尺寸是10.0像素，(2):片元着色器制定了点的颜色，示例中的颜色是红色(1.0,0.0,0.0,1.0)。

　　初始化着色器:

　　在初始化着色器之前，顶点着色器和片元着色器都是空白的，我们需要将字符串形式的着色器代码从JavaScript传给webGL系统，并建立着色器，着色器运行在WebGL系统中。

　　顶点着色器的内置变量：

　　片元着色器将点的颜色复制给gl_FragColor变量，该变量是片元着色器唯一内置变量，它控制像素在屏幕上的最终颜色，和顶点着色器中的顶点位置一样，颜色值也是vec4类型的，包括四个浮点型分量，分别代表RGBA值。

　　gl.drawArrays()是一个强大的函数，它可以用来绘制各种图形，该函数的规范如下：

WebGL着色器是什么？

码农公寓

相关文章