随笔分类 -  webgl

webgl 系列 —— 着色器语言
摘要：其他章节请看： webgl 系列 着色器语言 本篇开始学习着色器语言 —— GLSL全称是 Graphics Library Shader Language （图形库着色器语言） GLSL 是一门独立的语言，和其他语言一样有自己的变量、运算符、函数、循环(for)、控制语句（if）、函数、数组等等。 阅读全文
posted @ 2023-03-28 16:43 彭加李 阅读(853) 评论(0) 推荐(0)
webgl 系列 —— 绘制猫
摘要：其他章节请看： webgl 系列 绘制猫 上文我们了解了如何绘制渐变彩色三角形，明白了图形装配、光栅化，以及片元着色器计算片元的颜色。 现在如果让你绘制如下一只猫。难道绘制很多三角形，然后指定它们的颜色？那样简直太难、太繁琐了。 这时可以使用三维图形学中的纹理映射技术来解决这个问题。 纹理映射简单来 阅读全文
posted @ 2023-03-20 19:49 彭加李 阅读(385) 评论(0) 推荐(0)
webgl 系列 —— 渐变三角形
摘要：其他章节请看： webgl 系列 渐变三角形 本文通过一个渐变三角形的示例逐步分析：varying变量、合并缓冲区、图形装配、光栅化、varying 内插 绘制三个点v1 需求：绘制三个相同颜色的点，效果如下： 通过三角形的学习，这个需求非常容易实现。代码如下： const VSHADER_SOUR 阅读全文
posted @ 2023-03-14 19:55 彭加李 阅读(408) 评论(0) 推荐(0)
webgl 系列 —— 变换矩阵和动画
摘要：其他章节请看： webgl 系列 变换矩阵和动画 动画就是不停地将某个东西变换（transform）。例如将三角形不停地旋转就是一个动画 和 CSS transform 类似，变换有三种形式：平移、缩放和旋转。 简单的变换用普通表达式容易实现，如果事情复杂，比如旋转后平移，这时就可以使用变换矩阵。 阅读全文
posted @ 2023-03-09 18:46 彭加李 阅读(677) 评论(0) 推荐(1)
webgl 系列
摘要：webgl 背景 工作所需... 目录 初识 WebGL 绘制一个点 三角形 变换矩阵和动画 渐变三角形 绘制猫 着色器语言 阅读全文
posted @ 2023-03-08 21:53 彭加李 阅读(278) 评论(0) 推荐(0)
webgl 系列 —— 三角形
摘要：其他章节请看： webgl 系列 三角形 有人说三维模型的基本单元是三角形。比如复杂的游戏角色，也只是用许多三角形画出来的。 不管上述说法是否属实，本篇先把三角形画出来。 如何绘制一个三角形 鼠标点击绘点示例我们写了这样的代码： points.forEach(item => { gl.vertexA 阅读全文
posted @ 2023-03-06 14:35 彭加李 阅读(372) 评论(0) 推荐(0)
webgl 系列 —— 绘制一个点（版本2、版本3、版本4、版本5）
摘要：其他章节请看： webgl 系列 绘制一个点 我们初步认识了 webgl，本篇主要围绕绘制一个点的示例，逐步实现下面功能： 点的位置从 js 传入着色器 点的大小由 js 传入着色器 通过鼠标点击绘点 通过鼠标点击绘点，并改变点的颜色 绘制一个点（版本2） 需求 在上篇中我们在canvas中心绘制了 阅读全文
posted @ 2023-03-01 14:27 彭加李 阅读(414) 评论(0) 推荐(1)
webgl 系列 —— 初识 WebGL
摘要：其他章节请看： webgl 系列 初识 WebGL 什么是 WebGL webgl 在支持 canvas 的浏览器中进行 2d 或 3d 渲染。 webgl 程序除了有 Html、javascript，还需要加入着色器语言（GLSL ES）。 WebGL 使得网页在支持 HTML <canvas> 阅读全文
posted @ 2023-02-27 09:56 彭加李 阅读(879) 评论(0) 推荐(1)