最近开始研究起WebGL来,发现以前在图形学课上看javascript还真是不太理智的做法。
这一系列学习笔记是自己学习过程的总结,难免有错和不正确,希望发现问题的同学可以“惨无人道”的指出。
WebGL简单说就是OpenGL在浏览器端的实现。那OpenGL又是什么?OpenGL就是一组提供了生成2d、3d图形的API。
其实,要想用WebGL来真正“画”出一些东西,首先要对图形学的一些基本概念有理解。
简明图形学
图形学,指利用计算机来生成图形(creation)、绘制或者叫渲染图形(render)、处理图形(manipulation)的学科。
(一)
首先是生成的问题。我对图形生成的理解,就是怎么样来描述各种需要进行绘制的图形,尤其是那些复杂的人物啊、建筑啊等等。
在图形学中,我们从描述最最基本的点(vertex)开始,描述一个点,图形学中的点和几何意义上的点稍有不同,除了基本的位置外,可能还会需要颜色、顶点发向量(用于计算光照)、纹理坐标(用于贴图)等额外的信息。正如图像是由像素构成,图形学中的图形其实可以理解成由点构成。比如:我们按照一个人的形状,在三维空间中定义出这个人的轮廓,就已经大致可以描述这个人了。那有了点,我们就可以把它们连起来,可是这么多的点该怎样连?图形学里会将点连成三角形(polygon)。然后这许多的三角形就可以组成模型的骨架,线框网格(wire mesh)。
比如下面这个有点像人的恶心模型, 我们可以看到组成它的点连接起来,形成了模型的网格(mesh):
这就是模型的最最基本的描述,如果再加上一些材质、打上灯光什么的,它看起来会是这样:
(二)
大致说了图形描述的问题,那接着是绘制。也就是怎么样把三维的东西绘制到二维的屏幕。
这里,我们想到,要是有一个图形渲染机,我们把我们对模型的描述,也就上面说的一堆点的信息,统统倒入这个机器,机器一阵处理后就可以在屏幕上绘制出模型,那就好了。确实也有这样一个机器,它的输入可以理解成一堆点(用数组之类的表示),输出就是我们屏幕上闪闪动人的模型。其实,这个机器可以理解成显卡。那它是怎么做到的?
首先是我们怎么样把点的信息告诉显卡,OpenGL(或者WebGL)这时终于是派上用场了,它封装了底层的调用,提供给了我们和设备无关的函数来进行这些操作;显卡拿到了点的信息,就必须进行处理,因为最后屏幕上显示的是像素信息呀,这些处理简单说只有2个部分:点处理+像素处理(又叫光栅化),下面详细叙述;生成了像素数据后,这些像素数据会保存到一块叫帧缓存的内存中,然后,这些像素数据就最终在屏幕上显示了。
上面我们说,处理过程分为点处理和像素处理。点处理,主要是根据输入的点的信息再进行一些必要的计算,最终产生每个点实际在屏幕上的显示位置;像素处理,则是真正计算每个像素应该显示的颜色。
接着,我们需要想想更详细的东西。
我们通过点来描述模型,那必然会需要一个坐标系,否则,点的位置、法向量该如何描述。这个参照的坐标系一般称为模型坐标系(或者object/local space)。那现在我们有了很多个模型,就需要有一个放置它们的世界,或者叫场景吧,这时也需要一个坐标系来定位模型的位置,这个坐标系就叫做世界坐标系(或者world space)。世界如此之大,我们或许不可能把整个世界都显示出来,那有点贪心了,这时我们需要一台摄像机,或者称它观察者吧,透过它的眼睛来看我们的世界,它一般会形成一个观察体,在这个观察体里的才显示,不在的就当作隐形了,这个坐标系就叫做观察坐标系(或者view space)。处在观察者注视下的世界其实还是一个3d的世界,可是我们需要显示在2d平面上啊,这时就需要一个很重要的变换过程了,叫做投影(projection),有正交投影和透视投影二种,投影变换后3d的世界就会被投影到一个2d的投影平面上,并且同时基本保持了在3d空间的性质,如:近大远小等等。最后,我们再进行一个视口(viewport)变换,将投影窗口变换为屏幕上的一个矩形区域(其实就是我们显示图形的窗口)。这些变换后,我们应该就会开始计算视口中每个像素该显示的颜色,然后绘制出来,整个绘制过程就完成了。这一系列操作,可以称为渲染管线。就好象linux的管道一样,这个管道输出的信息作为下一个管道输入的信息,不断进行下去。
这个过程,其实简单说来,就是将我们输入的点从一个坐标系变换到另一个坐标系,那这种变换,矩阵运算就是最拿手的了。比如:在world space会对模型进行一些平移、旋转、缩放操作,都可以定义成一个变换矩阵;在view space,要将世界坐标中的点变换为观察坐标中的点,也是定义成一个变换矩阵;投影变换、视口变换也都是变换矩阵。这些细节,OpenGL的API其实都有函数能够直接使用,但是WebGL又稍微有点特殊,需要我们深入到渲染管线。
(三)
总结下,渲染管线的流程大致是这样:
点信息(vertices data) -> 世界坐标系中的变换,如:平移、缩放、选择(world space transformation) -> 世界坐标系转为观察坐标系,需要定义摄像机(view space transformation) -> 投影变换(projection transformation) -> 裁剪(clipping,摄像机外的就不显示),背面剔除(backface culling,背对摄像机的那个面不显示) -> 齐次裁剪空间 -> 视口变换(viewport transformation) -> 光栅化(rasterize,可能会包括:贴图生成、光照生成、场景雾生成等) -> 最终像素颜色 -> 帧缓存(frame buffer) -> 显示到屏幕
在这个管线中,大部分都是显卡在做工作,但是,我们却有机会直接对显卡编程,来操作这些数据,可以编程的2个部分分别叫做:vertex shader和fragment shader,其实就是分别对应对点的操作和对像素的操作。其中,vertex shader是对输入的每个点依次执行,生成该点的最终位置;fragment shader对每个像素操作,生成该像素的显示颜色;这2个shader之间也可以传递数据,不过只能是vertex shader传递给fragment shader,因为总是先执行vertex shader(比如:vertex shader内先根据点的法向量计算一些光照参数,然后传给fragment shader生成最终有光照考虑的像素颜色;vertex shader直接传递贴图坐标给fragment shader,fragment shader根据贴图坐标计算加上了贴图考虑的像素颜色等)。使用WebGL恶心的地方就是,就算只是显示一个三角形,都需要自己写shader。
对应渲染管线的话,插入这2个可编程部件后,大致应该是这样:
点信息(vertices data) ->
vertex shader { 世界坐标系中的变换,如:平移、缩放、选择(world space transformation) -> 世界坐标系转为观察坐标系,需要定义摄像机(view space transformation) -> 投影变换(projection transformation) -> 其他一些计算 } ->
裁剪(clipping,摄像机外的就不显示),背面剔除(backface culling,背对摄像机的那个面不显示) -> 齐次裁剪空间 -> 视口变换(viewport transformation) ->
fragment shader { 贴图生成、光照生成、场景雾生成、其他一些计算 } ->
光栅化(rasterize,可能会包括:贴图生成、光照生成、场景雾生成等) -> 最终像素颜色 ->
帧缓存(frame buffer) -> 显示到屏幕
WebGL绘制三角形
简单的总结完图形学的基本概念后,我们可以动手写程序了。就好象第一个程序都是Hello World,个人觉得图形学里的Hello World应该就是画一个三角形。
我们可以先来看看OpenGL写的话,或许会是这样的(引用自:http://fly.cc.fer.hr/~unreal/theredbook/chapter01.html):
#include <whateverYouNeed.h> main() { OpenAWindowPlease(); glClearColor(0.0, 0.0, 0.0, 0.0); glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 1.0, 1.0); glOrtho(-2.0, 2.0, -2.0, 2.0, -1.0, 1.0); glBegin(GL_TRIANGLES); glVertex2f(0.0, 1.0); glVertex2f(-1.0, 1.0); glVertex2f(1.0, -1.0); glEnd(); glFlush(); KeepTheWindowOnTheScreenForAWhile(); }
glClearColor/glClear那里是清屏,为绘制做准备;glOrtho那句就是定义一个正交投影的“摄像机”;glBegin/glEnd那里就是通过三个点定义了一个三角形;glFlush就是将帧缓存画到屏幕。挺简洁呀~但是,WebGL没有像glBegin/glEnd这种东西,也不会很好心的自己帮你把点根据你定义的摄像机进行合适的变换,我们需要做更多的工作。
以下代码,引用自MDN的文档(https://developer.mozilla.org/en/WebGL),文档的demo代码真是太乱了,然后做了适当的调整和修改。为了偷懒,我就对自己学习时觉得不好理解的部分进行一下记录,全部代码可以在这里获取:https://github.com/KohPoll/webgl-learn
(一)关于shader及program的创建
function getShader(gl, id) { var shaderScript = document.getElementById(id), theSource = '', shader = null; if (!shaderScript) return shader; theSource = text(shaderScript); if (shaderScript.type === 'x-shader/x-fragment') { shader = gl.createShader(gl.FRAGMENT_SHADER); } else if (shaderScript.type === 'x-shader/x-vertex') { shader = gl.createShader(gl.VERTEX_SHADER); } else { return shader; } gl.shaderSource(shader, theSource); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return null; return shader; } function initShaders() { var fragmentShader, vertexShader; fragmentShader = getShader(gl, 'shader-fs'); vertexShader = getShader(gl, 'shader-vs'); shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, fragmentShader); gl.attachShader(shaderProgram, vertexShader); gl.linkProgram(shaderProgram); if (gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { gl.useProgram(shaderProgram); } }
shader的创建步骤:1.创建一个shader(gl.createShader);2.获取shader的源代码(这里是从dom节点中获取)并进行设置(gl.shaderSource);3.编译shader(gl.compileShader)。
将shader“注入”到可编程组件program的步骤:1.创建一个program(gl.createProgram);2.依附shader到program上(gl.attachShader);3.链接program(gl.linkProgram);4.使用该program(gl.useProgram)。
(二)关于点信息的创建(buffer的使用)
我们上面说,可以将点的描述传送给显卡,这些信息其实是存放在内存里面的。
function initBuffers() { var vertices, colors; // vertex buffer vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; verticesBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // vertex color buffer colors = [ 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0 ]; verticesColorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, verticesColorBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); }
大致步骤是这样的:1.我们将点信息存放在数组里;2.然后创建buffer(gl.createBuffer),并绑定它(gl.bindBuffer),以便可以对它进行操作;3.设置数据(gl.bufferData)。PS:那个gl.STATIC_DRAW的意思我也不是很理解,大概是这样的:STATIC_DRAW保存的数据内容只被程序定义一次,GL绘制命令可以使用多次;DYNAMIC_DRAW保存的数据内容将被程序重复定义,GL绘制命令可以使用多次。
(三)关于渲染
function drawScene() { var projectMatrix, worldMatrix, viewMatrix, pUniform, wUniform, vUniform; gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // {{ phase 1 // bind to a shader attribute so the shader code can access. vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'aVertexPosition'); gl.enableVertexAttribArray(vertexPositionAttribute); gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer); gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); vertexColorAttribute = gl.getAttribLocation(shaderProgram, 'aVertexColor'); gl.enableVertexAttribArray(vertexColorAttribute); gl.bindBuffer(gl.ARRAY_BUFFER, verticesColorBuffer); gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0); // }} // {{ phase 2 //projectMatrix= makePerspective(75, canvas.width / canvas.height, 1.0, 100.0); projectMatrix = makeOrtho(-10.0, 10.0, -10.0, 10.0, 1.0, 100.0); //modelviewMatrix= Matrix.I(4); worldMatrix = Matrix.I(4); worldMatrix = worldMatrix.x(Matrix.RotationZ(0.6).ensure4x4()); viewMatrix = Matrix.I(4); viewMatrix = viewMatrix.x(Matrix.Translation($V([0.0, 0.0, -95.0])).ensure4x4()); // generate and deliver to the shader. pUniform = gl.getUniformLocation(shaderProgram, 'uPMatrix'); gl.uniformMatrix4fv(pUniform, false, new Float32Array(projectMatrix.flatten())); wUniform = gl.getUniformLocation(shaderProgram, 'uWMatrix'); gl.uniformMatrix4fv(wUniform, false, new Float32Array(worldMatrix.flatten())); vUniform = gl.getUniformLocation(shaderProgram, 'uVMatrix'); gl.uniformMatrix4fv(vUniform, false, new Float32Array(viewMatrix.flatten())); // }} gl.drawArrays(gl.TRIANGLES, 0, 3); // (mode, first, count of point used to draw) }
这里有很多重要的东西。
首先是js怎么和shader交互的问题,就是怎么把相应的数据传递给shader使用。简单说明下shader的变量的“类型”,attribute只有vertex shader有,是通过程序(js)传递给它的变量。uniform两种shader都有,而且是不能改变的,可以理解成常量;varying是vertex shader向fragment shader传递数据,fragment shader接受数据的方式。
然后,我们看上面的phase 1部分的代码,这里就是将刚刚设置到buffer中的点信息作为attribute传递给shader使用的代码。
1.调用vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'aVertexPosition')会返回一个“位置”,这个位置可以理解成shader中对名为aVertexPosition这个attribute的引用(指针);
2.使用gl.enableVertexAttribArray(vertexPositionAttribute)开启attribute的数组传递(大概是这样吧?);
3.绑定我们创建并填充了点信息的那块verticesBuffer,gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer);
4.让步骤1中的shader的attribute指向这块buffer,gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0),我们之前创建buffer时传递的数据都是一维的,那第2个参数3就用来说明每3个数组元素组成一个attribute(其实就是一个vector3,代表点的位置)。表示颜色的attribute的过程与此类似。
接着,我们看phase 2部分的代码,这里就是设置观察变换矩阵、投影变换矩阵,并作为uniform传递给shader使用的代码。
1.projectMatrix = makeOrtho(-10.0, 10.0, -10.0, 10.0, 1.0, 100.0),创建正交投影矩阵,用于投影变换;
2.worldMatrix = Matrix.I(4);worldMatrix = worldMatrix.x(Matrix.RotationZ(0.6).ensure4x4());创建worldMatrix,并绕z轴旋转,这里其实就是在进行世界坐标系中的变换(平移、选择、缩放);
3.viewMatrix= Matrix.I(4);modelviewMatrix = modelviewMatrix.x(Matrix.Translation($V([0.0, 0.0, -95.0])).ensure4x4());创建viewMatrix,并进行平移,这里之所以要进行平移,是因为我们的点的z轴设置的都是0,而我们的摄像机的z轴范围是1到100,进行这个平移,以便摄像机能看到这些点,实际上就是从世界坐标系到观察坐标系的一个变换;
4.pUniform = gl.getUniformLocation(shaderProgram, 'uPMatrix'),与attribute类似,会返回一个“位置”,这个位置可以理解成shader中对名为uPMatrix这个uniform的引用(指针);
5.gl.uniformMatrix4fv(pUniform, false, new Float32Array(projectMatrix.flatten()));设置这个uniform的数据,那个flatten是将2维的矩阵转成1维数组的方法。其它的uniform设置与此类似。
最后,我们调用gl.drawArrays(gl.TRIANGLES, 0, 3); // (mode, first, count of point used to draw),告诉程序以三角形的模式绘制,使用3个点。关于模式的参数,可以参考这里:http://fly.cc.fer.hr/~unreal/theredbook/figures/fig2-6.gif
(四)关于shader
一切看起来都挺好,但是,shader呢?没有shader来进行真正的处理,传递这些数据是一点用处也没有的啊。我们就来依次来看看2个shader。
首先是vertex shader:
<script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 aVertexPosition; attribute vec4 aVertexColor; //attribute vec2 aTextureCoord; uniform mat4 uVMatrix; uniform mat4 uWMatrix; uniform mat4 uPMatrix; varying lowp vec4 vColor; //varing lowp vec2 vTextureCoord; void main(void) { gl_Position = uPMatrix * uVMatrix * uWMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor; //vTextureCoord = aTextureCoord; } </script>
可以看到,vertex shader我们定义了2个attribute,分别表示点的位置和点的颜色信息;3个uniform,分别表示世界变换矩阵、观察变换矩阵、投影变换矩阵,这些值通过程序传递给shader。我们还定义了一个varying,用于传递给fragmeng shader颜色信息(因为vertex shader实际上无法操作像素,所以把颜色信息传递下去比较合理)。
gl_Position = uPMatrix * uVMatrix * uWMatrix * vec4(aVertexPosition, 1.0);就是对每一个点进行对应的变换,先是世界坐标中的变换(乘以uWMatrix);然后是观察坐标变换(乘以uVMatrix),最后投影变换(乘以uPMatrix)。然后赋值给shader内置的变量gl_Position,表示点的最终计算出的位置。
vColor = aVertexColor;将传递进来的点的颜色信息,直接赋值给vColor,以便fragment shader使用。
然后,看看fragment shader:
<script id="shader-fs" type="x-shader/x-fragment"> //uniform sampler2D uSampler; varying lowp vec4 vColor; //varing lowp vec2 vTextureCoord; void main(void) { gl_FragColor = vColor; //gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord,t)); } </script>
可以看到,fragment shader定义了一个varying,用于接收vertex shader传递的颜色信息;然后将这个颜色信息赋值给shader的内置变量gl_FragColor,表示顶点颜色。光栅化时,实际上,会对顶点表示的这个图元(三角形)的像素颜色进行插值,然后确定出最终颜色,用来插值的就是顶点颜色。
所以,最后的效果就是这样:
相关推荐
在“WebGL学习笔记(一)”中,我们将会探讨WebGL的基本概念、工作原理以及如何开始编写你的第一个WebGL程序。 1. **WebGL基本概念** - **上下文(Context)**:在HTML5中,WebGL是Canvas元素的一个上下文,通过`...
它是WebGL学习笔记的重点,特别是在初学者阶段。WebGL的核心是光栅化引擎,它能够根据程序员编写的代码在GPU上绘制点、线和三角形,进而构建复杂的3D场景。 在WebGL中,所有图形渲染都是通过GPU来执行的,这需要...
"Webgl旋转三角形源码"是WebGL学习的基础教程,通常用来介绍基本的顶点坐标、着色器和渲染流程。 在JavaScript中,WebGL的核心概念是`WebGLRenderingContext`对象,它是用于在画布元素上绘制3D图形的接口。要创建一...
总的来说,“WebGL--三角形”是一个很好的教学实例,它将理论与实践相结合,使学习者能够直观地理解WebGL如何在浏览器中构建和展示3D图形。这个简单的三角形是计算机图形学之旅的第一步,它开启了探索WebGL和更广阔...
这个“WebGL--三维三角形分裂图”项目是利用WebGL来实现三维空间中三角形的动态分裂效果,提供了一个交互式的体验,用户可以开始、暂停和终止这一过程。它特别适用于学习和理解计算机图形学中的几何变换、渲染原理...
《WebGL编程指南》学习笔记webgl-study-notes
这个“WEBGL学习资料8-16”的压缩包文件显然是一个专门针对WebGL初学者的学习资源集合,涵盖了从第8课到第16课的内容,旨在帮助学习者深入理解和实践WebGL的基本概念和技术。 首先,WebGL的基础知识包括理解其工作...
WebGL是一种基于OpenGL标准的JavaScript API,用于在任何兼容的Web浏览器中进行2D和3D图形渲染。它使得开发者可以在网页上实现交互式的、动态的图形效果,无需借助插件或外部应用程序。本资源“WEBGL学习资料-第1-7...
计算机图形学 WebGL 课程作业-扭曲的三角形,谢尔宾斯基三角形随机,递归,四面体,球面,俄罗斯方块+源代码+文档说明 - 不懂运行,下载完可以私聊问,可远程教学 该资源内项目源码是个人的毕设,代码都测试ok,都是...
WebGL(Web Graphics Library)是一种JavaScript API,用于在任何兼容的Web浏览器中渲染交互式的2D和3D图形,无需插件。它基于OpenGL标准,是WebGL的主要灵感来源,但设计为完全与Web集成,使得开发人员可以利用...
在这个名为"WebGL-Study-Notes"的资源包中,我们可以预见到一系列关于WebGL的学习笔记和示例代码。 WebGL的核心是通过JavaScript与GPU(图形处理器)进行通信,从而实现硬件加速的图形渲染。它允许开发者在网页上...
webgl入门-基础三角形绘制
这个“WEBGL_webgl_”很可能是一份教程或教材,旨在帮助初学者掌握WebGL技术,并随着学习者的进步不断更新内容。 在WebGL中,我们主要通过JavaScript与GPU(图形处理器)进行通信,创建和操纵复杂的几何形状,应用...
WebGL 是一项在网页上渲染三维图形的技术,也是HTML5 草案的一部分。 《WebGL编程指南》的主要篇幅讲解了WebGL ...《WebGL编程指南》适合有一定前端开发基础,希望学习WebGL,但对三维图形学缺乏了解的程序员们阅读。
Unity通用WebGL模板Universal WebGL Template 1.2.1是一个专为开发WebGL游戏或应用程序设计的工具。Unity是一款强大的跨平台游戏引擎,它允许开发者创建高质量的3D和2D游戏,并将其发布到多种设备上,包括浏览器。...
WebGL是一种基于OpenGL标准的JavaScript API,用于在任何兼容的Web浏览器中呈现交互式的三维图形。这个“效果超棒的Webgl模型-一堆石头”很可能包含了一组精心设计的3D模型,这些模型可能用于创建虚拟现实场景、游戏...
WebGL是一种基于OpenGL标准的JavaScript API,用于在任何兼容的Web浏览器中进行2D和3D图形渲染。它使得开发者可以在无需插件的情况下,在网页上实现高性能的图形处理,为互联网用户提供了丰富的交互式视觉体验。 一...
Three.js是一个js的开源框架,它把webgl的所有东西都封装好了,我们不再需要去了解webgl那些比较麻烦的细节,直接在此框架上进行开发,既方便,又快捷,而且很容易就能学习,感兴趣的朋友跟随小编一起看看吧