WebGL教程

WebGL（Web图形库）是Web上3D图形的新标准，旨在渲染2D图形和交互式3D图形。本教程从WebGL，Op​​enGL和HTML-5的Canvas元素的基本介绍开始，然后是一…

几年前，Java应用程序（结合了applet和JOGL）被用于通过寻址GPU（图形处理单元）来处理Web上的3D图形。由于applet需要运行JVM，因此变得难以依赖Java ap…

为了在Web上创建图形应用程序，HTML5提供了一组丰富的功能，例如2D Canvas，WebGL，SVG，3D CSS转换和SMIL。要编写WebGL应用程序，我们使用HTML5…

WebGL主要是低级栅格化API，而不是3D API。要使用WebGL绘制图像，您必须传递代表该图像的矢量。然后，它使用OpenGL SL将给定的矢量转换为像素格式，并在屏幕上显示…

要渲染3D图形，我们必须遵循一系列步骤。这些步骤称为图形管线或渲染管线。下图描述了WebGL图形管道。 在以下各节中，我们将逐一讨论管道中每个步骤的作用。 JavaScript 在…

我们已经讨论了WebGL和WebGL管道（渲染图形应用程序所遵循的过程）的基础。在本章中，我们将使用一个示例应用程序来使用WebGL创建一个三角形，并观察该应用程序中遵循的步骤。 …

要编写WebGL应用程序，第一步是获取WebGL渲染Context对象。该对象与WebGL绘图缓冲区交互，并且可以调用所有WebGL方法。执行以下操作以获得WebGLContext…

获取WebGL上下文后，必须为图元（要绘制的对象）定义几何图形并存储它。在WebGL中，我们使用JavaScript数组定义几何图形的详细信息，例如顶点，索引，图元的颜色。要将这些…

着色器是在GPU上运行的程序。着色器以OpenGL ES着色器语言（称为ES SL）编写。ES SL具有自己的变量，数据类型，限定符，内置输入和输出。 资料类型 下表列出了Open…

顶点着色器程序中的每个属性都指向一个顶点缓冲区对象。创建顶点缓冲区对象后，程序员必须将它们与顶点着色器程序的属性相关联。每个属性仅指向一个顶点缓冲区对象，它们从中提取数据值，然后将…

将缓冲区与着色器关联之后，最后一步是绘制所需的图元。WebGL提供了两种方法，分别是drawArrays()和drawElements()来绘制模型。 drawArrays() d…

在前面的第5章中，我们讨论了如何按照分步过程绘制基本体。我们分五个步骤说明了该过程。每次绘制新形状时，都需要重复这些步骤。本章介绍如何在WebGL中绘制具有3D坐标的点。在继续之前…

在上一章（第11章）中，我们讨论了如何使用WebGL绘制三个点。在第5章中，我们以示例应用程序来演示如何绘制三角形。在两个示例中，我们仅使用顶点绘制了图元。 要绘制更复杂的形状/网…

在上一章（第12章）中，我们讨论了如何使用WebGL绘制三角形。除了三角形之外，WebGL还支持其他各种绘图模式。本章介绍WebGL支持的绘图模式。 模式参数 让我们看一下方法的语…

在上一章中，我们讨论了WebGL提供的不同绘图模式。我们还可以使用索引使用这些模式之一来绘制基元。要在WebGL中绘制模型，我们必须选择这些基元之一并绘制所需的网格（即，使用一个或…

在前面的所有示例中，我们通过将所需的颜色值分配给gl_FragColor变量，将颜色应用于对象。除此之外，我们可以为每个顶点定义颜色-就像顶点坐标和索引一样。本章以示例为例，说明如…

到目前为止，我们讨论了如何使用WebGL绘制各种形状并在其中应用颜色。在本章中，我们将以一个示例来说明如何平移三角形。 Translation Translation是WebGL提…

在本章中，我们将以一个示例来演示如何使用WebGL修改三角形的比例。 缩放比例 缩放不过是增加或减小对象的大小而已。例如，如果三角形的顶点的大小为[a，b，c]，则顶点为[2a，2…

在本章中，我们将以一个示例来演示如何使用WebGL旋转三角形。 示例–旋转三角形 以下程序显示了如何使用WebGL旋转三角形。

在本章中，我们将以一个示例来演示如何使用WebGL绘制旋转的3D立方体。 示例–绘制旋转3D立方体 以下程序显示了如何绘制旋转的3D立方体： 大家运行看下效果。