WebGL着色器程序

我们通常使用三角形来构建网格。因为WebGL使用GPU加速计算,有关这些三角形中的信息一般从CPU传送到GPU,这需要大量的通信开销。
WebGL提供了一个解决方案以降低通信开销。由于它使用ES SL(嵌入式系统着色语言)在GPU上运行,我们编写所有程序需要使用着色器程序的客户端系统上的图形元素(这是我们使用OpenGL ES着色语言/GLSL来写程序)。
这些着色器是GPU和用于编写着色器程序的程序语言是GLSL。在这些着色器,我们定义确切的顶点,转换,材质,光源,和摄像机使用彼此交互以创建具体图像。
总之,这是一个实现的算法来获得像素一个网状片段。在后面的章节我们将讨论更多关于着色器。有两种类型的着色器- 顶点着色器和片段着色器。

顶点着色器

顶点着色器是所谓的在每个顶点的程序代码。它被用于转化(移动)的几何形状(例如:三角形)从一个地方到另一个地方。它处理每个顶点的数据(每个顶点的数据),例如顶点坐标,法线,色彩,和纹理坐标。
在顶点着色器的ES GL代码,程序员必须定义的属性来处理数据。这些属性指向一个顶点缓冲区对象是用JavaScript编写的。
下面的任务可以使用顶点着色器来进行 -
  • 顶点变换
  • 正常转化和正常化
  • 纹理坐标生成
  • 纹理坐标变换
  • 灯光/光线
  • 颜色材料应用

片段着色器(像素着色器)

网状由多个三角形形成,并且每一个三角形的表面被称为一个片段。片段着色器是对每一个片段的所有像素上运行的代码。这是写计算以填补单个像素的颜色。
下面的任务可以使用片段着色器来进行 -
  • 插值操作
  • 纹理访问
  • 纹理应用
  • 灰蒙/雾
  • 颜色总和
猿狮妹
2022-09-23
WebGL 着色器 程序 编程课程
热门教程
1 WebGL教程 WebGL(Web图形库)是Web上的3D图形的新标准,它是专用于绘制2D图形和交互式3D图形的目的。它是从OpenGL ES 2.0库,用于手机和其他移动设备的低级3D的API衍生。 WebGL提供ES2.0(嵌入式系统)类似的功能并在现代3D图形硬件上表现优异。
2 WebGL基础 WebGL主要是一个低级别的光栅化的API,而不是三维的API。要绘制使用WebGL的图像,必须通过表示图像的向量。然后,它在给定载体导入像素格式,使用 OpenGLSL 转换并在屏幕上显示图像。
3 WebGL着色器程序 我们通常使用三角形来构建网格。因为WebGL使用GPU加速计算,有关这些三角形中的信息一般从CPU传送到GPU,这需要大量的通信开销。 WebGL提供了一个解决方案以降低通信开销。由于它使
4 WebGL基本图形概念 渲染 渲染是从使用计算机程序模型生成图像的过程。在图形中,一个虚拟场景是使用像几何,视点,纹理,光照和阴影,这是通过一个渲染程序传递信息描述。此呈现程序的输出将是一
5 Html5 Canvas介绍 要在网络上创建的图形应用程序,HTML-5提供了一套丰富的功能,如2D画布,WebGL,SVG,CSS3D变换和SMIL。要编写WebGL的应用程序,我们可以使用HTML-5现有的canvas元素。本章提供了HTML-52Dcanv
6 WebGL图形管线 要渲染3D图形,我们必须遵循一系列步骤。这些步骤被称为图形管线或渲染管线。下图描述WebGL图形流水线。 在以下部分中,我们将一个接一个讨论管道中的每个步骤的作用。 JavaScrip
7 WebGL Context上下文 要编写一个WebGL的应用程序,第一步是让WebGL渲染上下文 - Context 对象。这个对象与 WebGL 绘制缓冲区进行交互,可以调用所有WebGL的方法。执行以下操作来获取WebGL的上下文- 创建HTML5can
8 WebGL示例程序 我们已经讨论过了WebGL和WebGL管道的基础知识(一个遵循的程序来渲染图形应用程序)。在本章中,我们将采取一个示例应用程序使用WebGL创建一个三角形,并观察遵循应用程序的步骤。
9 WebGL着色器 着色器是在GPU上运行的程序。着色器写入OpenGLES着色语言(称为ESSL)。ESSL拥有它自己的数据类型,限定符,内置的输入和输出变量。 数据类型 下表列出了OpenGLES SL提供的基本数据类型
10 WebGL关联属性和缓冲区对象 在顶点着色器程序中的每个属性点为顶点缓冲区对象。创建顶点缓冲区对象之后,程序员必须将它们与顶点着色器程序的属性相关联。每个属性点只有一个顶点缓冲对象,从它们中提取
  • Copyright © 2021 猿狮院, All rights reserved.