|前端如何快速上手 Web 3D 游戏的开发( 三 )

利用碰撞检测来反应人物与金币之间的碰撞，首先需要给人物和金币都加上碰撞体包围盒。 Oasis Editor 提供了立方体碰撞体和球型碰撞体，引擎会在每帧更新时计算本节点的 collider 与其他 collider 的相交情况，球型碰撞体之间只需要比较球心距离与两个半径之间的大小关系，而立方体碰撞体需要计算八个顶点的位置关系，所以使用球型碰撞体性能上会好一些。
如下图，我们给人物添加了一个球型碰撞体，可以调节它的球心和半径。可视化包围盒只是编辑器运行时的插件，因此不会出现在我们的 H5 场景中。

本文插图
编辑完碰撞体包围盒之后，我们需要在脚本中进行碰撞检测，监听 collision 事件：
let cd = node.createAbility(o3.ACollisionDetection); cd.addEventListener('collision', e => { const colliderNode = e.data.collider.node; // 拿到被碰撞的节点 const name = colliderNode.name; // do something... });Shader
嘿嘿，看到 Shader 别急着划走，掌握了 Shader 你就可以：

自定义光照、物理等模型，可以开发更多酷炫的效果
能够优化渲染性能
能够帮助我们排查渲染上的问题

列举几个 Shader 的效果，更多效果可以前往shadertoy：

本文插图

本文插图
1、什么是 ShaderShader（着色器）是运行在 GPU 上的小程序，这些小程序为图形渲染管线的某个特定部分而运行，它用于告诉图形硬件如何计算和输出图像。为了更深入了解 Shader 的原理，我们需要了解 OpenGL 的渲染流水线，这里以渲染跑酷游戏的地面模型为例：
CPU 应用阶段
我们在3.1.1中上传了地面的 fbx 模型文件，其中包含了顶点位置、UV、法线、切线等信息， CPU 将这些信息加载到显存中，然后设置渲染状态，告诉 GPU 如何进行渲染工作。最后 CPU 会发出渲染命令（Drawcall），由GPU 接收并进行渲染。
GPU 渲染管线

本文插图
GPU 渲染管线包含了几何阶段和光栅化阶段，顶点着色器（Vertex Shader）和片元着色器（Fragment Shader）分别位于这两个阶段中。
几何阶段：顶点着色器接收 CPU 传过来的顶点数据，通常在这个阶段做一些空间变换、顶点着色等操作。接着会经过裁剪，把不在相机视野中的顶点裁剪掉，并剔除某些图元，然后将物体坐标系转换到屏幕坐标系。
光栅化阶段：两个顶点之间有很多个像素，片元着色器会对像素进行处理，除了进行纹理采样，还会将像素与灯光进行计算，产生反射、折射等效果。同一个屏幕像素点可能会有多个物体，这时候需要通过 alpha 测试、深度测试、模板测试、混合（blend）等处理，把同一位置的像素进行过滤或合并，最终渲染到屏幕上。
2、如何编写ShaderOasis Editor 中写 Shader 需要经过这几个步骤：（1）在资源区中添加“Shader 材质” ，然后绑定到模型上