BabylonJs系列-2.常见概念解说
简介
这篇文章应该是会陆续更新的一篇文章,因为我计划将它做成BabylonAPI的个人目录。这样做的好处是什么呢?比如我需要实现某个效果的时候,就可以来翻翻这篇文章以寻求一些灵感,
万一有哪些可以实现这个需求的功能被我遗漏了呢?
对于入门者来说,这篇文章分为基本概念和进阶概念,建议只需要看基本概念就够了,等了解并编写了一些实例之后才回过头看看进阶的概念。入门者建议搭配系列第一章食用更佳
该目录下如果有详细文章的话会在标题旁边附上链接,文章只讲述大概概念及用途
WebGL基本概念
- 场景(Scene)
在上一章中,我们初始化时使用了Scene这个对象,这个即为场景。场景通俗来讲可以说是你构建的整个3D世界,也可以想做是我们的世界。
人是包含在世界中的,是世界的一部分,所以我们可以在scene中获取到该场景里面所有的物体,摄像头等对象。
场景中有坐标轴的概念,BabylonJs使用左手坐标系。用于放置物体,标记摄像头位置等等。比如你现在所处位置,如果需要放东西,那么需要设置一个位置,在WebGL中如果需要放置物体 则需要用到坐标轴的概念 - 模型(Mesh)
如果将场景比作世界的话,那么模型即为世界中的一切物体(比如地板,树木,建筑,动物等)。BabylonJs提供了几个常见的几何体可以引入(圆形,正方体,长方体,圆柱等),而复杂的比如动物,树木等物体则需要通过Babylon提供的API进行引入glb等模型文件。
对于初学者来说,Mesh有几个属性值得注意,
- position(位置):用于定义物体在场景的位置,有x,y,z坐标属性可以修改。使用Vector3向量类进行定义。
- scaling(缩放):用于定义物体自身的大小,同position一样有xyz属性可以修改。
- rotation(旋转):如字面意思,可以修改物体自身的旋转角度,有xyz属性可以修改。 学习到这里,其实已经可以尝试修改上一章demo中球体试试看效果了,改一下球体位置,大小等,也可以试着引入一个正方体,修改它的旋转角度看看效果。
- 材质 材质就是物体的质感,比如铁球会反光的效果就需要设置物体的材质。
- 漫反射材质(Diffuse)—— 在光线下观察的材料的基本颜色或质地;
- 镜面材质,也叫高光(Specular)—— 光线给材质的亮点;
- 发光材质(Emissive)—— 发光材料的颜色或质地,如自发光;
- 环境材质(Ambient)—— 由环境背景光照明的材料的颜色或质地。
- 贴图纹理 纹理是我们经常会用到的东西,他可以在物体上面贴图片,或者实现让物体透明等效果。比如你现在要做一个砖头,那么最简单的方式就是往一个长方体Mesh上面贴一张砖头的图片,那它就是一个砖头了。纹理可以是图片,透明,颜色等。
- 灯光(Light)
灯光词如其意,把场景想象成一个黑暗的房间,那么就需要灯光来照亮房间。灯光有位置,照射方向,角度,强弱等属性可以选择,编写时可参照现实的灯光
常见的灯光对象有
点光源(PointLight,类似于灯泡),
方向光(DirectionalLight,类似于太阳光,类似于平行光),
聚光灯(SpotLight,类似于手电筒,探照灯),
球形光(HemisphericLight,模拟周围环境光,效果和方向光很像) - 摄像机
了解了上面的基本概念后,我们就可以知道一个3D世界的组成了。但是我们怎么去看这个世界呢?这就需要摄像机了,它会把拍摄到的内容显示到canvas(电视)让我们可以直观的观察到我们构建的3D世界。我们也可以设置相机的position,方向等属性来选择观看的位置
下面介绍几种相机类型:
- 通用相机(UniversalCamera):可以通过鼠标,键盘等外设控制视角
- 弧度旋转相机(ArcRotateCamera):这个相机总是指向一个给定的目标位置,并且可以围绕目标旋转,目标是旋转的中心。它可以用鼠标来控制,也可以用触摸事件来控制。
- 跟随相机(FollowCamera):跟随它的目标进行移动 等
基础概念总结
在上面我们了解到了场景,模型,灯光。这样可以让我们构建一个简单的3D世界。如果想要物体好看点,那么可以使用材质,贴图纹理修饰模型。最后我们可以使用摄像机来观察我们构建的这个世界。
详细点说就是,当我们生成了一个场景(Scene),你可以想象自己拥有了一个3D的世界,里面有坐标系用于放置东西。那么你可以用模型来放置你想放置的任何东西。最后设置摄像机来显示你构建的世界
WebGL进阶
todo 后续更新,先编写入门系列
- 模型导入
- 粒子系统
- 爆炸效果
- 重力检测
- WLGL渲染
- 动画使用
WebGL优化
- 离屏渲染
- GPU拾取