其他章节请看：webgl系列绘制一个点我们初步认识了webgl，本篇主要围绕绘制一个点的示例，逐步实现下面功能：点的位置从js传入着色器点的大小由js传入着色器通过鼠标点击绘点通过鼠标点击绘点，并改变点的颜色绘制一个点（版本2）需求在上篇中我们在canvas中心绘制了一个点（效果如下），但这点的位置是直接写在顶点着色器中gl_Position=vec4(0.0,0.0,0.0,1.0);。需求：点的位置从js传入着色器思路将位置信息从js传入着色器有两种方式：attribute变量、uniform变量attribute-传输的是那些与顶点相关的数据uniform-传输的是那些对于所有顶点都相同
其他章节请看：webgl系列绘制一个点我们初步认识了webgl，本篇主要围绕绘制一个点的示例，逐步实现下面功能：点的位置从js传入着色器点的大小由js传入着色器通过鼠标点击绘点通过鼠标点击绘点，并改变点的颜色绘制一个点（版本2）需求在上篇中我们在canvas中心绘制了一个点（效果如下），但这点的位置是直接写在顶点着色器中gl_Position=vec4(0.0,0.0,0.0,1.0);。需求：点的位置从js传入着色器思路将位置信息从js传入着色器有两种方式：attribute变量、uniform变量attribute-传输的是那些与顶点相关的数据uniform-传输的是那些对于所有顶点都相同
其他章节请看：webgl系列三角形有人说三维模型的基本单元是三角形。比如复杂的游戏角色，也只是用许多三角形画出来的。不管上述说法是否属实，本篇先把三角形画出来。如何绘制一个三角形鼠标点击绘点示例我们写了这样的代码：points.forEach(item=>{gl.vertexAttrib3f(a_Position,item.x,item.y,0.0);gl.drawArrays(gl.POINTS,0,1);})这种方法一次只能绘制一个点。比如需要绘制一个三角形，应该是一个连贯的动作。比如在顶点着色器中一次性画三个点，然后用线连接；而不是绘制一个点，在绘制一个点，在绘制一个点...，不应该是零
其他章节请看：webgl系列三角形有人说三维模型的基本单元是三角形。比如复杂的游戏角色，也只是用许多三角形画出来的。不管上述说法是否属实，本篇先把三角形画出来。如何绘制一个三角形鼠标点击绘点示例我们写了这样的代码：points.forEach(item=>{gl.vertexAttrib3f(a_Position,item.x,item.y,0.0);gl.drawArrays(gl.POINTS,0,1);})这种方法一次只能绘制一个点。比如需要绘制一个三角形，应该是一个连贯的动作。比如在顶点着色器中一次性画三个点，然后用线连接；而不是绘制一个点，在绘制一个点，在绘制一个点...，不应该是零
其他章节请看：webgl系列渐变三角形本文通过一个渐变三角形的示例逐步分析：varying变量、合并缓冲区、图形装配、光栅化、varying内插绘制三个点v1需求：绘制三个相同颜色的点，效果如下：通过三角形的学习，这个需求非常容易实现。代码如下：constVSHADER_SOURCE=`attributevec4a_Position;voidmain(){gl_Position=a_Position;gl_PointSize=10.0;}`constFSHADER_SOURCE=`voidmain(){gl_FragColor=vec4(1.0,0.0,0.0,1.0);}`functionm
其他章节请看：webgl系列渐变三角形本文通过一个渐变三角形的示例逐步分析：varying变量、合并缓冲区、图形装配、光栅化、varying内插绘制三个点v1需求：绘制三个相同颜色的点，效果如下：通过三角形的学习，这个需求非常容易实现。代码如下：constVSHADER_SOURCE=`attributevec4a_Position;voidmain(){gl_Position=a_Position;gl_PointSize=10.0;}`constFSHADER_SOURCE=`voidmain(){gl_FragColor=vec4(1.0,0.0,0.0,1.0);}`functionm
其他章节请看：webgl系列变换矩阵和动画动画就是不停地将某个东西变换（transform）。例如将三角形不停地旋转就是一个动画和CSStransform类似，变换有三种形式：平移、缩放和旋转。简单的变换用普通表达式容易实现，如果事情复杂，比如旋转后平移，这时就可以使用变换矩阵。普通表达式平移比如要平移一个三角形，只需要将三个顶点移动相同的距离即可（这是一个逐顶点操作）用二维向量表示，就像这样：[x1,y1]+[tx1,ty2]=[x2,y2]比如要实现如下效果：前面我们已经讲过三角形了，这里不再冗余，改动的核心代码如下：constVSHADER_SOURCE=`attributevec4a_
其他章节请看：webgl系列变换矩阵和动画动画就是不停地将某个东西变换（transform）。例如将三角形不停地旋转就是一个动画和CSStransform类似，变换有三种形式：平移、缩放和旋转。简单的变换用普通表达式容易实现，如果事情复杂，比如旋转后平移，这时就可以使用变换矩阵。普通表达式平移比如要平移一个三角形，只需要将三个顶点移动相同的距离即可（这是一个逐顶点操作）用二维向量表示，就像这样：[x1,y1]+[tx1,ty2]=[x2,y2]比如要实现如下效果：前面我们已经讲过三角形了，这里不再冗余，改动的核心代码如下：constVSHADER_SOURCE=`attributevec4a_
序： 又是很久没出随笔文章了，一篇文章有时候整理一天，实在是抽不出来时间。 最近在回顾几年前的项目时，发现这个智慧三维消防可视化项目很有回顾价值，索性就拿出来讲讲。 首先，我们要知道消防里的知识，不是简简单单的几个灭火器，烟感报警器这么简单的，消防是自有一套完整体系的，光是消防相关的产业年产值就有几千个亿。而我们普通非专业人士常见的消防设备只是消防产业中的皮毛。 单是消防系统就可以分为很多类，常见的有消防给水系统、消火栓系统、自动喷水灭火系统、气体灭火系统、防烟排烟系统、火灾自动报警系统等等。这些系统内部的组成结构又各有不同。每个系统里就有几十个甚至上百个不同的消防设备。比如我们常见的
序： 又是很久没出随笔文章了，一篇文章有时候整理一天，实在是抽不出来时间。 最近在回顾几年前的项目时，发现这个智慧三维消防可视化项目很有回顾价值，索性就拿出来讲讲。 首先，我们要知道消防里的知识，不是简简单单的几个灭火器，烟感报警器这么简单的，消防是自有一套完整体系的，光是消防相关的产业年产值就有几千个亿。而我们普通非专业人士常见的消防设备只是消防产业中的皮毛。 单是消防系统就可以分为很多类，常见的有消防给水系统、消火栓系统、自动喷水灭火系统、气体灭火系统、防烟排烟系统、火灾自动报警系统等等。这些系统内部的组成结构又各有不同。每个系统里就有几十个甚至上百个不同的消防设备。比如我们常见的
