📅  最后修改于: 2020-10-17 05:23:34        🧑  作者: Mango

WebGL(Web图形库)是Web上3D图形的新标准，旨在渲染2D图形和交互式3D图形。本教程从WebGL，OpenGL和HTML-5的Canvas元素的基本介绍开始，然后是一个示例应用程序。本教程包含专门章节，介绍编写基本WebGL应用程序所需的所有步骤。它还包含解释如何使用WebGL进行仿射变换(例如平移，旋转和缩放)的章节。听众对于所有想学习WebGL编程基础知识的读者来说，本教程将非常有用...

📅  最后修改于: 2020-10-17 05:24:15        🧑  作者: Mango

几年前，Java应用程序（结合了applet和JOGL）被用于通过寻址GPU（图形处理单元）来处理Web上的3D图形。由于applet需要运行JVM，因此变得难以依赖Java applet。几年后，人们停止使用Java小程序。Adobe（Flash，AIR）提供的Stage3D API提供了GPU硬件加速架构。使用这些技术，程序员可以在Web浏览器以及IOS和Android平台上开发具有2D和3D...

📅  最后修改于: 2020-10-17 05:24:39        🧑  作者: Mango

为了在Web上创建图形应用程序，HTML-5提供了一组丰富的功能，例如2D Canvas，WebGL，SVG，3D CSS转换和SMIL。要编写WebGL应用程序，我们使用HTML-5的现有canvas元素。本章概述了HTML-5 2D canvas元素。HTML5画布HTML-5<canvas>提供了一个简单而强大的选项来使用JavaScript绘制图形。它可用于绘制图形，制作照片构图或进行简单...

📅  最后修改于: 2020-10-17 05:25:18        🧑  作者: Mango

WebGL主要是低级栅格化API，而不是3D API。要使用WebGL绘制图像，您必须传递代表该图像的矢量。然后，它使用OpenGL SL将给定的矢量转换为像素格式，并在屏幕上显示图像。编写WebGL应用程序涉及一系列步骤，我们将在本章中介绍这些步骤。WebGL-坐标系与其他3D系统一样，WebGL中将具有x，y和z轴，其中z轴表示depth。 WebGL中的坐标限制为（1、1、1）和（-1，-1...

📅  最后修改于: 2020-10-17 05:25:47        🧑  作者: Mango

要渲染3D图形，我们必须遵循一系列步骤。这些步骤称为图形管线或渲染管线。下图描述了WebGL图形管道。在以下各节中，我们将逐一讨论管道中每个步骤的作用。的JavaScript在开发WebGL应用程序时，我们编写Shader语言代码以与GPU进行通信。 JavaScript用于编写程序的控制代码，其中包括以下操作-初始化WebGL-JavaScript用于初始化WebGL上下文。创建数组-我们创建J...

📅  最后修改于: 2020-10-17 05:26:13        🧑  作者: Mango

我们已经讨论了WebGL和WebGL管道（渲染图形应用程序所遵循的过程）的基础。在本章中，我们将使用一个示例应用程序使用WebGL创建一个三角形，并观察该应用程序中遵循的步骤。WebGL应用程序的结构WebGL应用程序代码是JavaScript和OpenGL Shader Language的组合。需要JavaScript与CPU通讯必须使用OpenGL Shader Language与GPU通讯。...

📅  最后修改于: 2020-10-17 05:26:39        🧑  作者: Mango

要编写WebGL应用程序，第一步是获取WebGL渲染上下文对象。该对象与WebGL绘图缓冲区交互，并且可以调用所有WebGL方法。执行以下操作以获得WebGL上下文-创建一个HTML-5画布获取画布ID获取WebGL创建HTML-5画布元素在第5章中，我们讨论了如何创建HTML-5 canvas元素。在HTML-5文档的正文中，编写一个画布，为其命名，然后将其作为参数传递给属性id。您可以使用wi...

📅  最后修改于: 2020-10-17 05:27:25        🧑  作者: Mango

获取WebGL上下文后，必须为图元（要绘制的对象）定义几何并存储它。在WebGL中，我们使用JavaScript数组定义几何的详细信息，例如顶点，索引，图元的颜色。要将这些详细信息传递给着色器程序，我们必须创建缓冲区对象，并将包含数据的JavaScript数组存储（附加）到各个缓冲区中。注意：以后，这些缓冲区对象将与着色器程序（顶点着色器）的属性关联。定义所需的几何使用顶点绘制的2D或3D模型称为...

📅  最后修改于: 2020-10-17 05:28:18        🧑  作者: Mango

着色器是在GPU上运行的程序。着色器以OpenGL ES着色器语言（称为ES SL）编写。 ES SL具有自己的变量，数据类型，限定符，内置输入和输出。资料类型下表列出了OpenGL ES SL提供的基本数据类型。Sr.No.Type & Description1voidRepresents an empty value.2boolAccepts true or false.3intThis is...

📅  最后修改于: 2020-10-17 05:28:40        🧑  作者: Mango

顶点着色器程序中的每个属性都指向一个顶点缓冲区对象。创建顶点缓冲区对象后，程序员必须将它们与顶点着色器程序的属性相关联。每个属性仅指向一个顶点缓冲区对象，它们从中提取数据值，然后将这些属性传递给着色器程序。要将“顶点缓冲区对象”与顶点着色器程序的属性相关联，您必须遵循以下步骤：获取属性位置将属性指向顶点缓冲区对象启用属性获取属性位置WebGL提供了一个名为getAttribLocation（）的方...

📅  最后修改于: 2020-10-17 05:29:18        🧑  作者: Mango

将缓冲区与着色器关联之后，最后一步是绘制所需的图元。 WebGL提供了两种方法来绘制模型，分别是drawArrays（）和drawElements（）。drawArrays（）drawArrays（）是用于使用顶点绘制模型的方法。这是它的语法-此方法采用以下三个参数-模式-在WebGL中，使用基本类型绘制模型。使用模式，程序员必须选择WebGL提供的原始类型之一。该选项的可能值为-gl.POINT...

📅  最后修改于: 2020-10-17 05:29:51        🧑  作者: Mango

在前面的第5章中，我们讨论了如何按照分步过程绘制基本体。我们分五个步骤说明了该过程。每次绘制新形状时，都需要重复这些步骤。本章介绍如何在WebGL中绘制具有3D坐标的点。在继续之前，让我们回顾一下这五个步骤。必要步骤创建WebGL应用程序以绘制点需要执行以下步骤。步骤1-准备画布并获取WebGL渲染上下文在此步骤中，我们使用getContext（）方法获取WebGL Rendering上下文对象。...

📅  最后修改于: 2020-10-17 05:30:20        🧑  作者: Mango

在上一章（第11章）中，我们讨论了如何使用WebGL绘制三个点。在第5章中，我们以示例应用程序演示了如何绘制三角形。在两个示例中，我们仅使用顶点绘制了图元。要绘制更复杂的形状/网格，我们也将几何体的索引以及顶点传递给着色器。在本章中，我们将看到如何使用索引绘制三角形。绘制三角形所需的步骤创建WebGL应用程序以绘制三角形需要执行以下步骤。步骤1-准备画布并获取WebGL渲染上下文在此步骤中，我们使...

📅  最后修改于: 2020-10-17 05:32:50        🧑  作者: Mango

在上一章中，我们讨论了WebGL提供的不同绘图模式。我们还可以使用索引使用这些模式之一绘制图元。要在WebGL中绘制模型，我们必须选择这些基元之一并绘制所需的网格（即，使用一个或多个基元形成的模型）。在本章中，我们将以一个示例来演示如何使用WebGL绘制四边形。绘制四边形的步骤创建WebGL应用程序以绘制四边形需要执行以下步骤。步骤1-准备画布并获取WebGL渲染上下文在此步骤中，我们使用getC...

📅  最后修改于: 2020-10-17 05:33:37        🧑  作者: Mango

在前面的所有示例中，我们通过将所需的颜色值分配给gl_FragColor变量将颜色应用于对象。除此之外，我们可以为每个顶点定义颜色-就像顶点坐标和索引一样。本章以示例为例，说明如何使用WebGL将颜色应用于四边形。应用颜色要应用颜色，必须在JavaScript数组中使用RGB值为每个顶点定义颜色。您可以为所有顶点分配相同的值，以使对象具有唯一的颜色。定义颜色后，必须创建颜色缓冲区并将这些值存储在其...