WebGL

WebGL中使用rotate(mvMatrix,[0,1,0])函数进行旋转操作，其旋转总是以自身为中心轴进行。 使用translate(mvMatrix,[x,y,z])函数进行移动操作，其移动也是以当前物体变换后的坐标轴为基础。物体进行旋转后，其坐标轴的方向也发生了变化，其自身坐标系与物体坐标系已经不同，其移动方向以变化后的自身坐标系方向为基准。 使用两种操作时，一定要考虑两种操作的 先后顺序 ： 1、先移动后旋转 mat4.translate(mvMatrix,[5,0,0]); mat4.rotate(mvMatrix,degToRad(moonAngle),[0,1,0]); 物体先移动到指定位置（此时，自身坐标系与世界坐标系相同），然后在变换后的位置绕自身坐标轴自转。其结果类似于地球的自转 2、先旋转后移动 mat4.rotate(mvMatrix,degToRad(moonAngle),[0,1,0]); mat4.translate(mvMatrix,[5,0,0]); 未旋转前，物体的自身坐标系与世界坐标系方向相同，旋转后，其自身坐标系方向发生了变化。这时进行移动操作，变换以当前的自身坐标系为基准进行。其结果类似于地球绕太阳公转。 本人是新手，有什么不对的地方还请大家多多指正啊！ 来源： CSDN 作者： 无涯Andy 链接： https://blog.csdn

WebGL绘图 基本的几何图元有：三角形、线和点精灵，3D模型都是通过这些几何图元组成的。WebGL中有两个绘制图元的方法： gl.drawArrays() 和 gl.drawElements() 图元 三角形 WebGL中绘制三角形有三种方式： gl.TRINGLES(独立三角形) 、 gl.TRINGLE_STRIP(三角形带) 、 glTRINGLE_FAN(三角形扇) 。 对于一系列点 (v0、v1、v2、......) ，独立的三角形每三个点组成一个三角形 ((v0,v1,v2)、(v2,v3,v4)、......) ；三角形带每次将当前三角形的后面两个顶点与下一个顶点组成三角形 ((v0,v1,v2)、(v1,v2,v3)、......) ；三角形扇除掉第一个顶点，后面的每两个顶点与第一个顶点组成三角形 ((v0,v1,v2)、(v0,v3,v4)、......) 。 线 WebGL中绘制线有三种方式： gl.LINES(独立线) 、 gl.LINE_STRIP(线带) 、 gl.LINE_LOOP(线环) 。 对于一系列点 (v0、v1、v2、......) ，独立线每两个点组成一条线 ((v0,v1)、(v2,v3)、......) ；线带每次将当前线的后面一个顶点与下一个顶点组成三角形 ((v0,v1)、(v1,v2)、......) ；线环与线带类似

看到第四课，发现好多知识需要了解，所以应该进行系统性顺序性的学习了.参考《webGL编程指南》 webGL入门知识 浏览器支持html5之后，可以创建canvas,并调用js进行二维图形的绘制。 要使用webGL绘制图形，必须使用着色器。着色器是webGL的核心机制。 drawArrays函数说明： 屏幕上点转换成webGL坐标系中的点,参照下图所示 依据平面坐标系转换公式进行坐标转换 x ′ = ( x − x 0 ) cos θ − ( y − y 0 ) sin θ //--> y ′ = ( x − x 0 ) sin θ + ( y − y 0 ) cos θ //--> 其 中 ， x 0 , y 0 表 示 新 坐 标 系 原 点 在 原 坐 标 系 原 点 ; θ 表 示 坐 标 系 转 角 ; x ′ , y ′ 表 示 新 坐 标 系 中 的 坐 标 //--> 首先将屏幕上的点P转换到cavans坐标系下。 x ′ = ( x − a ) ; y ′ = ( y − b ) , ( a , b ) 为 c a n v a s 在 屏 幕 上 左 上 角 位 置 //--> 将P点转换到webGL坐标系中。 webGL坐标系相对于canvas坐标系y轴方向相反。 webGL坐标系原点在原来canvas坐标系中的坐标为(w/2,h/2)。 x ′′ = ( x ′

绘制多个点 1、通过变量来传递顶点坐标，获取顶点坐标变量的位置 var a_Position = gl.getAttribLocation(program, ‘a_Position’) 2、传入变量坐标 gl.vertexAttrib3f(a_Position, x, y, z) 3、canvas坐标系转为webgl坐标系，webgl的坐标是x[-1, 1]，y[-1, 1] var VERTEX_SOURCE = `attribute vec4 a_Position;\n void main() {\n gl_Position = a_Position;\n gl_PointSize = 10.0;\n }\n` ; var FRAGMENT_SOURCE = `void main() {\n gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);\n }\n` ; function main ( ) { var canvas = document . querySeletor ( '#webgl' ) ; var gl = canvas . getContext ( 'webgl' ) || canvas . getContext ( 'experimental-webgl' ) ; var vertexShader = gl .

最近在研究一位大神用webgl写的三维地图引擎，在研究源码的过程中学到了很多以前没注意到的东西，特地在此记录一番 平常WebGL渲染的时候，如果顺过来看的话，坐标转换会经过如下几个过程 局部坐标=>世界坐标=>观察坐标=>裁剪坐标=>标准设备坐标=>屏幕坐标 就是我们平常说的MVP矩阵，对于这些细节如果还不清楚的话， 可以看看的这篇文章，讲的很清楚 这里就不多说了，如果哪天需要知道“当前鼠标电机的那个点，对应的三维坐标是多少干怎么办呢？”也就是说当前屏幕坐标所对应的世界坐标是多少？ 这里我们需要将这个过程反过来： 当我们鼠标点击这个屏幕时，通过JavaScript获取到的当前坐标为： event.clientX 和 event.clientY ，这个是屏幕坐标，之后我们需要将它转换为标准化设备坐标，此时X，Y坐标都需要映射到（-1，1）的范围内，此时的公式为： _mouse .x = ( event .clientX / _domElement .width ) * 2 - 1 ; _mouse .y = - ( event .clientY / _domElement .height ) * 2 + 1 ; 之后，三维中的顶点坐标数据都是需要有“深度”的，也就是Z值，这个我们可以认为的加一个Z，比如0.5.（当然，你也可以使用WebGL提供的函数 GLReadPixels ）

学习交流欢迎加群：789723098，博主会将一些demo整理共享 今天和大家分享一个用WebGL画矩形(rectangle)的小Demo,也可用来绘制三角形(triangle)。本文适用于初学者掌握WebGL的基本绘图知识，WebGL是OpenGL的Web版本，所以它的绘图过程与OpenGL是一样的，这里不赘述，大家自行百度。 今天分享的是绘制一个二维的图形--矩形；二维是三维的基础，二维图像的Z=0，由此，先掌握二维图像的绘制，再向三维拓展，自然水到渠成。废话不多说，直接进入正题。 首先，webgl不能直接画彩色矩形的，但webgl可以直接画三角形，画三角形有三种画法，分别是：gl.TRIANGLES、gl.TRIANGLE_STRIP、gl.TRIANGLE_FAN,如下图所示。 本文用到的的是第二种绘制三角形的方法gl.TRIANGLE_STRIP，一定要特别注意，其绘制的顶点顺序为（v0,v1,v2）,(v2,v1,v3),由此得到两个三角形拼凑成一个矩形。详细过程示意图如下图： 第三种方法gl.TRIANGLE_FAN也可以达到目的，但顶点的顺序要稍微调整一下，（v0,v1,v2）,（v0,v2,v3）。 程序运行结果如下图： 上面是相关原理和运行结果，接下来直接上代码： triangle.js /** * Created by wjh on 2017/6/26. */

案例查看地址： 点击这里 相对于平移来说，WebGL的选择就复杂一些，能够旋转，首先你要指明： 1.旋转轴：你要指明通过哪个轴进行旋转 2.旋转方向：逆时针还是顺时针旋转 3.旋转的角度 如下图这种，逆时针选择通过z轴旋转，为正旋转。那我们怎么通过这些所知的内容，求出旋转后的顶点的坐标呢？ p和p'是老点的位置和新点的位置，r是距离原点的距离，α是p点距离x轴的角度，β是选中的角度。 1.首选求出p点和x相交的角度a，旋转后两个点距离旋转轴原点距离都是相同的，所以r的长度可以确定。 2.得知α的度数以后，就能得到旋转后的p'点和x轴的角度。 3.然后再通过三角函数计算出旋转后的p'点的x坐标和y坐标。 首先通过： 推理出来： cos a = x/r; sin a = y/r; cos(a+b) = x'/r; sin(a+b) = y'/r; 换个角度： r = x/cos a; r = y/sin a; x' = r*cos(a+b); y' = r*sin(a+b); 然后通过： 得到： x' = r*(cos a * cos b - sin a * sin b); y' = r*(sin a * cos b + cos a * sin b); x' = r*cos a * cos b - r*sin a * sin b; y' = r*sin a*cos b + r*cos

var canvasElement=document.getElementById('webgl'); var gl=canvasElement.getContext('webgl'); //顶点着色器源码 var vertexShaderSource = '' + 'attribute vec4 a_Position;'+//顶点位置坐标 'attribute vec2 a_TexCoord;' +//纹理坐标 'varying vec2 v_TexCoord;'+//插值后纹理坐标 'void main(){' + 'gl_Position = a_Position;' +//逐顶点处理 'v_TexCoord = a_TexCoord;' +//纹理坐标插值计算 '}'; //片元着色器源码 var fragShaderSource = '' + 'precision highp float;' +//所有float类型数据的精度是lowp 'varying vec2 v_TexCoord;'+//接收插值后的纹理坐标 'uniform sampler2D u_Sampler;' +//纹理图片像素数据 'void main(){' + //采集纹素 'vec4 texture = texture2D(u_Sampler,v_TexCoord);' + /

要想做彩色三角线必须知道uniform、attribute、varying这三个声明； uniform 表示一次渲染过程中保存不变的 attribute 表示是实时在改变的 varying 用来着色器之间的通讯,也就是顶点着色器和片段着色去之间的桥梁 还需要注意的是varying 在顶点和片元着色器两个中都声明一个一样的变量;那么它就会自动默认，两个有关系，但并不是相同的；片元着色器中得到的varying 是经过插值运行得到后的值；要想改变三角形的颜色，就得改变顶点颜色，它是通过顶点的颜色，来进行计算的；就以线来说：两个顶点的颜色不同，那么中间的颜色怎么办，只能通过两端点的颜色进行插值计算；怎么插值，就像渐变一样，想象一下，在取色器中，连接任意两个点，它是不是是以一种渐变的方式进行变化；这些计算方式都是渲染管进行自动计算，你只需要把顶点额颜色传入； 代码如下： <!DOCTYPE html > < html lang= "en" > < head > < meta charset= "UTF-8" > < title > 多彩三角形 </ title > < script src= "../js/minMatrix.js" ></ script > < script id= "vs" type= "x-shader/x-vertex" > attribute vec3

在WebGL中，如果我们想实现更高级的动态场景，或者是对物体进行坐标变换，那么旋转、平移和缩放必不可少。这些变换所涉及的是一些矩阵运算，先从二维平面讲起，再推导至三维空间。下面分别对这几种变换进行一个讲解： 学习交流欢迎加群：789723098，博主会将一些demo整理共享 1 旋转变换 试想一下，如果当一个场景只是静态的，没有动画，那将是多么令人乏味的画面，而旋转变换的加入将会使场景的动画效果更具观赏性。如下图所示，表示点(x, y)绕原点旋转一定角度后到达新的位置，假设原点到想（x, y）半径为R。可参考我另一篇博客的完整示例，绘制一个旋转的彩色立方体： 点击打开链接 图中的关系可由系列式子计算： 由上面的公式，上述坐标的矩阵表达形式为： 将其推广至三维空间，并用其次坐标表示出来，称为旋转矩阵： 绕x轴旋转： 绕y轴旋转： 绕z轴旋转 2 平移变换 平移是将点沿着指定的方向移动一段距离，即在原有坐标的基础上，再分别给x,y,z加上Tx,Ty,Tz；其示意图如下所示： 平移矩阵如下： 3 缩放变换 顾名思义，缩放即对图形的放大缩小，其示意图如下所示： 缩放的原理是在原有坐标的基础上乘一个缩放因子： 其缩放矩阵如下： 以上就是WebGL中常用的三种变换，具体的代码实现在我的另一篇微薄上： 点击打开链接 。 里面实现了一个可用键盘和鼠标交互的可旋转立方体。 来源： CSDN 作者：