注意：文章翻译http://wgld.org/，原作者杉本雅広(doxas)。文章中假设有我的额外说明。我会加上［lufy：］。另外。鄙人webgl研究还不够深入。一些专业词语，假设翻译有误。欢迎大家指正。

重复重复的东西

这已经是第11篇了，由于仅仅说了一些主要的东西。到如今为止连个多边形也没绘制出来。哎呀呀呀......
不管怎么说吧。基础是非常重要的。那就在这些基础上。来绘制一个多边形吧。须要准备的知识都已经介绍过了。剩下的就是依照步骤開始绘制多边形。首先，来确认一下绘制的步骤。
・从HTML中获取canvas对象
・从canvas中获取WebGL的context
・编译着色器
・准备模型数据
・顶点缓存（VBO）的生成和通知
・坐标变换矩阵的生成和通知
・发出画图命令
・更新canvas并渲染
上面所列举的步骤中，到如今为止全然没有介绍的是最后两个，关于画图命令的部分和canvas更新部分。稍后。我会说一说它们主要的概念。

尽管这些步骤看起来挺复杂的。可是这就是使用WebGL进行渲染的基本步骤。

这次的文章。就从上到下来依次看一下前三个步骤，先说到编译着色器。

＊当中有几个步骤顺序能够有变化，如今先依照这个顺序来看一下。

HTML和canvas的处理

关于HTML和canvas的处理。在之前的文章中（七。context的初始化）也已经讲过了。基本上也不会有什么变化。在这里再说一下。

>HTML代码

<html>

    <head>

        <title>WebGL TEST</title>

        <script src="script.js" type="text/javascript"></script>

        <script src="minMatrix.js" type="text/javascript"></script>

        <script id="vs" type="x-shader/x-vertex">

attribute vec3 position;

uniform   mat4 mvpMatrix;

void main(void){

    gl_Position = mvpMatrix * vec4(position, 1.0);

}

        </script>

        <script id="fs" type="x-shader/x-fragment">

void main(void){

    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);

}

        </script>

    </head>

    <body>

        <canvas id="canvas"></canvas>

    </body>

</html>

HTML代码就是上面这样。head标签中引用了两个javascript文件，一个是WebGL的处理文件script.js，还有一个是本站点自己写的矩阵计算的库minMatrix.js。

顶点着色器的处理

接着，该出现顶点着色器和片段着色器的代码了。首先，先从type是x-shader/x-vertex的顶点着色器開始。以下是顶点着色器部分的代码。

>顶点着色器的代码

attribute vec3 position;

uniform   mat4 mvpMatrix;

void main(void){

    gl_Position = mvpMatrix * vec4(position, 1.0);

}

这里用到了一个attribute变量和一个uniform变量。
变量position的类型是vec3，是一个3维向量。里面是顶点的位置。向量的三个元素各自是X，Y。Z坐标。

还有一个uniform声明的变量mvpMatrix。类型是mat4，所以是一个4x4的方阵。是模型，视图，投影的各个变换矩阵结合后的坐标变换矩阵。

这次的顶点着色器，仅仅是利用坐标变换矩阵来变换顶点的坐标位置。使用乘法运算。

这时候，为了让position和矩阵相乘，使用vec4函数，先将其变成一个4维的向量，然后相乘。最后将计算结果代入到gl_Position，顶点着色器的处理结束。

片段着色器的处理

接着说片段着色器。

这次。绘制的模型是一个简单的三角形，先不进行着色，仅仅是使用白色来填充。

所以，片段着色器中的处理，就仅仅是将白色信息传给gl_FragColor中。

以下是片段着色器的代码。

>片段着色器的代码

void main(void){

    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);

}

关于颜色，基本上使用vec3或者vec4的情况比較多。

由于一般就是使用RGB或者RGBA，须要3～4个元素。这一次使用的vec4是全部的參数都是1.0的向量，颜色是白色［红，绿。蓝。不透明度的各元素都是最大＝白色］。

编译代码，生成着色器

接着来看顶点着色器和片段着色器的编译。

编译也不须要什么特别的编译器。仅仅须要调用WebGL内部的函数就能够进行编译了。准备一个函数，从着色器的编译，到实际着色器的生成这一连串的流程，都在这一个函数中来完毕。以下是这个函数的代码。

＊以下的函数中的gl，是提前从WebGL的context中获取的。

>生成和编译着色器的函数

function create_shader(id){

    // 用来保存着色器的变量

    var shader;

    // 依据id从HTML中获取指定的script标签

    var scriptElement = document.getElementById(id);

    // 假设指定的script标签不存在，则返回

    if(!scriptElement){return;}

    // 推断script标签的type属性

    switch(scriptElement.type){

        // 顶点着色器的时候

        case 'x-shader/x-vertex':

            shader = gl.createShader(gl.VERTEX_SHADER);

            break;

        // 片段着色器的时候

        case 'x-shader/x-fragment':

            shader = gl.createShader(gl.FRAGMENT_SHADER);

            break;

        default :

            return;

    }

    // 将标签中的代码分配给生成的着色器

    gl.shaderSource(shader, scriptElement.text);

    // 编译着色器

    gl.compileShader(shader);

    // 推断一下着色器是否编译成功

    if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){

        // 编译成功，则返回着色器

        return shader;

    }else{

        // 编译失败，弹出错误消息

        alert(gl.getShaderInfoLog(shader));

    }

}

使用这个函数的时候。须要传入script标签的id作为參数，函数中依据这个id来获取指定的标签。
生成着色器的时候。使用WebGL中的函数createShader。这个函数在生成着色器的时候，依据顶点着色器和片段着色器的不同来传入不同的參数。參数指定为gl.VERTEX_SHADER的时候会生成顶点着色器，參数指定为gl.FRAGMENT_SHADER的时候会生成片段着色器。

首先。将代码分配给生成的着色器的时候。使用的是shaderSource函数。參数有两个，第一个參数是着色器对象，第二个參数是着色器的代码。这时候。仅仅是把着色器的代码分配给了着色器，还没有进行编译。编译的时候，使用的是compileShader函数，将着色器对象作为參数传给这个函数。就能够将着色器进行编译。

着色器是否编译成功。通过着色器中的參数能够推断。获取这个參数的时候。使用getShaderParameter函数，并使用WebGL中存在的常量COMPILE_STATUS作为參数。假设这时候的返回值是false。则表示由于什么原因导致编译失败了。要想查看原因的话，将着色器传入getShaderInfoLog函数中，就能够确认log了。

这个自己定义函数。不管是顶点着色器还是片段着色器。都能够进行编译。

实际上，顶点着色器和片段着色器的处理不同的地方就是createShader函数。其它地方是全然一样的。

程序对象的生成和连接

着色器生成之后，接着来生成程序对象。这里突然出现的程序对象，究竟是个什么对象呢？

曾经的文章中（八，着色器的说明和基础）也略微接触了一些，使用varying修饰符定义的变量。能够从顶点着色器向片段着色器中传递数据。

事实上，实现从一个着色器向还有一个着色器传递数据的，不是别的，就是程序对象。程序对象是管理顶点着色器和片段着色器，或者WebGL程序和各个着色器之间进行数据的互相通信的重要的对象。

那么，生成程序对象。并把着色器传给程序对象。然后连接着色器，将这些处理函数化。

>程序对象的生成和着色器连接的函数

function create_program(vs, fs){

    // 程序对象的生成

    var program = gl.createProgram();

    // 向程序对象里分配着色器

    gl.attachShader(program, vs);

    gl.attachShader(program, fs);

    // 将着色器连接

    gl.linkProgram(program);

    // 推断着色器的连接是否成功

    if(gl.getProgramParameter(program, gl.LINK_STATUS)){

        // 成功的话，将程序对象设置为有效

        gl.useProgram(program);

        // 返回程序对象

        return program;

    }else{

        // 假设失败，弹出错误信息

        alert(gl.getProgramInfoLog(program));

    }

}

这个函数接收顶点着色器和片段着色器两个參数。然后，首先生成程序对象。分配着色器。

生成着色器的时候。使用WebGL中的函数createProgram。将着色器分配给程序对象的时候使用函数attachShader。attachShader函数的第一个參数是程序对象，第二个參数是着色器。
着色器分配结束后。依据程序对象，要连接两个着色器，这时候使用linkProgram函数，參数就是程序对象。

和生成着色器一样。要推断着色器的连接是否成功，这时候使用getProgramParameter函数，并传入常量LINK_STATUS。

假设没有问题的话，为了将程序对象设置为有效，使用useProgram函数。注意。假设不运行这个函数的话，在WebGL中是无法识别这个程序对象的。假设连接失败，则弹出错误信息，使用getProgramInfoLog函数来得到log。

总结

来简单总结一下本次的内容。

HTML代码中引入必要的javascript文件，以及描写叙述着色器的代码。

准备了着色器的编译函数和连接着色器的程序对象相关的函数。每一个函数中都有是否进行了正确处理的推断。

下次。准备好顶点数据，也就是说准备好模型数据，然后变换为VBO。依照前面说的步骤，一步步全都理解的话。就应该没问题了，加油吧。

转载请注明：转会lufy_legend该博客http://blog.csdn.net/lufy_legend

[WebGL入门]十一，着色器编译器和连接器的更多相关文章

  1. WebGL编程指南案例解析之多数据存储于一个缓冲区以及着色器通信

    //顶点着色器往片元着色器传值 //多个参数值存于一个缓冲对象中 var vShader = ` attribute vec4 a_Position; attribute float a_PointS ...

  2. WebGL简易教程(二)：向着色器传输数据

    目录 1. 概述 2. 示例:绘制一个点(改进版) 1) attribute变量 2) uniform变量 3) varying变量 3. 结果 4. 参考 1. 概述 在上一篇教程<WebGL ...

  3. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

  4. WebGL入门教程(四)-webgl颜色

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...

  5. WebGL入门教程(二)-webgl绘制三角形

    前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...

  6. [WebGL入门]五，矩阵的基础知识

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］,另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指 ...

  7. Unity 渲染教程（二）：着色器基础

    转载:https://www.jianshu.com/p/7db167704056 这是关于渲染基础的系列教程的第二部分.这个渲染基础的系列教程的第一部分是有关矩阵的内容.在这篇文章中我们将编写我们的 ...

  8. unity中使用的着色器语言

    在unity中,着色器编程使用了一列列的HLSL语言变种(也叫作Cg,但是大部分实际上两者都是一样的). 目前,为了在不同平台下保持最好的跨平台性, 取样贴图时,最好使用DX9风格 的HLSL. 着色 ...

  9. WebGL之通过外部传入a_PontSize值改变点着色器vshader内置变量gl_PointSize的值

    最近分配到一个看起来非常简单的优化需求.通过地图上设置工具来改变地图上显示的点的大小和透明度.无非过程就是从控件面板获取到用户设置的值保存到数据库中.然后地图上画点的时候取出设置的值渲染出点即可.前端 ...

随机推荐

  1. c#.net公共帮助类

    c#.net公共帮助类 比较全面的c#帮助类 比较全面的c#帮助类,日常工作收集,包括前面几家公司用到的,各式各样的几乎都能找到,所有功能性代码都是独立的类,类与类之间没有联系,可以单独引用至项目,分 ...

  2. 36、ALSA声卡驱动和应用

    (注意:内核上电的时候会把一些没运行的控制器模块的时钟都关掉,所有在写驱动的时候需要在使用的使用使用clk_get和clk_enable使能时钟) (说明:与ALSA声卡对应的是OSS架构,第二期视频 ...

  3. SetForegroundWindow的正确用法

    在SetForegroundWindow之前比较早的时候(比如main函数里)调用一下以下代码: DWORD dwTimeout = -1; SystemParametersInfo(SPI_GETF ...

  4. MinGW和MSYS项目是在一起的（翻译官网）

    翻译MinGW官网的首页,首页描述了MinGW和MSYS的基本情况. Home of the MinGW and MSYS Projects(我才知道,MinGW和MSYS项目是在一起的 -_-!) ...

  5. Android 判断软键盘弹出并隐藏的简单完美解决方案

    最近项目中有一个编辑框,下面是个ListView.在触发编辑框弹出软键盘后,ListView还能滑动,并且ListView的item还能响应单击.这样的体验效果很不好.于是便想在滑动或单击item时判 ...

  6. 【hdu 5996】dingyeye loves stone

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submission(s) ...

  7. [React Router v4] Use URL Parameters

    URLs can be looked at as the gateway to our data, and carry a lot of information that we want to use ...

  8. iOS 通讯录基础

    iOS  6 之后应用訪问通讯录须要获得用户授权,而且仅仅授权一次,即使卸载了之后再安装.也不用再次授权. 开发通讯录应用须要两个框架: 1.ABAddressBook    主要用于提供訪问通讯录中 ...

  9. Java NIO(6)----NIO与IO

    当学习了Java NIO和IO的API后,一个问题立即涌入脑海: 我应该何时使用IO.何时使用NIO呢?在本文中,我会尽量清晰地解析Java NIO和IO的差异.它们的使用场景,以及它们怎样影响您的代 ...

  10. 学习鸟哥的Linux私房菜笔记（17）——Linux引导流程

    一.系统引导流程 第一步:固件fireware(CMOS/BIOS)--POST加点自检(与操作系统无关) 这一步主要是检查硬盘等硬件是否能正常工作 CMOS:是固化在主板上,详细:http://sc ...