为了更好在vscode的webGL开发体验，本文将从vscode插件和手写一个node插件，几分钟让你可以快速提高几倍的书写效率，从此告别glsl书写的恐惧症。

引子 本以为可以开始尝试三维的效果了，查了一下资料之后发现要先了解矩阵。在这里集中收集一下相关基础知识点。 Origin My GitHub 简介 简单来说，矩阵（Matrix）是数字按行和列的矩形排

早期的OpenGL为了将模型的顶点数据传送到显卡，需要逐个顶点进行（冗余处理的问题），如果还需要额外的信息（纹理坐标和法线）的话，当模型比较复杂时，将导致大量函数的调用，传输开销是相当大的！为了解决这个问题引入了VBO(Vertex Buffer Object)，VBO可以将顶…

vertex shader 几个实例，sin 直线等等，通过这些可以更加熟悉vertex shader 的编写。

在两个值之间取埃尔米特插值（Hermite interpolation）link，它的值永远是 0~1。 描述：在edge0和edge1之间取一个平缓的差值，在我们需要一个平滑的渐变的时候特别有用。当前值小于edge0，取值为0。当前值大于edge1，取值1。在这个区间内，取e…

WebGL 作为非常底层的 API，学习上手难度非常大，这是因为 WebGL 要求的背景知识比较多。而网上的教程一般没有过多介绍直接就介绍 API 开始渲染了，容易让人云里雾里，很容易被劝退，就算学到

介绍 WebGL 是一种基于 Web 的图形渲染技术，它允许在浏览器中使用 JavaScript 和 OpenGL ES API 创建 3D 和 2D 图形，而无需插件或其他软件。 通过 WebGL，

看完小白也能几分钟上手的webgl。大部分公司的都会有可视化的需求，但是用echarts，antv等图表库，虽然能快速产出，但如果知道webgl的原理，你会对canvas和svg有新的认知。

我在前端干工地，最后成果如下图。 从图中可以看到，整个画面由以下构成 地面 房子 天空 下面就能一步步的构建这个场景。 一、 准备工作 我这里的环境是vue3 + vite，基本环境准备好后就要安装t