WebGL教程
 WebGL-简介
  2020-10-17-05:24:15            mango

几年前,Java应用程序(结合了applet和JOGL)被用于通过寻址GPU(图形处理单元)来处理Web上的3D图形。由于applet需要运行JVM,因此变得难以依赖Javaapplet。几年后,人们停止使用Java小程序。Adobe(Flash,AIR)提供的Stage3DAPI提供了GPU硬件加速架构。使用这些技术

文章详情
 WebGL-Html5画布概述
  2020-10-17-05:24:39            mango

为了在Web上创建图形应用程序,HTML-5提供了一组丰富的功能,例如2DCanvas,WebGL,SVG,3DCSS转换和SMIL。要编写WebGL应用程序,我们使用HTML-5的现有canvas元素。本章概述了HTML-52Dcanvas元素。HTML5画布HTML-5<canvas>提供了一个简单而强大的选项来使

文章详情
 WebGL-基础
  2020-10-17-05:25:18            mango

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

文章详情
 WebGL-图形管道
  2020-10-17-05:25:47            mango

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

文章详情
 WebGL-示例应用程序
  2020-10-17-05:26:13            mango

我们已经讨论了WebGL和WebGL管道(渲染图形应用程序所遵循的过程)的基础。在本章中,我们将使用一个示例应用程序使用WebGL创建一个三角形,并观察该应用程序中遵循的步骤。WebGL应用程序的结构WebGL应用程序代码是JavaScript和OpenGLShaderLanguage的组合。需要JavaScript与

文章详情
 WebGL-上下文
  2020-10-17-05:26:39            mango

要编写WebGL应用程序,第一步是获取WebGL渲染上下文对象。该对象与WebGL绘图缓冲区交互,并且可以调用所有WebGL方法。执行以下操作以获得WebGL上下文-创建一个HTML-5画布获取画布ID获取WebGL创建HTML-5画布元素在第5章中,我们讨论了如何创建HTML-5canvas元素。在HTML-5文档的

文章详情
 WebGL-几何
  2020-10-17-05:27:25            mango

获取WebGL上下文后,必须为图元(要绘制的对象)定义几何并存储它。在WebGL中,我们使用JavaScript数组定义几何的详细信息,例如顶点,索引,图元的颜色。要将这些详细信息传递给着色器程序,我们必须创建缓冲区对象,并将包含数据的JavaScript数组存储(附加)到各个缓冲区中。注意:以后,这些缓冲区对象将与着

文章详情
 WebGL-着色器
  2020-10-17-05:28:18            mango

着色器是在GPU上运行的程序。着色器以OpenGLES着色器语言(称为ESSL)编写。ESSL具有自己的变量,数据类型,限定符,内置输入和输出。资料类型下表列出了OpenGLESSL提供的基本数据类型。Sr.No.Type&Description1voidRepresentsanemptyvalue.2boolAcce

文章详情
 关联属性和缓冲区对象
  2020-10-17-05:28:40            mango

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

文章详情
 WebGL-绘制模型
  2020-10-17-05:29:18            mango

将缓冲区与着色器关联之后,最后一步是绘制所需的图元。WebGL提供了两种方法来绘制模型,分别是drawArrays()和drawElements()。drawArrays()drawArrays()是用于使用顶点绘制模型的方法。这是它的语法-此方法采用以下三个参数-模式-在WebGL中,使用基本类型绘制模型。使用模式,

文章详情

Made with ❤️ in Chengdu. Copyright reserved 2019-2022.

蜀ICP备20006366号-1