用户634140841972

课件地址 https://github.com/buglas/webgl-lesson 课前准备 安装webstorm 或vscode 开发工具。 安装live-serve...

课件地址：https://github.com/buglas/webgl-lesson 1-attribute 变量的概念。 回顾一下我们上一篇中点的定位： 这是一种将数据...

我们要用鼠标控制一个点的位置，首先要知道鼠标点在webgl 坐标系中的位置，这样才能让一个点出现在我们鼠标点击的位置。 接下来咱们就说一下如何获取鼠标点在webgl 坐标系...

首先我们要知道，限定颜色变量的限定符叫uniform。 uniform 翻译过来是一致、统一的意思。 接下来咱们说一下用js 控制顶点颜色的步骤。 1-用js 控制顶点颜色...

源码：https://github.com/buglas/webgl-lesson 1-用鼠标绘制圆形的顶点 星星的形状是圆形的，所以，我们需要绘制一个圆形的顶点。 dis...

源码：https://github.com/buglas/webgl-lesson 我们先看一下webgl是怎么画图的。 1.绘制多点 2.如果是线，就连点成线 3.如果是...

源码：https://github.com/buglas/webgl-lesson 在webgl 里所有的图形都是由顶点连接而成的，咱们就先画三个可以构成三角形的点。 这里...

源码：https://github.com/buglas/webgl-lesson 在数学中，我们知道，三个点可以确定一个唯一的三角面。接下来咱们画一下。 1-绘制三角面 ...

源码：https://github.com/buglas/webgl-lesson 在项目实战的时候，用户交互事件是必不可少的。因为事件是异步的，所以我们在绘图的时候，必须...

源码：https://github.com/buglas/webgl-lesson 接下来，我要在下图中绘制狮子座。 效果如下 1-产品需求 1-1-基本绘图需求 鼠标第1...

1-webgl三种面的适应场景 之前咱们说过，webgl 可以绘制三种面： TRIANGLES 单独三角形 TRIANGLE_STRIP 三角带 TRIANGLE_FAN ...

源码：https://github.com/buglas/webgl-lesson 对图形的平移就是对图形所有顶点的平移。 1-举个例子 已知： 顶点p(x,y,z) 在x...

源码：https://github.com/buglas/webgl-lesson 1-旋转的概念 三维物体的旋转要比位移复杂一点，因为三维物体的旋转需要知道以下条件： 旋...

源码：https://github.com/buglas/webgl-lesson 1-缩放的基本概念 缩放可以理解为对向量长度的改变，或者对向量坐标分量的同步缩放 已知：...

源码：https://github.com/buglas/webgl-lesson 矩阵（Matrix）是一个按照矩形纵横排列的复数集合。 矩阵就像一个矩形的阵盘，通过其中...

源码：https://github.com/buglas/webgl-lesson 矩阵相乘可以实现复合变换，就比如先位移再旋转、先旋转在位移，或着连续位移。 接下来咱们先...

通过实践，我们可以很容易的找到复合变换的规律。 接下咱们先写一个简单复合变换：位移加位移。 1-位移加位移 接下来我想让一个物体沿x 轴位移ax，沿y 轴位移ay后，再沿x...

源码：https://github.com/buglas/webgl-lesson 视图矩阵是用于确定相机角度和位置的矩阵。 1-相机的定义 视点：相机的位置 视线方向：相...

在我们给了物体一个视图矩阵后，我们还可以再给它一个模型矩阵。 模型矩阵可以对物体进行位移、旋转、缩放变换。 比如我们想让物体沿z 旋转。 1.在顶点着色器中添加一个模型矩阵...