用户3457323274921

什么是渲染管线 如果你之前接触过图形学或者接触过WebGL，你一定多少听说过GPU的渲染管线。在图形学中，我们如何把3D信息转换成屏幕的2D图像，本文会给你建立一个大体的认...

前言 大家好，我是林三心，相信大家在日常开发中都用过Promise，我一直有个梦想，就是以最通俗的话，讲最复杂的知识，所以我把通俗易懂放在了首位，今天就带大家手写实现以下P...

初识 WebGL 之 渲染管线篇，主要介绍 WebGL 程序是如何使得开发者介入渲染管线流程中并完成开发的。...

纹理，通常指的就是二维的栅格图像，我们可以将其作为webgl图形的贴图。 而在webgl 里，还有一个纹理对象的概念，它是对图像又做了一层封装，这个我们后面会详解。 接下来...

源码：https://github.com/buglas/webgl-lesson 1-绘制彩色三角形 我们可以用独立三角形绘图。 效果如下： 为什么会画出一个具有三种颜色...

1-多attribute变量的概念 接下来我们先通过一个问题来引出多attribute变量的概念和作用。 问题：如何一次性绘制三个不同颜色的点。 我们之前说“js与着色器间...

源码：https://github.com/buglas/webgl-lesson 在视图矩阵中，我们可以将算法和艺术相融合，让它充满乐趣。 就像下面的顶点，就是我通过三角...

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

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

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

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

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

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

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

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

源码：https://github.com/buglas/webgl-lesson 前言 我当前的WebGl案例因为各种原因，没有使用任何前端框架，直接干写的。 这也就导致...