![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WebGL
心若成梦
春有百花秋有月,夏有凉风冬有雪。
莫将闲事挂心头,便是人间好时节。
展开
-
WebGL
WebGL是什么东西?WebGL是Web上的3D图形的新标准,它是专用于绘制2D图形和交互式3D图形的目的,它是OpenGL ES 2.0库,用于手机和其他移动设备的低级3D的API衍生,WebGL提供ES2.0(嵌入式系统)类似的功能并在现在3D图形硬件上表现优异。谁开发的WebGL一个名叫Vladimir Vukicevic 的美国塞尔维亚软件工程师做了基础工作,并领导创建WebGL。...转载 2019-08-30 10:10:33 · 457 阅读 · 1 评论 -
WebGL基本图形概念
渲染渲染是使用计算机程序模型生成图像的过程,分为2种软件渲染:所有的渲染都是CPU的帮助下计算完成的。硬件渲染:所有的图形计算都由GPU(图形处理单元)完成的。GPU根据NVIDIA,一个GPU就是“使用集成在一块芯片处理器转换,光线,三角形设置/剪辑和渲染处理能力最低为每秒10百万个多边形的引擎。”不同于多核心处理器,使用顺序处理优化过的几个核,GPU由数千个较小的内核,高效地处理并...转载 2019-08-30 10:20:24 · 154 阅读 · 0 评论 -
WebGL基础
WebGL主要是一个低级别的光栅化的API,而不是三维的API。要绘制使用WebGL的图像,必须通过表示图像的向量。然后,它在给定载体导入像素格式,使用 OpenGL SL 转换并在屏幕上显示图像。WebGL坐标系就像任何其他的3D系统,在WebGL中Z轴表示深度,x,y和z轴。在WebGL的坐标被限制为(1,1,1)和(-1,-1,- 1)。它意味着- 如果你考虑该屏幕上投影的WebGL图形...转载 2019-08-30 10:36:13 · 334 阅读 · 0 评论 -
WebGL着色器程序
我们通常使用三角形来构建网格。因为WebGL使用GPU加速计算,有关这些三角形中的信息一般从CPU传送到GPU,这需要大量的通信开销。WebGL提供了一个解决方案以降低通信开销。由于它使用ES SL(嵌入式系统着色语言)在GPU上运行,我们编写所有程序需要使用着色器程序的客户端系统上的图形元素(这是我们使用OpenGL ES着色语言/GLSL来写程序)。这些着色器是GPU和用于编写着色器程序的...转载 2019-08-30 10:48:35 · 294 阅读 · 0 评论 -
WebGL图形管线
要渲染3D图形,我们必须遵循一系列步骤。这些步骤被称为图形管线或渲染管线。下图描述WebGL图形流水线。JavaScript在开发WebGL应用程序时,我们需要写Shader语言代码与GPU进行沟通。使用JavaScript编写的程序,其中包括以下操作的控制代码- 初始化WebGL − JavaScript是用于初始化WebGL的上下文。 创建数组 − 我们创建JavaScr...转载 2019-08-30 11:13:44 · 500 阅读 · 0 评论 -
WebGL应用程序的结构
WebGL应用程序的结构WebGL应用程序代码是JavaScript和OpenGL着色语言的组合。 JavaScript是需要与CPU进行沟通 OpenGL着色语言,需要与GPU通信我们使用WebGL绘制一个简单的三角形遵循五个序列步骤。这些步骤的解释如下- 步骤1 - 准备画布,并得到WebGL的渲染上下文 我们得到当前HTML Canvas对象并获取WebGL渲染环境。 ...转载 2019-08-30 11:38:40 · 461 阅读 · 0 评论 -
WebGL Context上下文
要编写一个WebGL的应用程序,第一步是让WebGL渲染上下文 - Context 对象。这个对象与 WebGL 绘制缓冲区进行交互,可以调用所有WebGL的方法。执行以下操作来获取WebGL的上下文- 创建HTML5 canvas 获取画布 canvas 的 ID 获取WebGL创建HTML5 canvas元素我们知道,建立一个HTML5 canvas 元素 - 在HTML5...转载 2019-08-30 12:01:33 · 1066 阅读 · 0 评论 -
WebGL几何体
所有原语(或对象模型)应该有明确定义的几何细节。这些细节可以包括顶点,指数,颜色,纹理等。在WebGL中几何详细信息存储在JavaScript数组。图形对象由其中在GPU上运行的着色器程序来创建。几何信息传递到使用缓冲区对象着色器程序。定义所需的几何体使用顶点所绘的2D或3D模型被称为网格。在网格的每个面被称为多边形和多边形是由3个或更多的顶点组成。要绘制模型在WebGL中渲染,必须定义使...转载 2019-08-30 13:40:39 · 295 阅读 · 0 评论