前面都是假设z值为0,即二维空间,接下来进入三维世界。 ##1.视图矩阵 视点:观察者所处的位置,默认为(0,0,0)
视线:从视点出发,指向观察方向的线,默认为z轴的负半轴
上方向:最终绘制在屏幕中影像的向上的方向
由视点,目标点位置和上方向组成的矩阵成为视图矩阵
##2.可视空间 可视空间内的物体可见,webgl会对它们进行渲染
- 长方体可视空间,正投影。无近大远小的关系,远近的物体看上去是一样大的
- 四棱锥/金字塔可视空间,透视投影,符合人眼规律,近大远小,有深度。
##3.物体遮挡 具有不同深度的物体之间难免会有遮挡关系,正确的应该是前面的物体挡住后面的物体,但是webgl为了节省性能,忽略这个前后关系,而是按照缓存中的顺序进行渲染的。如果说整个场景都是静止的,你可以简单的先定义远处的物体,再依次到近处物体。但是,如果不再是静止的,这个方法就无效了,webgl提供了解决方法:隐藏面消除。
第一步中的函数enable()可以激活多种功能,见下图:
对应的还有gi.disable()
-
深度冲突 z轴相同重叠的两个物体,就会出现深度冲突现象,表现为图像不断闪烁,这个我在做一个的时候遇到过。对于固定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.访问元素 使用.或[]