【WebGL】绘制一个点

发表于2018-05-03
评论0 407浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594
在之前的学习中,我们知道了怎么样使用一些简单的WebGL相关函数,现在更进一步来绘制最简单的图形:一个点。

绘制一个点远不是调用一个”draw point”

在之前的学习中,比如填充颜色可以用到
ctx.fillStyle = "rgba(0, 255, 255, 1.0)";
但是,是否绘制一个点也这么简单呢?比如调用一个drawPoint方法就行了。答案是否定的!

WebGL依赖于一种称为着色器(shader)的绘图机制。着色器提供了大量的二维或三维图形的方法,所有WebGL程序必须使用它。着色器不仅强大而且更复杂,所以仅仅通过一条简单的绘图命令是不能操作它的。

所以着色器是WebGL中一个非常重要的核心机制,我们将在之后的学习中一直伴随着循序渐进的学习它。

构建HelloPoint_1工程

首先,构建HelloPoint_1.html文件,这个文件很简单,和之前的几乎一样。直接列出代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Point 1</title>
</head>
<body onload = "main()">
    <canvas id = "webgl" width = "400" height = "400">
        please use the browser 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 = "HelloPoint_1.js"></script>
</body>
</html>

然后,创建HelloPoint_1.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, 1);\n'+
    '}\n';
function main(){
    var canvas = document.getElementById("webgl");
    var gl = getWebGLContext(canvas);
    if(!gl){
        return;
    }
    if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
        console.log("failed to init shaders");
        return;
    }
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, 1);
}

可以看到,这里的js文件中的内容和我们之前创建的就存在了较大区别。从代码段的第1行到第10行多了一些我们暂时还不知道是啥的东西。接下来我们就看下这10行代码中的到底是什么神奇的东西。

着色器是什么?

HelloPoint_1.js是我们使用着色器的第一个WebGL程序。
可以看到,1~10行的着色器程序是以字符串的形式嵌入在js文件中的。在程序开始前就已经设置好了。

WebGL需要两种着色器,见第1行和第7行,分别对应如下:
  • 顶点着色器(Vertex shader):顶点着色器是用来描述顶点特性(如位置、颜色等)的程序。顶点指的是二维或者三维空间中的一个点。
  • 片元着色器(Fragment shader):进行逐片元处理过程(如光照)的程序。片元(Fragment)是一个WebGL术语,可以理解为像素。
ps:在场景中,仅仅用线条和颜色把图形画出来是不够的。我们必须考虑:光照、视角等对场景的影响。着色器可以高度灵活的完成这些工作,提供各种渲染效果。

回到上面的例子,上面的程序的任务是在屏幕上绘制一个10像素大小的点,它用到两个着色器:
  • 顶点着色器 — 指定了点的位置和尺寸
  • 片元着色器 — 指定了点的颜色

主程序的执行流程

在细说示例代码中顶点和片段着色器之前,我们先来看下主程序main()的执行顺序。

可以看到这里,相较于之前一次学习的顺序,这里多了“初始化着色器”和“绘图”两个步骤:
初始化着色器 — 利用initShaders()对字符串形式的着色器进行了初始化。initShaders()函数说明如下图:

下图显示了initShaders()的执行效果:

可以看到这里先执行了顶点着色器,它对gl_Position和gl_PointSize变量进行了赋值,并将它们传递给片元着色器。再执行片元着色器。
ps:这里要注意的是,WebGL程序包括运行在浏览器中的JavaScript和运行在WebGL系统的着色器程序两个部分。

示例中的顶点和片元着色器程序

顶点着色器

在示例代码的第1行~第5行是一个顶点着色程序:
var VSHADER_SOURCE = 
    'void main(){\n' + 
    'gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + 
    'gl_PointSize = 10.0;\n' + 
    '}\n';

可以看到,和C语言一样,在顶点着色器中必须有一个main()函数。
然后将点的位置赋值给gl_Position变量,点的大小赋值给gl_PointSize变量。这两个变量都是WebGL的顶点着色器内置的。
ps:在顶点着色器中gl_Position必须要被赋值,gl_PointSize不是必须的(不赋值的话默认为1.0)。

下面来看下这两个内置变量的定义:

可以看到,这里比较特殊的是gl_Position,他是一个vec4类型的变量。在GLSL ES中,vec4是由四个浮点数组成的矢量。如下图:

另外需要注意的是:gl_PointSize是float类型的变量,这里赋值一定要是浮点数,不能是其他类型(和其他语言不通,内部不会做转换)。

最后,顶点着色器程序最后以字符串的形式存储在VSHADER_SOURCE变量中。

片元着色器

之前我们说到,片元可以理解为是一个像素。严格意义上来说:片元包含了这个像素的位置、颜色和其他信息。

片元着色器的作用是:处理片元,使其显示在屏幕上。

示例代码的第7行~第10行是一个片元着色器
var FSHADER_SOURCE = 
    'void main(){\n' +
    'gl_FragColor = vec4(1, 0, 0, 1);\n'+
    '}\n';

像顶点着色器一样,片元着色器也包含了一个main()函数。
然后对内置变量gl_FragColor进行赋值。

ps:gl_FragColor是片元着色器唯一的内置变量,它控制像素在屏幕上显示的颜色。
gl_FragColor也是一个vec4类型的变量。它的四个分量分别代表了颜色的RGBA值。

最后片元着色器程序以字符串的形式存储在FSHADER_SOURCE变量中。

绘制操作

在建立了着色器之后,我们就需要进行绘制操作。这里的示例代码就是绘制一个点。
和之前的程序一样,首先要清空绘制区域。
然后使用gl.drawArrays()来进行绘制。如29行代码:
gl.drawArrays(gl.POINTS, 0, 1);

gl.drawArrays()是一个很强大的函数,具体如下:

每个参数的说明如上所示。注意:第二个参数的索引值是从0开始的。
当程序调用gl.drawArrays()时,顶点着色器将被执行count次(第三个参数),每次处理一个顶点。当顶点程序执行完后,片元着色器就会开始执行。如下图:

根据这样的顺序,最终就能在屏幕上绘制出一个点,如下图:
来自:https://blog.csdn.net/xxwlzfb/article/details/52755356

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台