前端可视化

这一章我们来讲解webgl中的光照概念，我们来先讲解一下平行光源，接下来的文章讨论点光源和聚光灯。 平行光源和法向量 假如没有光照，我们就什么都看不到，在不考虑反射的情况下，我们认为物体是漫发射，光线

这一节我们来介绍透视投影，那什么是透视投影呢？和我们说的正射投影有什么不同呢？在现实生活中距离我们越远的物体就看起来越小，这就是透视投影，就是在z轴方向上，距离我们越远的物体，在表现上来说就越小，这一

从这篇文章开始我们就可以看到3D图像，我们正式进入3D的世界。 上一节我们介绍了2D图形的旋转，缩放，和平移，也就是说绘制的点是固定的，我们通过修改变换矩阵达到变换的目的。我们继续沿着这个思路绘制3D

本篇文章的内容假定你懂的矩阵的基本知识，例如线性变换，其次坐标，平移矩阵等知识。 有了二维变换的知识，我们就可以为三维变化做好准备。好戏开场了，我们先来画一个，字母E如图： 代码地址https://g

这一篇文章将会比较硬核，主要讲解着色器和GLSL语言，内容比较枯燥，我将尽量用通俗易懂的话讲解。在上一节我们提到webgl每次绘制都需要两个着色器，顶点着色器和片元着色器，一个顶点着色器和一个片元着色

看过上一节的内容，应该对webgl有了大概的认识，但还是有的模糊不清。这一节内容关键来讲解一下，buffer和attribute，webgl怎么使用buffer，怎么给对应的顶点赋值的。 attrib

用GPU的强大性能WebGL（Web Graphics Library）是在浏览器中渲染交互的3D图形引擎，使得前端程序员能够利用GPU的强大性能，创造出丰富的视觉体验。 渲染流程   它利用GLSL

需求说明 这个需求以后会是常用的，随着大模型的不断推进，大模型的需求开发会越来越多，今天就写一个简单的dom来模拟大语言模型的输出效果。

在前端可视化的项目中，一般常用的echarts,height.js等组件库，就可以满足需求，对于更加复杂的图形，需要图形库支持更加底层的api，这样就更加灵活。D3库提供了更加底层的图形控制能力

想要彻底理解和使用该滤镜还是需要好好研究一下的，但是如果真正理解和会使用这个滤镜，那么就可以生成一些例如云彩，火焰，大理石纹理，等绚烂图案。本篇文章我们一起研究一下这个滤镜，在文章的后面再分享一些该滤

我们前面讲述的svg的各种滤镜，有图像模糊，添加阴影，修改图像颜色，增加光照，图像合成叠加滤镜。前面的滤镜均不会改变像素自身的位置。feDisplacementMap滤镜是修改像素的位置。常见的应用是

feImage 这个滤镜比较好理解就是在滤镜中增加图片，这个滤镜一般不会单独使用，而是配合其他滤镜一起使用。语法如下： 有一点需要注意 该滤镜不能添加width和高度属性，否则会无法显示，不知道为什么

这一节我们来学习一下svg光照滤镜,这个css中没有的。下面我们详细解释一下svg的光照,如果使用个过three.js做3D效果的同学,都知道three中也有光照效果,我感觉道理是相通的。 光照

这一节我们只讲一个svg滤镜feColorMatrix滤镜，该滤镜有两个属性：type和values。type可以取的值有：matrix，hueRotate，saturate，luminanceToA

从人的感官上来讲，图像可以是人们感情的表达。所以人们有时需要图像模糊，图像的浮雕效果。svg中使用滤镜来达到这种效果。svg中有多种滤镜，并且滤镜间还能组合，有些滤镜本身就比较复杂，所以我们分成多章节

图片边缘模糊 看如下效果： 可以使用svg的mask配合渐变色实现代码如下： 当然使用css的内阴影也可以实现类似的效果： svg的适用场景是什么呢？其实做过就会发现，用svg做显示的数字比较好控制，

背景 svg背景可以对照css的background学习，但是css对背景的控制更加精细，其实叫做svg背景并不准确，叫做svg图案应该更好，svg背景使用pattern元素，相当于css的backg

这篇文章的目的并不是让大家对svg动画有什么深刻的认识，因为对于前端开发来说使用css动画还是比较习惯的，并且css动画可以控制svg的属性，具体的实践过程中完全可以使用css动画替换svg动画。这篇

项目中只是使用svg变换能做出的效果是有限的，项目中主要是svg的css的结合使用，css可以控制svg的属性，svg的属性可以使用css动画和过渡，这个两点是关键的。下面是三个例子希望能在实际项目过

本片文章主要介绍svg的坐标系统和变换，以及这些变换和矩阵的关系，对变换矩阵做了详细的解释。说明了svg和css变换矩阵的关系。