区块链技术博客
www.b2bchain.cn

WebGL 快速入门求职学习资料

本文介绍了WebGL 快速入门求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

1、初识 WebGL

WebGL 使得在支持 HTML 的 canvas 标签的浏览器中,不需要安装任何插件,便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行 2D 和 3D 渲染。WebGL 程序包括用 JavaScript 写的控制代码,以及在图形处理单元(GPU)中执行的着色代码(GLSL)。

  • 1、OpenGL
    计算机图形绘制的编程接口标准,支持不同平台上的图形绘制
  • 2、OpenGL ES
    在 OpenGL 的基础上,删除和简化一部分功能后形成的,为满足嵌入式设备需求而开发一个特殊版本
  • 3、WebGL
    WebGL 是基于 OpenGL ES 2.0 的 Javascript API

WebGL只是绑定外面接口的一层,内部的一些核心内容,如着色器,材质,灯光等都是需要借助 GLSL ES 语法来操作的。GLSL有自己的语法,跟 JS 有些不同。

  • 4、GLSL
    基于 OpenGL,运行在GPU上的着色器语言(OpenGL Shading Language)

Shading Language 目前市面上主要有3种语言
1、GLSL(OpenGL Shading Language): 基于 OpenGL;
2、HLSL(High Level Shading Language):基于 DirectX;
3、Cg(C for Graphic): NVIDIA 公司的;

2、GLSL 语法

  • 1、大小写敏感
  • 2、强类型的语言
  • 3、单行注释使用//,多行注释则是/* */
  • 4、基本数据类型
数据类型 说明
void no function return value or empty parameter list
bool Boolean
int signed integer
float floating scalar
vec2, vec3, vec4 n-component floating point vector
bvec2, bvec3, bvec4 Boolean vector
ivec2, ivec3, ivec4 signed integer vector
mat2, mat3, mat4 2×2, 3×3, 4×4 float matrix
sampler2D access a 2D texture
samplerCube access cube mapped texture

3、GLSL 获取数据的4种方法

  • 1、属性( Attribute )和缓冲( Buffer )
    缓冲是发送到 GPU 的一些二进制数据序列,通常情况下缓冲数据包括顶点位置,法向量,纹理坐标,颜色值等。你可以存储任何数据。
    属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。例如你可能在缓冲中用三个32位的浮点型数据存储一个位置值。对于一个确切的属性你需要告诉它从哪个缓冲中获取数据,获取什么类型的数据,起始偏移值是多少,到下一个位置的字节数是多少。
    缓冲不是随意读取的。事实上顶点着色器运行的次数是一个指定的确切数字,每一次运行属性会从指定的缓冲中按照指定规则依次获取下一个值。

1、初识 WebGL

WebGL 使得在支持 HTML 的 canvas 标签的浏览器中,不需要安装任何插件,便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行 2D 和 3D 渲染。WebGL 程序包括用 JavaScript 写的控制代码,以及在图形处理单元(GPU)中执行的着色代码(GLSL)。

  • 1、OpenGL
    计算机图形绘制的编程接口标准,支持不同平台上的图形绘制
  • 2、OpenGL ES
    在 OpenGL 的基础上,删除和简化一部分功能后形成的,为满足嵌入式设备需求而开发一个特殊版本
  • 3、WebGL
    WebGL 是基于 OpenGL ES 2.0 的 Javascript API

WebGL只是绑定外面接口的一层,内部的一些核心内容,如着色器,材质,灯光等都是需要借助 GLSL ES 语法来操作的。GLSL有自己的语法,跟 JS 有些不同。

  • 4、GLSL
    基于 OpenGL,运行在GPU上的着色器语言(OpenGL Shading Language)

Shading Language 目前市面上主要有3种语言
1、GLSL(OpenGL Shading Language): 基于 OpenGL;
2、HLSL(High Level Shading Language):基于 DirectX;
3、Cg(C for Graphic): NVIDIA 公司的;

2、GLSL 语法

  • 1、大小写敏感
  • 2、强类型的语言
  • 3、单行注释使用//,多行注释则是/* */
  • 4、基本数据类型
数据类型 说明
void no function return value or empty parameter list
bool Boolean
int signed integer
float floating scalar
vec2, vec3, vec4 n-component floating point vector
bvec2, bvec3, bvec4 Boolean vector
ivec2, ivec3, ivec4 signed integer vector
mat2, mat3, mat4 2×2, 3×3, 4×4 float matrix
sampler2D access a 2D texture
samplerCube access cube mapped texture

3、GLSL 获取数据的4种方法

  • 1、属性( Attribute )和缓冲( Buffer )
    缓冲是发送到 GPU 的一些二进制数据序列,通常情况下缓冲数据包括顶点位置,法向量,纹理坐标,颜色值等。你可以存储任何数据。
    属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。例如你可能在缓冲中用三个32位的浮点型数据存储一个位置值。对于一个确切的属性你需要告诉它从哪个缓冲中获取数据,获取什么类型的数据,起始偏移值是多少,到下一个位置的字节数是多少。
    缓冲不是随意读取的。事实上顶点着色器运行的次数是一个指定的确切数字,每一次运行属性会从指定的缓冲中按照指定规则依次获取下一个值。

1、初识 WebGL

WebGL 使得在支持 HTML 的 canvas 标签的浏览器中,不需要安装任何插件,便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行 2D 和 3D 渲染。WebGL 程序包括用 JavaScript 写的控制代码,以及在图形处理单元(GPU)中执行的着色代码(GLSL)。

  • 1、OpenGL
    计算机图形绘制的编程接口标准,支持不同平台上的图形绘制
  • 2、OpenGL ES
    在 OpenGL 的基础上,删除和简化一部分功能后形成的,为满足嵌入式设备需求而开发一个特殊版本
  • 3、WebGL
    WebGL 是基于 OpenGL ES 2.0 的 Javascript API

WebGL只是绑定外面接口的一层,内部的一些核心内容,如着色器,材质,灯光等都是需要借助 GLSL ES 语法来操作的。GLSL有自己的语法,跟 JS 有些不同。

  • 4、GLSL
    基于 OpenGL,运行在GPU上的着色器语言(OpenGL Shading Language)

Shading Language 目前市面上主要有3种语言
1、GLSL(OpenGL Shading Language): 基于 OpenGL;
2、HLSL(High Level Shading Language):基于 DirectX;
3、Cg(C for Graphic): NVIDIA 公司的;

2、GLSL 语法

  • 1、大小写敏感
  • 2、强类型的语言
  • 3、单行注释使用//,多行注释则是/* */
  • 4、基本数据类型
数据类型 说明
void no function return value or empty parameter list
bool Boolean
int signed integer
float floating scalar
vec2, vec3, vec4 n-component floating point vector
bvec2, bvec3, bvec4 Boolean vector
ivec2, ivec3, ivec4 signed integer vector
mat2, mat3, mat4 2×2, 3×3, 4×4 float matrix
sampler2D access a 2D texture
samplerCube access cube mapped texture

3、GLSL 获取数据的4种方法

  • 1、属性( Attribute )和缓冲( Buffer )
    缓冲是发送到 GPU 的一些二进制数据序列,通常情况下缓冲数据包括顶点位置,法向量,纹理坐标,颜色值等。你可以存储任何数据。
    属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。例如你可能在缓冲中用三个32位的浮点型数据存储一个位置值。对于一个确切的属性你需要告诉它从哪个缓冲中获取数据,获取什么类型的数据,起始偏移值是多少,到下一个位置的字节数是多少。
    缓冲不是随意读取的。事实上顶点着色器运行的次数是一个指定的确切数字,每一次运行属性会从指定的缓冲中按照指定规则依次获取下一个值。

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » WebGL 快速入门求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们