My-Notes

001.面试题

30分钟阅读

WebGL 与 Canvas 2D context 的异同

同：

  • 以 canvas 为载体：canvas.getContext('2d')；canvas.getContext('webgl'/'webgl2')
  • 浏览器原生支持，无需安装额外的环境

异：

  • Canvas 2D context：基于像素的绘图系统，通过 JavaScript 脚本控制渲染过程
    • 提供了简单的 2D 图形绘制功能，包括绘制基本形状、路径、文本和图像等。它适用于绘制简单的图形和动画
  • WebGL：Web Graphics Library，基于 OpenGL ES 2.0 标准的 JavaScript API，它可以利用 GPU 进行硬件加速的 3D 图形渲染。WebGL 使用着色器（shaders）编程（GLSL 语言），允许更复杂和高性能的图形渲染
    • 提供了强大的 3D 图形渲染功能，包括高级的着色器编程、纹理映射、深度缓冲、光照效果等。它适用于创建复杂的3D 图形、游戏和交互式可视化

如何在 WebGL 中绘制一个三角形？

  • 创建一个 WebGL 上下文对象；
  • 编写着色器代码，定义顶点着色器和片元着色器；
  • 定义三角形的顶点坐标；
  • 将三角形的顶点坐标传递给着色器程序；
  • 调用 WebGL API 中的 drawArrays() 方法，绘制三角形。

什么是缓冲区对象？它们如何被使用？

用于存储顶点数据、颜色数据、纹理坐标等图形数据。缓冲区对象包括顶点缓冲区对象和索引缓冲区对象，它们用于存储不同类型的图形数据。

WebGL 中的缓冲区是一种存储数据的对象，用于在 GPU 中进行高效的数据传输。它们被用于存储顶点数据、索引数据、纹理数据等信息。WebGL 提供了多种类型的缓冲区，如 ArrayBuffer、ElementArrayBuffer、Float32Array 等。开发者可以使用 WebGL 的缓冲区 API 来创建、更新、绑定和传输缓冲区数据。

什么是纹理贴图？

纹理贴图是 WebGL 中常用的一种技术，用于将一个图像或者纹理映射到三维模型的表面上，从而增强模型的真实感和细节。纹理贴图可以是任意大小和格式的图像，包括位图、PNG、JPEG 等格式。

纹理是一种包含图像数据的二维数组，用于在 3D 图形中贴图。在 WebGL 中，纹理是由纹理对象表示的。开发者可以使用 WebGL 的纹理 API 创建纹理对象，并上传纹理数据到 GPU 中。在渲染过程中，纹理数据被采样并应用于渲染的几何体表面，以实现各种视觉效果。

什么是 WebGL 坐标系？

WebGL 坐标系是 WebGL 中的一个重要概念，它是一个三维坐标系，以屏幕的左下角为原点，向右为 x 轴正方向，向上为 y 轴正方向，向外为 z 轴正方向。

如何进行 WebGL 的性能优化？

  • 减少WebGL API的调用次数，合并操作；
  • 减少渲染的三角形数量；
  • 使用合适的缓冲区对象；
  • 使用合适的纹理格式和压缩算法；
  • 合理使用着色器程序；
  • 尽量使用硬件加速。

什么是 WebGL 的着色器？

WebGL 的着色器是用于渲染图形的程序，它由顶点着色器和片元着色器组成。顶点着色器主要用于对顶点数据进行变换和处理，片元着色器则用于对每个像素进行处理，包括颜色、透明度等。着色器程序是由 GLSL 语言编写的，它可以实现各种各样的渲染效果。

WebGL 中的着色器是一种由 GLSL（OpenGL Shading Language）编写的程序，用于在 GPU 中进行顶点渲染和片段渲染。顶点着色器用于处理顶点数据，计算顶点的位置、颜色等信息，而片段着色器用于处理像素级别的渲染逻辑，如光照、纹理贴图等。开发者可以使用 WebGL 的着色器 API 创建着色器对象，并编写 GLSL 代码来定义渲染逻辑。

什么是 WebGL 中的深度测试？

深度测试是 WebGL 中的一个重要功能，用于控制图形的深度顺序。深度测试是在像素级别上进行的，它通过比较每个像素的深度值来决定哪些像素应该显示在前面，哪些应该显示在后面。

如何在 WebGL 中使用动画？

  • 使用 requestAnimationFrame() 方法，它可以按照浏览器的刷新频率自动调用动画函数，从而实现流畅的动画效果；
  • 使用定时器来控制动画的帧率和持续时间；
  • 使用 Tween.js 等库来实现补间动画效果。

WebGL 有哪些主要的 API ？这些 API 是用来做什么的？

WebGL 主要有以下 API：

  • getExtension：用于获取扩展 API。
  • getSupportedExtensions：用于获取浏览器支持的扩展API列表。
  • activeTexture：用于设置当前活动的纹理。
  • attachShader：用于将着色器对象附加到程序对象。
  • bindBuffer：用于绑定缓冲区对象。
  • bindFramebuffer：用于绑定帧缓冲区对象。
  • bindRenderbuffer：用于绑定渲染缓冲区对象。
  • bindTexture：用于绑定纹理对象。
  • blendColor：用于设置混合颜色。
  • blendEquation：用于设置混合方程。
  • blendEquationSeparate：用于设置独立的混合方程。

这些 API 用于控制 WebGL 中的对象，如纹理、缓冲区、着色器等，以及设置渲染的属性和参数，如混合颜色、混合方程等。通过这些 API，开发者可以控制 WebGL 渲染 3D 图形的整个流程。

描述一下WebGL的工作流程

WebGL的工作流程如下：

  • 创建渲染上下文（WebGLRenderingContext）：通过调用WebGL的getExtension方法获取渲染上下文对象，该对象包含了WebGL的所有API和方法。
  • 创建缓冲区（Buffer）：使用WebGL的缓冲区API创建缓冲区对象，用于存储顶点数据、索引数据等。
  • 创建纹理（Texture）：使用WebGL的纹理API创建纹理对象，用于存储纹理数据。
  • 创建着色器（Shader）：使用WebGL的着色器API创建着色器对象，用于编写GLSL代码，定义顶点渲染和片段渲染的逻辑。
  • 创建程序（Program）：使用WebGL的程序API创建程序对象，用于将着色器对象绑定到程序对象中，并链接生成最终的渲染流水线。

如何在 WebGL 中实现阴影效果？

在 WebGL 中实现阴影效果通常需要使用阴影映射技术。阴影映射是一种将光源照射在物体上产生的阴影信息存储在纹理中的技术。在渲染过程中，将该阴影纹理应用到场景中，使得物体呈现出阴影效果。实现阴影效果需要编写相应的 GLSL 代码，并使用 WebGL 的着色器 API 来处理渲染逻辑。

解释一下 WebGL 中的帧缓冲区是什么 ，以及它们如何被使用？

WebGL 中的帧缓冲区是一种存储图像数据的对象，用于在渲染过程中缓存图像数据。帧缓冲区包括颜色缓冲区、深度缓冲区、模板缓冲区等。开发者可以使用 WebGL 的帧缓冲区 API 创建帧缓冲区对象，并绑定到渲染上下文中。在渲染过程中，渲染结果被存储在颜色缓冲区中，然后通过浏览器显示在屏幕上。

什么是深度缓冲区 ，以及它如何影响 WebGL 的渲染？

深度缓冲区是一种存储每个像素点深度信息的对象，用于实现深度测试和消除隐藏面。在WebGL中，深度缓冲区与帧缓冲区相关联，用于存储每个像素点的深度值。当渲染多个几何体时，深度测试可以确保正确的像素被绘制，而隐藏面消除可以减少不必要的绘制操作。深度缓冲区的使用可以通过WebGL的API进行配置和控制。

解释一下 WebGL 中的多重采样抗锯齿 （MSAA）是什么，以及如何使用它？

多重采样抗锯齿（MSAA）是一种提高渲染质量的技术，通过在每个像素点上多次采样来生成更平滑的图像边缘。在WebGL中，MSAA可以通过配置渲染上下文的属性来启用。开发者可以使用WebGL的API来设置MSAA的相关参数，如采样率、颜色深度等。启用MSAA后，渲染结果将更加平滑，但会占用更多的GPU资源。

什么是透明度 ，以及它在 WebGL 中如何被处理？

透明度是指物体对光线的透过能力，用于模拟透明物体的渲染效果。在WebGL中，透明度可以通过配置材质属性来实现。开发者可以使用WebGL的材质API创建具有透明度的材质对象，并设置其透明属性。在渲染过程中，透明物体的像素值将被根据其透明度属性进行混合处理，以产生正确的透明效果。

解释一下 WebGL 中的线性代数是什么 ，以及它如何被用于3D 图形渲染？

线性代数是数学的一个分支，它研究的是向量、矩阵、线性变换等概念和性质，以及它们在几何、物理和工程等领域中的应用。在WebGL中，线性代数被广泛应用于3D图形渲染的各个方面。

  1. 变换：在3D图形渲染中，物体的位置、旋转和缩放等变换都需要用到线性代数。WebGL使用矩阵来表示这些变换，通过将多个矩阵相乘，可以获得物体在世界空间中的最终位置、旋转和缩放。
  2. 投影：在将3D场景投影到2D屏幕时，线性代数中的投影矩阵起着关键作用。通过设置投影矩阵，可以控制场景中物体的大小、位置和方向等在屏幕上的表现。
  3. 光照：光照是3D图形渲染中的重要组成部分，而光照模型的建立和计算涉及到线性代数的知识。WebGL支持多种光照模型，如Phong光照模型和Blinn-Phong光照模型等，它们都需要用到线性代数的概念和公式。
  4. 插值：在渲染过程中，常常需要进行顶点位置、颜色等数据的插值计算。线性代数提供了多种插值方法，如线性插值、双线性插值和三次插值等，它们可以帮助开发者实现更平滑的渲染效果。
  5. 矩阵堆叠：在处理多个变换和视角时，开发者需要使用到矩阵堆叠技术。矩阵堆叠即将多个矩阵相乘，并将其结果应用于物体的变换。这需要用到线性代数的矩阵乘法和加法运算。

总之，线性代数作为WebGL中不可或缺的一部分，为开发者提供了强大的数学工具，使得开发者能够更精确地控制3D图形渲染的过程和结果。

解释一下 WebGL 中的骨骼动画是什么 ，以及如何实现？

WebGL中的骨骼动画是一种基于骨骼系统的动画技术，用于实现角色或物体的复杂动作和运动。它通过将物体的顶点数据绑定到骨骼上，并使用骨骼的变换来驱动顶点的位置和形状，从而产生动画效果。

要实现WebGL中的骨骼动画，需要进行以下步骤：

  1. 创建骨骼：首先需要定义角色的骨骼结构，包括根骨、子骨等。骨骼可以用向量或矩阵表示，并按照一定的顺序组织成层级结构。
  2. 绑定顶点数据到骨骼：将角色的顶点数据绑定到骨骼上，每个顶点可以关联到一个或多个骨骼。
  3. 编写动画循环：在动画循环中，依次更新每个骨骼的变换（如平移和旋转），并根据骨骼的变换更新顶点的位置和形状。
  4. 渲染动画帧：根据当前骨骼的变换状态，渲染角色在当前帧的图像，然后将渲染结果呈现在屏幕上。

实现WebGL中的骨骼动画需要熟练掌握线性代数、矩阵变换等数学知识，以及WebGL的缓冲区、纹理、着色器等API的使用。常用的动画库有Three.js和Unity等，它们提供了丰富的工具和接口，方便开发者实现骨骼动画。

解释一下 WebGL 中的光照模型是什么，以及如何实现？

WebGL中的光照模型是一种模拟光线照射在物体表面时反射和折射等效果的算法。光照模型通常由环境光、漫反射光、镜面光等组成，通过对这些光照分量进行计算和处理，可以模拟出物体在光照下的表面颜色、纹理和阴影等效果。

在WebGL中实现光照模型需要以下步骤：

  1. 定义光源：设置光源的位置、颜色等属性，以及光源照射的方向和角度等信息。
  2. 计算环境光：根据环境光的颜色和强度，计算出物体表面受到环境光照射后的颜色。
  3. 计算漫反射光：根据光源的位置、方向和角度，以及物体的表面材质属性（如反射率、光滑度等），计算出物体表面受到漫反射光照射后的颜色。
  4. 计算镜面光：根据光源的位置、方向和角度，以及物体的表面材质属性（如反射率、光滑度等），计算出物体表面受到镜面光照射后的颜色。
  5. 合并光照分量：将环境光、漫反射光和镜面光等光照分量合并在一起，计算出物体在光照下的最终颜色。
  6. 应用光照模型：将计算得到的光照模型应用到WebGL的渲染过程中，通过对顶点着色器和片段着色器等进行编程，实现光照模型的计算和处理。

实现WebGL中的光照模型需要开发者熟练掌握线性代数、向量运算等数学知识，以及WebGL的缓冲区、纹理、着色器等API的使用。通过编写相应的GLSL代码，可以定义和控制光照模型的参数和属性，从而实现各种逼真的光照效果。

解释一下 WebGL 中的阴影映射是什么，以及如何实现？

阴影映射是一种在WebGL中生成阴影效果的技术。它通过将光源照射在物体上产生的阴影信息存储在纹理中，然后在渲染过程中将该阴影纹理应用到场景中，使得物体呈现出阴影效果。

要实现WebGL中的阴影映射，需要进行以下步骤：

  1. 创建阴影贴图：首先需要创建一个与主纹理大小相同的阴影贴图，并将其初始化。
  2. 计算阴影矩阵：根据光源的位置和角度等信息，计算出阴影矩阵，用于将物体从世界空间变换到阴影贴图的空间。
  3. 渲染阴影贴图：将场景中的物体渲染到阴影贴图中，但不包括光源所在的物体本身。在此过程中，需要将物体根据阴影矩阵进行变换和投影，并将结果存储在阴影贴图中。
  4. 应用阴影贴图：将渲染好的阴影贴图应用到场景中，通过将该贴图作为纹理使用，使得物体呈现出阴影效果。
  5. 调整阴影效果：根据需要调整阴影的模糊程度、范围和颜色等属性，可以通过修改阴影贴图的参数或使用不同的着色器来实现。

实现WebGL中的阴影映射需要开发者熟练掌握线性代数、矩阵变换等数学知识，以及WebGL的缓冲区、纹理、着色器等API的使用。同时需要编写相应的GLSL代码来实现阴影映射的算法和效果。需要注意的是，阴影映射虽然能够产生较为逼真的阴影效果，但计算复杂度高且资源消耗较大，因此在实际应用中需要进行优化和处理。

解释一下 WebGL 中的着色器是什么 ，以及它们在渲染过程中起什么作用？

WebGL中的着色器是一种由GLSL（OpenGL Shading Language）编写的程序，用于在GPU中进行顶点渲染和片段渲染。顶点着色器用于处理顶点数据，计算顶点的位置、颜色等信息，而片段着色器用于处理像素级别的渲染逻辑，如光照、纹理贴图等。

在WebGL的渲染过程中，着色器扮演着重要的角色。它们负责将输入的顶点数据和纹理数据转化为最终的渲染结果。具体来说，顶点着色器负责对每个顶点进行变换、光照等计算，生成渲染图元所需的顶点坐标和颜色等信息；而片段着色器则根据顶点着色器输出的信息，对像素进行进一步的渲染处理，包括纹理贴图、颜色混合等操作。

开发者可以使用WebGL的着色器API创建着色器对象，并编写GLSL代码来定义渲染逻辑。着色器代码可以包含自定义的数学函数、光源模型、纹理采样等算法，用于实现各种视觉效果。通过将着色器代码嵌入到WebGL的渲染流程中，开发者可以实现对物体表面的材质、光照和阴影等效果的精细控制。

需要注意的是，WebGL中的着色器是分离的，即顶点着色器和片段着色器是各自独立的程序。这种分离的设计使得开发者可以根据需要编写适用于不同阶段的渲染逻辑，提高了渲染流程的灵活性和可维护性。同时，WebGL的着色器还支持进行动态编译和加载，方便开发者根据应用需求进行优化和扩展。

解释一下 WebGL 中的混合是什么，以及它如何影响 WebGL 的渲染结果？

WebGL中的混合是指将两个或多个图像像素进行合并，生成最终渲染结果的过程。混合的目的是在不改变原始图像内容的情况下，将它们进行叠加、融合，以实现更加丰富和真实的视觉效果。

WebGL中的混合基于Alpha通道来实现。Alpha通道是图像像素中的一个分量，用于表示像素的透明度或覆盖程度。在进行混合时，WebGL会将两个图像的像素按照其Alpha通道的值进行加权平均，得到最终的混合像素值。

混合在WebGL中被广泛应用，例如在实现半透明物体、叠加多个图像或者产生透明效果等方面。通过合理地使用混合技术，开发者可以创建出更加逼真的场景和图形效果。

需要注意的是，WebGL中的混合需要开启混合模式。开发者可以通过设置渲染上下文的混合属性来选择不同的混合模式，例如普通的加法混合、减去混合、覆盖混合等。不同的混合模式会对渲染结果产生不同的影响，因此开发者需要根据具体需求选择合适的混合模式来达到预期的渲染效果。

此外，WebGL中的混合操作是在GPU中进行的，因此相对于直接在CPU中进行图像处理，它可以更高效地利用GPU的并行处理能力，提高渲染性能。同时，WebGL还支持多种类型的混合操作，例如Alpha混合、RGB混合等，为开发者提供了更多的灵活性和控制力。

WebGL 中的各种数据类型 （如 Float、UnsignedShort、Byte 等）以及它们的使用场景：

在WebGL中，常用的数据类型包括Float、UnsignedShort、Byte等。

  • Float：用于存储单精度浮点数。这种类型的数据可以用于表示三维坐标、颜色、法线向量等。例如，在顶点着色器中，通常使用Float类型来定义顶点的位置和颜色信息。
  • UnsignedShort：用于存储无符号短整型数据。这种类型的数据通常用于表示顶点索引，因为顶点索引的值通常较小，使用无符号短整型可以节省内存空间。例如，在几何着色器中，可以使用无符号短整型来表示顶点索引，然后将其传递给片段着色器进行进一步处理。
  • Byte：用于存储有符号字节类型数据。这种类型的数据通常用于表示范围较小的整数或布尔值。例如，在某些情况下，可以使用Byte类型来表示顶点的某些属性，如纹理坐标或骨骼权重等。

除了上述常用数据类型外，WebGL还支持其他类型的数据，如Int、UnsignedInt、FloatVector等。选择合适的数据类型可以提高内存使用效率并减少数据传输的开销。

在 WebGL 中如何处理交错数据 （interleaved data）：

交错数据是一种将多个数据数组混合在一起的数据组织方式，通常用于表示三维几何体。在交错数据中，顶点和法线向量等属性被存储在一起，每个顶点都具有相应的属性值。这种数据组织方式可以提高数据访问的效率，因为所有与每个顶点相关的数据都存储在一起。

在WebGL中处理交错数据时，需要使用缓冲对象（BufferObject）来存储数据。首先，需要创建一个空的缓冲对象，然后使用bindBuffer方法将其绑定到WebGL上下文中。接下来，将数据数组写入缓冲对象中，可以使用bufferData或bufferSubData方法。最后，将缓冲对象关联到相应的顶点属性变量上，以便在渲染过程中使用。

WebGL 中的多线程处理是什么 ，以及如何利用它来提高渲染性能：

WebGL 本身并不是一个多线程库，但是可以通过使用多个 WebGL 上下文（WebGLContexts）来实现多线程渲染。每个 WebGL 上下文都可以独立地进行渲染操作，从而允许多个线程同时进行渲染。

要利用多线程提高渲染性能，可以使用多个 WebGL 上下文，并将不同的渲染任务分配给不同的线程。例如，可以将大的几何体拆分成较小的块，并将每个块分配给不同的线程进行渲染。这样可以最大限度地利用多核 CPU 的性能，并提高渲染效率。

需要注意的是，在使用多线程进行渲染时，需要谨慎处理线程之间的同步问题，以避免竞态条件和数据不一致性等问题。可以使用互斥锁（mutex）或其他同步机制来确保在任何时候只有一个线程可以访问共享资源。此外，还需要注意线程之间的通信开销，以避免过多的线程切换和数据传输导致性能下降。

关系图谱