threejs引擎分享
2023-01-05 10:13:13 8 举报AI智能生成
就是一个乱谈
作者其他创作
大纲/内容
与unity与UE相比，这就是个webgl的工具包，其语法也和直接调用图形api很类似
webgl有很多限制和兼容性问题，这个我们不必多说
所谓的三维渲染其实就是在2d渲染的基础上，加入了透视投影的映射，我们学的线性代数有很大一部分知识被运用到了这个三维到二维的变换中
3D渲染API最大的作用就是把这个变换的过程放到了显卡上去运行，从而实现了实时性，用CPU做也行，简单的图形完全没问题
引擎
这个editor很简单，功能也很少，主要用来查看效果，另外这个editor导出的模型是经过压缩的，非常友好
http://116.196.117.231:3460/examples/?q=gltf#webgl_tonemapping
threejs里支持物理材质，通过漫反射，自发光，高光，环境，法线等贴图，可以达到非常不错的渲染效果
材质
threejs提供平行光，聚光灯，点光源，半球光，场景光这几种灯光类型，所有standardmaterial都会收到环境贴图的影响，也就是所谓的天光
我们在实际开发中要尽量减少灯光的使用以提高性能
灯光
editor
因为threejs无法像UE或是unity那样在editor中自动或是半自动的设置碰撞体，而直接用复杂的模型来构建物理世界是非常消耗资源的，
所以我们使用可以包裹住原模型的碰撞模型来进行替代
碰撞体要求模型尽可能的简单，面数要非常低，这样进行物理计算的时候就会快一点
目前采用的是碰撞体与原模型分开导入的模式，解决了部分iphone手机崩溃的问题，也间接证实了iphone对浏览器cpu占用的某些限制
所以碰撞体是一个单独的模型
这里主要讲一讲碰撞体
物理
bloom是一种后期效果
即bloom是在每一帧的渲染画面上做文章，就像AE或者PS里的调色插件，只不过是在GPU上通过着色器来完成的
后期效果即决定了要实现单独的辉光控制就必须进行分层渲染，然后合并，这在场景不复杂的情况下还可以，因为其每一帧都要渲染两副画面，还要进行场景中所有物体的材质替换，所以渲染效率会大打折扣，深度计算与抗锯齿计算也会收到极大的影响
所以我们还是采用整体上对光度的控制来进行辉光的实现
是0到1的值，1即代表所有的物体都不会被bloom
0代表所有的物体都会被bloom
其敏感的是RGB三个值相加的结果，即越白的东西越容易被辉光
bloom的阈值
bloom的实现
像standard，phsical，lambert这些材质，其不同就是着色器的不同
https://guigui267.gitee.io/ShaderBall/#/balls
着色器中描述的模型中点的映射，像一些病毒类的东西就是对顶点做的动画
顶点着色器
这就是实际显示的像素的值了，大部分特效都是这个做的
像素着色器
每一个材质都有其使用的着色器
建模唯一需要注意的就是把模型的UV正确的展开，因为着色器中每一个“进程”唯一能够获取到的就是其UV值，所以这种动画效果都是通过控制UV值的变换来实现的，UV必须正确的展开
UV
除了UV值，可以通过CPU像GPU传递uniform对象，比方说我们把时间传进去，与UV值结合，我们就能在模型上画出想要的动画了（原理是这样，我很菜）
uniforms
着色器
threejs引擎知识分享
收藏
0 条评论
回复 删除
下一页
