webgl 系列 —— 着色器语言

其他章节请看: webgl 系列 着色器语言 本篇开始学习着色器语言 —— GLSL全称是 Graphics Library Shader Language (图形库着色器语言) GLSL 是一门独立的语言,和其他语言一样有自己的变量、运算符、函数、循环(for)、控制语句(if)、函数、数组等等。 ...

webgl 系列 —— 绘制猫

其他章节请看: webgl 系列 绘制猫 上文我们了解了如何绘制渐变彩色三角形,明白了图形装配、光栅化,以及片元着色器计算片元的颜色。 现在如果让你绘制如下一只猫。难道绘制很多三角形,然后指定它们的颜色?那样简直太难、太繁琐了。 这时可以使用三维图形学中的纹理映射技术来解决这个问题。 纹理映射简单来 ...

webgl 系列 —— 渐变三角形

其他章节请看: webgl 系列 渐变三角形 本文通过一个渐变三角形的示例逐步分析:varying变量、合并缓冲区、图形装配、光栅化、varying 内插 绘制三个点v1 需求:绘制三个相同颜色的点,效果如下: 通过三角形的学习,这个需求非常容易实现。代码如下: const VSHADER_SOUR ...

html总结

HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox JavaScript: 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 DOM、 ...

webgl 系列 —— 变换矩阵和动画

其他章节请看: webgl 系列 变换矩阵和动画 动画就是不停地将某个东西变换(transform)。例如将三角形不停地旋转就是一个动画 和 CSS transform 类似,变换有三种形式:平移、缩放和旋转。 简单的变换用普通表达式容易实现,如果事情复杂,比如旋转后平移,这时就可以使用变换矩阵。 ...

webgl 系列 —— 三角形

三角形 有人说三维模型的基本单元是三角形。比如复杂的游戏角色,也只是用许多三角形画出来的。 不管上述说法是否属实,本篇先把三角形画出来。 如何绘制一个三角形 鼠标点击绘点示例我们写了这样的代码: points.forEach(item => { gl.vertexAttrib3f(a_Positio ...

Canvas、客户端、表单

Canvas var canvas = document.querySelector('.myCanvas'); var width = canvas.width = window.innerWidth; var height = canvas.height = window.innerHeight ...

webgl 系列 —— 初识 WebGL

初识 WebGL 什么是 WebGL webgl 在支持 canvas 的浏览器中进行 2d 或 3d 渲染。 webgl 程序除了有 Html、javascript,还需要加入着色器语言(GLSL ES)。 WebGL 使得网页在支持 HTML <canvas> 标签的浏览器中,不需要使用任何插件 ...

记录--uni-app实现京东canvas拍照识图功能

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 最近公司出了一个新的功能模块(如下图),大提上可以描述为实现拍照完上传图片,拖动四方框拍照完成上传功能,大体样子如下图。但是我找遍了 dcloud 插件市场,找到的插件都是移动背景图片来实现裁剪的,跟京东的功能是相反的,没办法只能自己来实 ...