一起学 WebGL

大家好，我是前端西瓜哥。 前面讲了视图矩阵，可以让我们像摄像机一样，在特定视点去观察模型，但还有个问题，就是它并没有近大远小的透视效果。 对此我们需要引入 透视投影（Perspective Proje

大家好，我是前端西瓜哥。之前教大家绘制一个红色的三角形，这次我们来画个有渐变的三角形。 原来的写法，颜色是在片元着色器中写死的，这次我们来像传顶点数据一样，声明一个颜色数据传递过去。 颜色需要在片元着

大家好，我是前端西瓜哥。之前讲了平移矩阵、旋转矩阵以及缩放矩阵，以及演示了在 WebGL 中的单独应用的效果。 这次我们看看同时进行多次矩阵变换的组合写法。 我们将会对一个三角形先平移，然后旋转。 矩

大家好，我是前端西瓜哥。之前绘制的图形都是在 XY 轴所在的平面上，这次我们来加入一点深度信息 z，带你走入三维的世界。 视图矩阵 对于一个立方体来说，我们从它的正前方看，不管距离它多远，也只能看到一

大家好，我是前端西瓜哥。之前讲解了如何用 WebGL 绘制红色三角形，今天西瓜哥带大家来学习如何将图片绘制到画布上的技术：纹理映射（texture mapping）。 纹理映射会根据纹理图像，将光栅化

嗨，大家好呀，我是你们的前端西瓜哥啊。上一节我们学习了 视图矩阵，通过它我们可以像一个自由的摄像机一样，可以在三维世界的任意位置观察目标模型，但也遇到了一些问题。 其中一个问题就是，在超过某个临界值时

大家好，我是前端西瓜哥。 之前我们绘制三角形，是一个二维的图形。 现在我们来绘制一个立方体，其实本质和绘制二维图形是一样，也是绘制三角形，只是绘制很多个，然后组合起来，作为立方体的几个面，拼在一起就是

大家好，我是前端西瓜哥，今天我们来了解 WebGL 的纹理对象（Texture） 纹理对象，是将像素（texels）以数组方式传给 GPU 的对象，常见场景是贴图，就是将图片的数据应用到 3D 物体上

大家好，我是前端西瓜哥，今天来说说 WebGL 中的三种图元。 在 WebGL 中，图元有三种：点、线、以及三角形。 绘制的 API 为： 这里的 mode 就是要绘制的图元类型。 我们绘制 4 个点

大家好，我是前端西瓜哥。画了好几章节的点，这次我们来画三角形了。 《一起学 WebGL：绘制一个点》 三角形可太重要了，再复杂的三维模型都是由一个个小三角形组合而成，越多越精细越真实。 绘制三角形 这

之前绘制了三角形，我们现在给它做一个变形操作。 对一个三角形进行变形，其实就是重新这个三角形的三个顶点的位置，计算完后再绘制出来，相比原来就发生了变形。 变形常见的有位移、选择、缩放。位移，其实就是给

大家好，我是前端西瓜哥，今天我们来学习 WebGL。 WebGL 的世界坐标系是三维的。默认使用笛卡尔坐标系的右手坐标系，满足右手定则，即 x 轴向右，y 轴向上，z 轴向着观察者，原点位于画布中心。

大家好，我是前端西瓜哥。 本文讲解如何用 WebGL 绘制一个点。 WebGL WebGL 是浏览器支持的一种绘制图形的 API，是一个标准。我们可以通过 Canvas 元素 在网页的特定区域绘制 2

大家好，我是前端西瓜哥。上一篇文章讲解了如何绘制一个点。但这个点的信息是写死在渲染器源码中的，也就是硬编码。 如果我们要频繁地改变点的位置去绘制，根据我们之前学到的知识点，那只能通过替换整个着色器代码

大家好，我是前端西瓜哥，上一章我们用 attribute 变量，从外部设置顶点着色器中点的位置信息。 这次我们把目光投向片元着色器，通过片元着色器修改点的颜色。 片元着色器 片元着色器的代码改一下：