Babylonjs 官网demo预览图合集整理 带说明

 

整理一份官方案例demo预览图，方便看图时可以直接了解所运用的相关技术，部分带简略文字说明

简单说就是大致知道babylon能实现做什么，比如鼠标点击交互事件，动画，光影等等

 

官网案例 官网首页左上角的learn→examples  https://doc.babylonjs.com/examples/

右下角点击跳转playground，在线查看源码编辑运行

 

也可以从图片名称找到github内的源码，

或者添加前缀访问  https://www.babylonjs.com/demos/+图片名称

例如：https://www.babylonjs.com/demos/actions/ 

 

babylon官网 https://www.babylonjs.com/ 的源码可以从github下载

以下预览图为babylon官网部分demo

https://github.com/BabylonJS/Website/tree/master/build/Demos

ps.其中有10个因为源码错误 无法加载，只能在examples中运行

 

 

https://www.babylonjs.com/community/     【注意community和demos和examples的区别】

babylon官网的Demos，其中有些是跳转链接，无源码，有些作者在游戏内放了github源码地址

 

 

 

预览图：

ActionBuilder 按钮开关灯 在3dmax内实现的动画，网页端点击按钮从指定帧开始播放

Actions 鼠标点击模型触发开关灯，线框模式切换，actionevent具体可以查阅api，还有鼠标hover、模型相交碰撞等事件

 

AdvancedShadows 不同灯光阴影

Amp360Video 播放全景视频

 

AnimatedGif 切换例子特效，使用nme（nodeMaterialEditor）实现的shader和发光粒子特效，后面案例章节贴具体代码

AssetsManager 资源加载 头骨材质 ，加载器可以异步、同步下载模型和贴图，方便管理资源的下载，搭配container容器使用，可以查阅优化内存相关的章节

AudioAnalyser 声音播放

AudioAnalyzer 声音播放

Bones 骨骼动画

 

Boom 爆炸效果 物理碰撞

Bump 灯光材质 法线贴图

CellShading

 

CGS 模型组合 模型挖掉另一个模型  用于在没有模型师的情况下，webgl编程人员自己拼接一个模型，搭配meshMerge和mutiMaterial使用（模型合并、多材质球）

Charting 柱形动画，可适用于表格展现

CustomRenderTarget 自定义渲染目标，可适用于监控窗口

CustomShader 自定义着色器shader 

Dancers 多人跳舞 镜像instance复制 查看帧率 ，影分身镜像，优化好帮手，例如电影院的椅子做影分身实例，非常节约内存

Dancing CSG 跳舞音乐+CGS模型组合

Decals 鼠标点击位置贴花 类似子弹打击墙壁后生成的贴图，不考虑性能的情况下，墙上污渍都可以用贴花实现，当然最好还在在贴图上实现

DefaultRenderingPipeline

 

DisplacementMap

Distraction 赛车   低模赛车小游戏

DOF

DragNDrop 鼠标拖拽模型 垂直地板时的拖拽效果最好，如果视角侧着，位移计算有问题，需要设置垂直面的值

Espilit 有光影贴图的房子  类似CS:GO 【经典模型，开启inspector后可以调试查看运用了lightmap】 FPS第一人称WASD移动，以及修改重力实现上楼做法挺不错的

ExtrudePolygon 控制部分模型显示消失

Facets 小球物理碰撞

FatObjects Fast 2d动画 快速

 

FatObjects Fat

FatObjects Slim

FatObjects Slow 2D动画 慢速

 

Flat2009 住宅屋  FPS第一人称WASD控制

 

FlightHelmet 飞行员头盔

Fog 雾气  远处隐藏在雾里

Fresnel 菲涅尔透镜效果

Fur 毛发效果

GlowingEspilit 添加VR版本

GLTF 面部表情动画

GLTFMeshPrimitiveAttributeTest 原始节点测试

GLTFNormals 法线

GUI 界面按钮点击 , 界面有些可以用html dom实现，如果是悬浮在模型上方的告示牌，可以在mesh面片上画GUI，而且GUI支持9图拉伸

GUI镜头远近变化，按钮大小不变；放在模型上的GUI，按钮图片就根据近大远小变化了，每帧修改面片旋转轴，朝向镜头即可。

Heart 心脏动画 火焰粒子特效

Heightmap 山地高度图

Highlights 高光

HillValley 小镇图

HillValleyVR 小镇图VR版

Ink 黑板写字

InstancedBones 骨骼动画

Instances 高度图地形重力移动 最关键是树模型的instance镜像复制节省资源   影分身！

Instances2 飞船引擎

Lens 透镜丁达尔现象

Lights 灯光

Lines 线

LOD 远距离隐藏优化 ，api有两种lod优化，克隆模型，根据距离更改材质；根据距离修改模型面数；

LookAt 朝向 修改模型朝向  适用于实时监控某个物体移动，把camera的父节点设置为某个mesh，然后朝向这个mesh，mesh根据动画位移，镜头也跟着位移

Mansion 公馆 火车在动  火车蒸汽粒子特效

MansionVR 版 古堡VR

MorphTargets 变形工具

MotionBlur 动态模糊

Multimaterial 多材质  3dmax导出多材质模型，在.gltf .glb查看貌似有问题，求大佬解惑  

这个是代码实现的多材质，mesh也可以通过代码合并

Octree 八叉树

 

Particles 粒子特效

 

Particles2 粒子特效

PBRGlossy 光滑PBR头盔  PBR材质调整metal和rougness值

PBRGlossyBloom 光滑头盔

PBRRough 粗糙

PBR材质

Physics 物理效果

Planet 星球

PointLightShadowMap 点光源阴影

Polygon 多边形 鸟

PPBloom 光华

PPConvolution 对卷积

PPRef 在镜头前面多一层反射

Procedural 程序控制的自动

RefProbe 反射采样

Refraction 折射

Retail 零售店

 

Ribbons 彩带

 

 

SelfShadowing 自身光影

Shadows 影子

Simplification 减面 babylon自动减面优化

SoftShadows 柔和阴影

 

SpaceDeK 太空站游戏素材

Spaceship 太空飞船

 

SPF 等离子星环

 

Sponza 古堡 官方团队demo

 

SponzaDynamicShadows 古堡阴影 官方团队demo

 

SPSCollisions SPS碰撞

SSAO 环境光屏蔽  屏幕空间环境光屏蔽（Screen Space Ambient Occlusion）

 

SSAO2 环境光屏蔽 参数控制

 

StandardRenderingPipeline 输送线渲染

 

TheCar 车 光晕就是白色面片

 

Train 火车移动

 

Tunnel 地穴洞

 

V8 引擎动画

 

VertexData 顶点 云滚动动画

 

Views 多镜头

 

Viper 蝰蛇飞机

 

VolumetricLightScattering 体积光分散

 

WCafe 咖啡厅