前端4种渲染技术的计算机理论基础

发布网友 发布时间：2024-09-05 18:02

我来回答

共1个回答

热心网友 时间：2024-10-09 11:47

前端可用的渲染技术有html+css、canvas、svg、WebGL，我们会综合运用这些技术来绘制页面。有没有想过这些技术有什么区别和联系，它们和图形学有什么关系呢？

本文我们就来谈一下网页渲染技术的计算机理论基础。

人眼的视网膜有视觉暂留机制，也就是看到的图像会继续保留0.1s左右，图形界面就是根据这个原理来设计的一帧一帧刷新的机制，要保证1s至少要渲染10帧，这样人眼看到画面才是连续的。

每帧显示的都是图像，它是由像素组成的，是显示的基本单位。不同显示器实现像素的原理不同。

我们要绘制的目标是矩形、圆形、椭圆、曲线等各种图形，绘制完之后要把它们转成图像。图形的绘制有一系列的理论，比如贝塞尔曲线是画曲线的理论。图形转图像的过程叫做光栅化。这些图形的绘制和光栅化的过程，都是图形学研究的内容。

图形可能做缩放、平移、旋转等变化，这些是通过矩阵计算来实现的，也是图形学的内容。

除了2D的图形外，还要绘制3D的图形。3D的原理是把一个个三维坐标的顶点连起来，构成一个一个三角形，这是造型的过程。之后再把每一个三角形的面贴上图，叫做纹理。这样组成的就是一个3D图形，也叫3D模型。

3D图形也同样需要经历光栅化变成二维的图像，然后显示出来。这种三维图形的光栅化需要找一个角度去观察，就像拍照一样，所以一般把这个概念叫做相机。

同时，为了3D图形更真实，还引入了光线的概念，也就是一束光照过来，3D图形的每个面都会有什么变化，怎么反射等。不同材质的物体反射的方式不同，比如漫反射、镜面反射等，也就有不同的计算公式。一束光会照射到一些物体，到物体的反射，这个过程需要一系列跟踪的计算，叫做光线追踪技术。

我们也能感受出来，3D图形的计算量比2D图形大太多了，用CPU计算很可能达不到1s大于10帧，所以后面出现了专门用于3D渲染加速的硬件，叫做GPU。它是专门用于这种并行计算的，可以批量计算一堆顶点、一堆三角形、一堆像素的光栅化，这个渲染流程叫做渲染管线。

现在的渲染管线都是可编程的，也就是可以控制顶点的位置，每个三角形的着色，这两种分别叫做顶点着色器（shader）、片元着色器。

总之，2D或3D的图形经过绘制和光栅化就变成了一帧帧的图像显示出来。

变成图像之后其实还可以做一些图像处理，比如灰度、反色、高斯模糊等各种滤镜的实现。

所以，前端的渲染技术的理论基础是计算机图形学+图像处理。

具体到前前端的渲染技术来说，html+css、svg、canvas、webgl都是用于图形和图像渲染的技术，但是它们各有侧重：

html+css是用于图文布局的，也就是计算文字、图片、视频等的显示位置。它提供了很多计算规则，比如流式布局很适合做图文排版，弹性布局易于做自适应的布局等。但是它不适合做更灵活的图形绘制，这时就要用其他几种技术了。

canvas是给定一块画布区域，在不同的位置画图形和图像，它没有布局规则，所以很灵活，常用来做可视化或者游戏的开发。但是canvas并不会保留绘制的图形的信息，生成的图像只能显示在固定的区域，当显示区域变大的时候，它不能跟随一起放缩，就会失真，如果有放缩不失真的需求就要用其他渲染技术了。

svg会在内存中保留绘制的图形的信息，显示区域变化后会重新计算，是一个矢量图，常用于icon、字体等的绘制。

上面的3种技术都是用于2D的图形图像的绘制，如果想绘制3D的内容，就要用webgl了。它提供了绘制3D图形的api，比如通过顶点构成3D的模型，给每一个面贴图，设置光源，然后光栅化成图像等的api。它常用于通过3D内容增强网站的交互效果，3D的可视化，3D游戏等，再就是虚拟现实中的3D交互。

所以，虽然前端渲染技术的底层原理都是图形学+图像处理，但上层提供的4种渲染技术各有侧重点。

不过，它们还是有很多相同的地方的：

位置、大小等的变化都是通过矩阵的计算

都要经过图形转图像，也就是光栅化的过程

都支持对图像做进一步处理，比如各种滤镜

html+css渲染会分不同图层分别做计算，canvas也会根据计算量分成不同的canvas来做计算

因为他们底层的图形学原理还是一致的。

除此以外，3D内容，也就是webgl的内容会通过GPU来计算，但css其实也可以通过GPU计算，这叫做css的硬件加速，有四个属性可以触发硬件加速：transform、opacity、filter、will-change。（更多的GPU和css硬件加速的内容可以看这篇文章：这一次，彻底搞懂GPU和css硬件加速）

除了图形学和图像技术外，html+css还用到了编译技术。因为html、css是一种DSL（dominspecificlanguage，领域特定语言），也就是专门为界面描述所设计的语言。用html来表达dom结构，用css来给dom添加样式都只需要很少的代码，然后运行时解析html和css来创建dom、添加样式。

DSL可以让特定领域的逻辑更容易表达，前端领域还有一些其他技术也用到了DSL，比如graphql。

因为人眼的视觉暂留机制，只要每帧绘制不超过0.1s，人看到的画面就是连续的，这是显示的原理。每帧的绘制要经过图形绘制和图形转图像的光栅化过程，2D和3D图形分别有不同的绘制和光栅化的算法。此外，转成图像之后还可以做进一步的图像处理。

前端领域的四种渲染技术：html+css、canvas、svg、webgl各有侧重点，分别用于不同内容的渲染：

html+css用于布局

canvas用于灵活的图形图像渲染

svg用于矢量图渲染

webgl用于3D图形的渲染

但他们的理论基础都是计算机图形学+图像处理。（而且，html+css为了方便逻辑的表达，还设计了DSL，这用到了编译技术）

这四种渲染技术看似差别很大，但在理论基础层面，很多东西都是一样的。这也是为什么我们要去学计算机基础，因为它可以让我们对技术有一个更深入的更本质的理解。

热心网友 时间：2024-10-09 11:41

前端可用的渲染技术有html+css、canvas、svg、WebGL，我们会综合运用这些技术来绘制页面。有没有想过这些技术有什么区别和联系，它们和图形学有什么关系呢？

本文我们就来谈一下网页渲染技术的计算机理论基础。

人眼的视网膜有视觉暂留机制，也就是看到的图像会继续保留0.1s左右，图形界面就是根据这个原理来设计的一帧一帧刷新的机制，要保证1s至少要渲染10帧，这样人眼看到画面才是连续的。

每帧显示的都是图像，它是由像素组成的，是显示的基本单位。不同显示器实现像素的原理不同。

我们要绘制的目标是矩形、圆形、椭圆、曲线等各种图形，绘制完之后要把它们转成图像。图形的绘制有一系列的理论，比如贝塞尔曲线是画曲线的理论。图形转图像的过程叫做光栅化。这些图形的绘制和光栅化的过程，都是图形学研究的内容。

图形可能做缩放、平移、旋转等变化，这些是通过矩阵计算来实现的，也是图形学的内容。

除了2D的图形外，还要绘制3D的图形。3D的原理是把一个个三维坐标的顶点连起来，构成一个一个三角形，这是造型的过程。之后再把每一个三角形的面贴上图，叫做纹理。这样组成的就是一个3D图形，也叫3D模型。

3D图形也同样需要经历光栅化变成二维的图像，然后显示出来。这种三维图形的光栅化需要找一个角度去观察，就像拍照一样，所以一般把这个概念叫做相机。

同时，为了3D图形更真实，还引入了光线的概念，也就是一束光照过来，3D图形的每个面都会有什么变化，怎么反射等。不同材质的物体反射的方式不同，比如漫反射、镜面反射等，也就有不同的计算公式。一束光会照射到一些物体，到物体的反射，这个过程需要一系列跟踪的计算，叫做光线追踪技术。

我们也能感受出来，3D图形的计算量比2D图形大太多了，用CPU计算很可能达不到1s大于10帧，所以后面出现了专门用于3D渲染加速的硬件，叫做GPU。它是专门用于这种并行计算的，可以批量计算一堆顶点、一堆三角形、一堆像素的光栅化，这个渲染流程叫做渲染管线。

现在的渲染管线都是可编程的，也就是可以控制顶点的位置，每个三角形的着色，这两种分别叫做顶点着色器（shader）、片元着色器。

总之，2D或3D的图形经过绘制和光栅化就变成了一帧帧的图像显示出来。

变成图像之后其实还可以做一些图像处理，比如灰度、反色、高斯模糊等各种滤镜的实现。

所以，前端的渲染技术的理论基础是计算机图形学+图像处理。

具体到前前端的渲染技术来说，html+css、svg、canvas、webgl都是用于图形和图像渲染的技术，但是它们各有侧重：

html+css是用于图文布局的，也就是计算文字、图片、视频等的显示位置。它提供了很多计算规则，比如流式布局很适合做图文排版，弹性布局易于做自适应的布局等。但是它不适合做更灵活的图形绘制，这时就要用其他几种技术了。

canvas是给定一块画布区域，在不同的位置画图形和图像，它没有布局规则，所以很灵活，常用来做可视化或者游戏的开发。但是canvas并不会保留绘制的图形的信息，生成的图像只能显示在固定的区域，当显示区域变大的时候，它不能跟随一起放缩，就会失真，如果有放缩不失真的需求就要用其他渲染技术了。

svg会在内存中保留绘制的图形的信息，显示区域变化后会重新计算，是一个矢量图，常用于icon、字体等的绘制。

上面的3种技术都是用于2D的图形图像的绘制，如果想绘制3D的内容，就要用webgl了。它提供了绘制3D图形的api，比如通过顶点构成3D的模型，给每一个面贴图，设置光源，然后光栅化成图像等的api。它常用于通过3D内容增强网站的交互效果，3D的可视化，3D游戏等，再就是虚拟现实中的3D交互。

所以，虽然前端渲染技术的底层原理都是图形学+图像处理，但上层提供的4种渲染技术各有侧重点。

不过，它们还是有很多相同的地方的：

位置、大小等的变化都是通过矩阵的计算

都要经过图形转图像，也就是光栅化的过程

都支持对图像做进一步处理，比如各种滤镜

html+css渲染会分不同图层分别做计算，canvas也会根据计算量分成不同的canvas来做计算

因为他们底层的图形学原理还是一致的。

除此以外，3D内容，也就是webgl的内容会通过GPU来计算，但css其实也可以通过GPU计算，这叫做css的硬件加速，有四个属性可以触发硬件加速：transform、opacity、filter、will-change。（更多的GPU和css硬件加速的内容可以看这篇文章：这一次，彻底搞懂GPU和css硬件加速）

除了图形学和图像技术外，html+css还用到了编译技术。因为html、css是一种DSL（dominspecificlanguage，领域特定语言），也就是专门为界面描述所设计的语言。用html来表达dom结构，用css来给dom添加样式都只需要很少的代码，然后运行时解析html和css来创建dom、添加样式。

DSL可以让特定领域的逻辑更容易表达，前端领域还有一些其他技术也用到了DSL，比如graphql。

因为人眼的视觉暂留机制，只要每帧绘制不超过0.1s，人看到的画面就是连续的，这是显示的原理。每帧的绘制要经过图形绘制和图形转图像的光栅化过程，2D和3D图形分别有不同的绘制和光栅化的算法。此外，转成图像之后还可以做进一步的图像处理。

前端领域的四种渲染技术：html+css、canvas、svg、webgl各有侧重点，分别用于不同内容的渲染：

html+css用于布局

canvas用于灵活的图形图像渲染

svg用于矢量图渲染

webgl用于3D图形的渲染

但他们的理论基础都是计算机图形学+图像处理。（而且，html+css为了方便逻辑的表达，还设计了DSL，这用到了编译技术）

这四种渲染技术看似差别很大，但在理论基础层面，很多东西都是一样的。这也是为什么我们要去学计算机基础，因为它可以让我们对技术有一个更深入的更本质的理解。