其他章节请看: webgl 系列 变换矩阵和动画 动画就是不停地将某个东西变换(transform).例如将三角形不停地旋转就是一个动画 和 CSS transform 类似,变换有三种形式:平移.缩放和旋转. 简单的变换用普通表达式容易实现,如果事情复杂,比如旋转后平移,这时就可以使用变换矩阵. 普通表达式 平移 比如要平移一个三角形,只需要将三个顶点移动相同的距离即可(这是一个逐顶点操作) 用二维向量表示,就像这样:[x1, y1] + [tx1, ty2] = [x2, y2] 比如要实现…

其他章节请看: webgl 系列 渐变三角形 本文通过一个渐变三角形的示例逐步分析:varying变量.合并缓冲区.图形装配.光栅化.varying 内插 绘制三个点v1 需求:绘制三个相同颜色的点,效果如下: 通过三角形的学习,这个需求非常容易实现.代码如下: const VSHADER_SOURCE = ` attribute vec4 a_Position; void main() { gl_Position = a_Position; gl_PointSize = 10.0; } ` c…

其他章节请看: webgl 系列 绘制猫 上文我们了解了如何绘制渐变彩色三角形,明白了图形装配.光栅化,以及片元着色器计算片元的颜色. 现在如果让你绘制如下一只猫.难道绘制很多三角形,然后指定它们的颜色?那样简直太难.太繁琐了. 这时可以使用三维图形学中的纹理映射技术来解决这个问题. 纹理映射简单来讲就是将一张图映射(贴)到一个几何图形的表面. 例如这样: 本篇最后将实现如下效果: 渐变矩形 根据渐变三角形,我们很容易就可以绘制一个渐变矩形.就像这样: 完整代码如下: const VSHADER…

其他章节请看: webgl 系列 着色器语言 本篇开始学习着色器语言 -- GLSL全称是 Graphics Library Shader Language (图形库着色器语言) GLSL 是一门独立的语言,和其他语言一样有自己的变量.运算符.函数.循环(for).控制语句(if).函数.数组等等. GLSL 比较简单.其专门用于编写着色器,舍弃了许多编程语言中复杂的东西,比如没有字符串,只有数字. Tip: webgl 1.0 绝大多数浏览器都支持,webgl 2.0 支持度差些.webgpu…

初识 WebGL 什么是 WebGL webgl 在支持 canvas 的浏览器中进行 2d 或 3d 渲染. webgl 程序除了有 Html.javascript,还需要加入着色器语言(GLSL ES). WebGL 使得网页在支持 HTML <canvas> 标签的浏览器中,不需要使用任何插件,便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行 3D 渲染 -- MDN WebGL 教程 通过 caniuse 得知 webgl(98.15%) 和 webgl…

绘制一个点 我们初步认识了 webgl,本篇主要围绕绘制一个点的示例,逐步实现下面功能: 点的位置从 js 传入着色器 点的大小由 js 传入着色器 通过鼠标点击绘点 通过鼠标点击绘点,并改变点的颜色 绘制一个点(版本2) 需求 在上篇中我们在canvas中心绘制了一个点(效果如下),但这点的位置是直接写在顶点着色器中 gl_Position = vec4(0.0, 0.0, 0.0, 1.0); . 需求:点的位置从 js 传入着色器 思路 将位置信息从 js 传入着色器有两种方式:attri…

WEBGL 2D游戏引擎研发系列 第一章 <新的开始> ~\(≥▽≤)/~HTML5游戏开发者社区(群号:326492427) 转载请注明出处:http://html5gamedev.org/ 目录 HTML5 2D游戏引擎研发系列  第一章 <一切的开始> HTML5 2D游戏引擎研发系列 第二章 <磨剑> HTML5 2D游戏引擎研发系列 第三章 <Canvas技术篇-画布技术-显示图片> HTML5 2D游戏引擎研发系列 第四章 <Canvas技…

WebGL 踩坑系列-3 绘制球体 在 WebGL 中绘制物体时需要的顶点是以直角坐标表示的, 当然了,gl_Position 是一个四维的向量,一般将顶点赋值给 gl_Position 时,最后一维会设为 1, gl_Position = uMVPMatrix * vec4(aVertexPosition, 1.0); 这个时候的 aVertexPosition 三维向量就代表了顶点的直角坐标. 如果我们计算出球面上的顶点,并以直角坐标的形式传入着色器中,用合适的方式绘制,就能画出球面了. 但…

webgl智慧楼宇发光效果算法系列之高斯模糊 如果使用过PS之类的图像处理软件,相信对于模糊滤镜不会陌生,图像处理软件提供了众多的模糊算法.高斯模糊是其中的一种. 在我们的智慧楼宇的项目中,要求对楼宇实现楼宇发光的效果. 比如如下图所示的简单楼宇效果: 楼宇发光效果需要用的算法之一就是高斯模糊. 高斯模糊简介 高斯模糊算法是计算机图形学领域中一种使用广泛的技术, 是一种图像空间效果,用于对图像进行模糊处理,创建原始图像的柔和模糊版本. 使用高斯模糊的效果,结合一些其他的算法,还可以产生发光,光晕…

目前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积攒了一些从零开始搭建 WebGL 地图引擎的微薄经验,虽然最终遗憾没有上线,但在其中学到的一些WebGL知识还是值得分享一下.WebGL 可以说是前端可视化技术领域难度最大的一项图形编程技术,所以今天就结合 WebGIS 这个话题顺带分享一些 WebGL 的相关知识,不会太深入,很细节的技术点在后续…