侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

webgl学习笔记四

2024-04-27 星期六 / 0 评论 / 0 点赞 / 44 阅读 / 5031 字

前面都是假设z值为0,即二维空间,接下来进入三维世界。##1.视图矩阵视点:观察者所处的位置,默认为(0,0,0)视线:从视点出发,指向观察方向的线,默认为z轴的负半轴上方向:最终绘制在屏幕中影像的向

前面都是假设z值为0,即二维空间,接下来进入三维世界。##1.视图矩阵视点:观察者所处的位置,默认为(0,0,0)

视线:从视点出发,指向观察方向的线,默认为z轴的负半轴

上方向:最终绘制在屏幕中影像的向上的方向

由视点,目标点位置和上方向组成的矩阵成为视图矩阵

##2.可视空间可视空间内的物体可见,webgl会对它们进行渲染

  • 长方体可视空间,正投影。无近大远小的关系,远近的物体看上去是一样大的

  • 四棱锥/金字塔可视空间,透视投影,符合人眼规律,近大远小,有深度。

##3.物体遮挡具有不同深度的物体之间难免会有遮挡关系,正确的应该是前面的物体挡住后面的物体,但是webgl为了节省性能,忽略这个前后关系,而是按照缓存中的顺序进行渲染的。如果说整个场景都是静止的,你可以简单的先定义远处的物体,再依次到近处物体。但是,如果不再是静止的,这个方法就无效了,webgl提供了解决方法:隐藏面消除。

第一步中的函数enable()可以激活多种功能,见下图:

对应的还有gi.disable()

  • 深度冲突z轴相同重叠的两个物体,就会出现深度冲突现象,表现为图像不断闪烁,这个我在做一个h5小游戏的时候遇到过。对于固定z轴运动的物体,可以直接修改z轴值即可;但是对于不确定的运动估计,webgl提供一种解决方法:多边形偏移

  • 多边形偏移

##4.gl.drawElements()在绘制立方体时,如果我们继续使用之前的drawArray(),我们需要定义很多个点,远超过立方体的顶点数。因此改用gl.drawElements()。之前一直使用的是gl.ARRAY_BUFFER,这里要使用gl.ELEMENT_ARRAY_BUFFER

##5.OpenGL ES如同OpenGL ES是在OpenGL的基础上为了嵌入式设备而产生的,GLSL ES也是在GLSL的基础上,删减了部分功能而产生的。GLSL ES类似于c语言的风格。###5.1数据值类型只支持两种数据值类型:

  • 数值类型:整型、浮点型
  • 布尔型:true,false不支持字符串类型

###5.2变量名类似于c语言~~

  • 字母、数字、下划线组成
  • 不能以数字开头
  • 不能使用GLSL ES的保留关键字
  • 不能使用gl_,webgl,webgl_开头,这些前缀被GLSL ES保留

关键字见下图:

###5.3.强类型语言定义变量时必须制定变量类型,=两侧数据类型必须一致,main函数必须指定返回值

###5.4.类型转换我印象中c中会有一些自动类型转换(不知道记错没有~)但是GLSL ES貌似不会float atmk =8;//错误,不能将整型赋值给浮点型,必须使用GLSL ES内置的类型转换函数先转换类型

###5.5矢量和矩阵

###5.6构造专门创建指定类型变量的函数称为构造函数,构造函数的名称和其创建的变量的类型名称总是一致的####5.6.1矢量构造函数矢量构造函数很灵活,但是如果你传递了大于1个参数,而参数的个数又小于构建矢量所需要的参数个数就会报错####5.6.2矩阵构造函数可以传入矢量作为矩阵构造函数的参数,报错情况同矢量构造函数。###6.访问元素使用.或[]

广告 广告

评论区