《WebGL编程指南》学习笔记——4.绘制一个点
《WebGL编程指南》学习笔记——4.绘制一个点
之前,我们学习了如何建立一个WebGL程序,如何使用一些简单的WebGL相关函数。这一节,我们进一步在一个示例程序中绘制一个最简单的图形:一个点。这一小节中我们要弄懂一个重要的概念:着色器。
- WebGL编程指南学习笔记4绘制一个点
- HelloPoint1html
- 着色器
- 顶点着色器 Vertex shader
- 片元着色器Fragment shader
- 初始化着色器
- HelloPoint1js
- 顶点着色器程序和片元着色器程序
- 主程序
- 初始化着色器
- 绘制
- 总结
下小节我们介绍坐标系统
我们进一步在一个示例程序中绘制一个最简单的图形:一个点。
此系列我编写的源码都可以在我的github下载到:https://github.com/hushhw/WebGL-Programming-Guide/tree/master/02HelloPoint1
HelloPoint1.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Draw a point</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="HelloPoint1.js"></script>
</body>
</html>
在HelloCanvas.html文件中比较简单,需要注意的是需要引入一些其他的文件来支持webgl,文件下载可以到https://github.com/hushhw/WebGL-Programming-Guide/tree/master/lib自行下载。
着色器
WebGL依赖于一种新的称为着色器(shader)的绘图机制。着色器提供了灵活且强大的绘制二维或三维图形的方法,所有WebGL程序必须使用它。
HelloPoint1.js是这本书中使用着色器的第一个WebGL程序,在代码中,着色器程序是以字符串的形式“嵌入”在JavaScript文件中的,在程序真正开始运行前它已经设置好了。
WebGL需要两种着色器:
1. 顶点着色器( Vertex shader )
顶点着色器是用来描述顶点特性(如位置、颜色等)的程序。顶点(vertex)是指二维或三维空间中的一个点,如二维或三维图形的端点或交点。
2.片元着色器(Fragment shader)
片元着色器是进行逐片元处理过程如光照的程序。片元(fragment)是一个WebGL术语,你可以将其理解为像素(图像的单元)。
在后续,我们会详细的学习着色器。简单的说,在三维场景中,仅仅用线条和颜色把图形画出来是远远不够的。你必须考虑如光线照上去后,或者观察者的视角发生变化时,对场景会有什么影响。着色器可以高度灵活的完成这些工作;提供各种渲染效果。这也就是现在制作的三维场景如此逼真的原因。
图的左侧是两个浏览器窗口。它们是同一个窗口,上面一个是执行JS程序之前的窗口,下面一个执行之后的。
程序执行的流程大概是:
- 运行JS程序,调用了WebGL的相关方法。
- 顶点着色器和片元着色器会执行,在颜色缓冲区内进行绘制,这时就清空了绘图区。
- 颜色缓冲区中的内容会自动在浏览器的 < canvas >上显示出来。
初始化着色器
“初始化着色器”我们调用辅助函数initShaders()对字符串形式的着色器进行了初始化。该函数被定义在lib文件夹下,前文提到下载方式了。
Web系统由两部分组成,即顶点着色器和片元着色器。在初始化着色器之前,顶点着色器和片元着色器都是空白的,我们需要将字符串形式的着色器代码从JavaScript传给WebGL系统,并建立着色器,这就是initShaders()函数要做的事情。着色器运行在WebGL系统中,而不是JavaScript程序中。
initShaders()函数执行成功后,着色器被创建好了并随时可以使用,顶点着色器将被首先执行,它对gl_Position变量和gl_PointSize变量进行赋值,并将它们传入片元着色器,然后片元着色器再执行。实际上,片元着色器接收到的是经过光栅化(将几何图形变为二维图像的过程)处理后的片元值;现在可以简单认为这两个变量从顶点着色器传入了片元着色器。
HelloPoint1.js
回到这个实例中来:示例程序的任务是,在屏幕上绘制一个10像素大小的点 ,它用到了两个着色器:
- 顶点着色器指定了点的位置和尺寸。本例中:点的位置是(0.0,0.0,0.0),尺寸是10.0像素
- 片元着色器指定了点的颜色。本例中,点的颜色是红色(1.0,0.0,0.0,1.0)。
/*** Created by hushhw on 17/12/12.
*/
//HelloPoint1.js
//顶点着色器程序
var VSHADER_SOURCE ='void main() {\n' +'gl_Position = vec4(0.5, 0.0, 0.0, 1.0);\n' + //设置坐标'gl_PointSize = 50.0;\n' + //设置尺寸'}\n';//片元着色器程序
var FSHADER_SOURCE='void main(){\n'+'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+ //设置颜色'}\n';function main() {var canvas = document.getElementById('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 ;}gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.POINTS, 0, 1);
}
这个文件包含三个部分:
- 顶点着色器程序(GLSL ES 语言)
- 片元着色器程序(GLSL ES 语言)
- 主程序(JavaScript语言)
顶点着色器程序和片元着色器程序
着色器程序代码必须预先处理成单个字符串的形式,所以我们用+号将多行字符串连成一个长字符串。(每一行以\n结束,这是由于当着色器内部出错时,就能获取出错的行号,这对于检查源代码中的错误很有帮助;但是,\n并不是必须的。为了更容易维护,也可以把着色器代码写到单独的文件中(就像javaScript文件一样),然后通过javaScript程序从文件中读取出来加载。)
就像JS一样,着色器程序使用 = 操作符为变量赋值。首先将点的位置赋值给 gl_Position 变量,然后将点的尺寸赋值给 gl_PointSize 变量,这两个变量是内置在顶点着色器中,而且有特殊含义;gl_Position 表示顶点的位置,gl_PointSize 表示点的尺寸。
在看代码的时候你可能会有疑问,好像在定义顶点着色器时的类型和JS不一样。那是因为GLSL ES是一种强类型的编程语言,也就是说,开发者必须明确指出某个变量是某种“类型”的。
下面是这一节出现在GLSL ES代码中的几种类型:
注意:如果向某类型的变量赋一个不同类型的值。就会出错,例如,gl_PointSize 是浮点型的变量,你就必须向其赋浮点型的值。
在赋值给 gl_Position 时,我们添加了1.0作为第4个分量。由4个分量组成的矢量被称为齐次坐标。因为它能够提高处理三维数据的效率,所以在三维图形中被大量使用。虽然齐次坐标是四维的,但如果其最后一个分量是 1.0,那么这个齐次坐标就可以表示“前三个分量为坐标值”的那各个点。所以,当你需要用齐次坐标表示顶点坐标的时候,只要将最后一个分量赋为 1.0 就可以了。
主程序
main()函数的执行流程:
这个流程和上一节的区别就是增加了“初始化着色器”和“绘图”部分。
初始化着色器
//初始化着色器if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){console.log('Failed to initialize shaders.');return ;}
绘制
首先我们清空绘制区域,然后我们使用 gl.drawArrays()来进行绘制。
gl.drawArrays(gl.POINTS, 0, 1);
gl.drawArrays()是一个强大的函数,它可以用来绘制各种图形:
示例函数调用该函数时,因为我么绘制的是单独的点,所以设置第1个参数为 gl.POINTS, 设置第2个参数为0,表示从第1个顶点(虽然只有1个顶点)开始画,第3个参数 count 为1,表示在这个简单的程序中仅绘制了1个点。
总结:
一旦顶点着色器执行完后,片元着色器就会开始执行,调用main()函数,将颜色值(红色)赋给gl_FragColor。最后,一个红色的10像素大小的点就被绘制在了(0.0,0.0,0.0,1.0)处,也就是绘制区域的中心位置。
文章内容借鉴于:
《WebGL编程指南》
http://www.cnblogs.com/mirror-pc/p/4181398.html
http://blog.csdn.net/weixin_40282619/article/details/78030629
《WebGL编程指南》学习笔记——4.绘制一个点相关推荐
- iPhone编程指南学习笔记
为什么80%的码农都做不了架构师?>>> UIWindow 在创建应用程序窗口时,您应该总是将其初始的边框尺寸设置为整个屏幕的大小.如果您的窗口是从nib文件装载得到,Inte ...
- Unity3D学习笔记1——绘制一个三角形
文章目录 1. 绪论 2. 概述 3. 详论 3.1. 准备 3.2. 实现 3.3. 解析 3.3.1. 场景树对象 3.3.2. 绘制方法 4. 结果 1. 绪论 最近想学习一下Unity3d,无 ...
- Linux Unix shell 编程指南学习笔记(第五部分)
第二十五章 深入讨论 << 当shell 看到 << 的时候,它知道下一个词是一个分界符.该分界符后面的内容都被当做输入,直到shell又看到该分界符(位于单独的一行).比方: ...
- LINUX与UNIX SHELL编程指南 学习笔记
第1章文件安全与权限 1.2 文件类型 还记得前面一节所提到的文件权限位前面的那个字符吗?我们现在就解释一下这个横杠 所代表的意思,文件类型有七种,它可以从ls -l命令所列出的结果的第一位看出,这七 ...
- 【《WebGL编程指南》读书笔记-WebGL入门】
<WebGL编程指南>读书笔记 目录链接:https://blog.csdn.net/floating_heart/article/details/124001572 第二章 WebGL入 ...
- 【WebGL】《WebGL编程指南》读书笔记——第2章
一.前言 最近看了<WebGL编程指南>这本书,发现还是很有意思的,故每章阅读后做个笔记. 二.正文 Example1:在canvas中绘制2D矩形 <!DOCTYPE html&g ...
- 【《WebGL编程指南》读书笔记——着色器和程序对象的准备】
本文为<WebGL编程指南>第九章下半部分读书笔记 总目录链接:https://blog.csdn.net/floating_heart/article/details/124001572 ...
- 【WebGL】《WebGL编程指南》读书笔记——第5章
一.前言 终于到了第五章了,貌似开始越来越复杂了. 二.正文 Example1:使用一个缓冲区去赋值多个顶点数据(包含坐标及点大小) function initVerte ...
- JavaScript 权威指南-学习笔记(一)
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! JavaScript 权威指南-学习笔记 ...
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
最新文章
- C#中MySQL语句带参数的模糊匹配问题
- 华为鸿蒙系统腾讯首测,华为鸿蒙系统首测,速度超安卓60%?谷歌该咋想,咱也不敢问呐...
- 通过单步调试理解Angular里routerLink指令实际url的生成逻辑
- 启动jboss_3种启动JBoss BPM流程的基本方法
- 从诺克斯维尔的攀岩健身房到旧金山的网络安全公司
- 如何选择面向对象语言
- python动态规划详解_python----动态规划
- android在程序中打开另一个程序
- [转载]百分之百自动登录2345王牌技术员联盟源代码(delphi)
- CAD迷你看图v4.4.3 for Mac 小巧而全面的CAD看图工具
- 你安全吗网剧技术探讨-个人向
- 如何建立自己的博客网站
- 国自然标书,600多份成功申请基金的标书 可下载
- Unix环境高级编程—进程控制(三)
- Codeforces - Inna and Dima
- 算法语句高中数学计算机,高中数学《基本算法语句》文字素材3 新人教A版必修3...
- html5手机网站需要加的那些meta标签,手机网站自适应
- 计算机更新后启动不了,win10系统更新显卡之后开不了机如何解决
- pytorch安装 镜像网站
- unity cardboard 导出