BABYLONJS 官方文档

https://doc.babylonjs.com/
https://doc.babylonjs.com/

Getting Started 入门示例

示例1：场景+模型

https://doc.babylonjs.com/start/chap1

示例2：创建一个小镇场景

https://doc.babylonjs.com/start/chap2

示例3：创建小镇场景里面的动画

https://doc.babylonjs.com/start/chap3

示例4：碰撞检测

https://doc.babylonjs.com/start/chap4

示例5：环境设置（山、天空、树）

https://doc.babylonjs.com/start/chap5

示例6：粒子喷泉

https://doc.babylonjs.com/start/chap6

示例7：灯光设置和黑夜模式

https://doc.babylonjs.com/start/chap7

示例8：视角设置

https://doc.babylonjs.com/start/chap8

Diving Deeper 深入了解

动画 Animation

音频 Audio

行为 Behaviors

• 相机行为 Camera Behavior
• 网格物体行为 Mesh Behavior

相机 Cameras

控制器 2D Controls

• 时间线控制 Timeline Control
• 拉伸控制 Resizer Control
• 图片滤镜控制 Image Filter Control

开发支持 Develop With Babylon.js

• 论坛
• 引擎版本
• npm包
• 等等

环境 Environment

• 天空盒子 Sky box
• 背景材质
• 镜头光晕
• 反射、镜面
• 全景图片
• 全景视频

事件系统 Events

• 动作 Actions
• 监听 Observables
• 异步回调 Promises

交互界面绘制 GUI

• BabylonGUI功能介绍
• 滚动窗口 Scroll View
• 三维GUI Babylon 3D GUI

用户输入 Inputs

• 游戏键盘 Gamepads

• 虚拟操纵杆 Virtual Joysticks

  • 有点像王者荣耀的操作

• 设备资源管理 Device Source Manager

资源导入 Importing Assets

• 加载任意类似资源 SceneLoader

• gltf、stl、obj资源加载

• 资源异步递增加载 Incremental Loading System

  • 可见才加载
  • .incremental.babylon文件

• 自定义加载器 Create Your Own File Importer

• 统一资源管理器 Asset Manager

• 场景资源容器 Asset Containers

• 逐级加载 低清到高清 Progressively Load

灯光 Lights

• 4种灯光介绍
• 阴影 Shadow
• 实时阴影 Cascaded Shadow Map
• 体积光 扩散 效果 Volumetric Light Scattering Post Process

材质 Materials

• 材质的使用 Using Materials

  • 材质基本介绍 Introduction To Materials ⭐

  • 贴图 Mapping

    • 凹凸贴图 Bump Mapping
    • 透明贴图 Opacity Mapping
    • 平铺贴图 Tiling Mapping
    • 细节贴图 Detail Mapping

  • 视差贴图 Parallax Mapping

  • 如何将材质应用到网格的各个独立的面 Applying Materials to Individual Faces

  • 如何将不同材质应用的网格的正面和背面 Applying Different Materials to the Front and Back

  • 复合材质 Multi-Materials

  • 动态纹理 Dynamic Textures

  • 视频纹理 Dynamic Textures

  • 混合模式 Blend Modes

  • 物理渲染PBR Physically Based Rendering

  • 如何在物理渲染时使用 高动态光照渲染 Using An HDR Environment For PBR

  • 掌握PBR材质 Mastering PBR Materials

  • 反射纹理 Reflection Texture

    • 反射 Reflection
    • 折射 Refraction

  • 菲涅尔参数 Fresnel Paramaters

    • 用于基础材质中调节高光折射率的

  • 过程纹理 Procedural Textures

  • KTX2 压缩纹理支持

• 节点材质 Node Material

• 材质进阶 Advanced Materials

  • 材质是如何工作（生效）的 How Materials Work
  • 材质和三角面顶点的关系 Materials and Vertices
  • 自定义过程纹理 Creating Procedural Textures
  • 创建纹理包 Creating A Texture Package
  • 理解法线贴图 Understanding Normal Maps
  • 如何创建原始贴图 Raw Textures
  • 深度渲染器 Depth Renderer
  • 对数深度缓冲区 Logarithmic Depth Buffer

网格物体 Mesh

• 创建网格 Create Meshes

• 网格变换 Mesh Transformations

• 网格的复制、克隆、实例化 Copies, Clones, and Instancing

• 网格交互 Interactions

  • 碰撞 Collision
  • 拾取 Picking

• 如何绘制网格的包围盒 Drawing Bounding Boxes

• 如何给网格表面动态贴花 Decals

• 如何高亮网格 Highlighting Meshes

• 如何使网格发光 Making Meshes Glow

• 合并网格 Merging Meshes

• 如何绘制曲线 Drawing Curves

• 三维路径 Path3D

  • 使用三维点坐标集合构建三维路径

• 分面数据 FacetData

  • 面 face 比如：立方体有前后左右上下6个面
  • 分面 facet 比如：前面分为2个小三角，每个小三角就是一个分面
  • Babylon的网格实例提供了一个facetNb属性来获取分面数据，但是默认是不赋值的（会影响性能），需要先调用实例的updateFacetData() 方法

• 细节分级 Levels of Detail（LOD）

  • 在不同距离的时候显示不同细节程度

• 网格动态变形 Dynamically Morph A Mesh

• 网格变形目标 Morph Targets

• 骨骼动画 Bones and Skeletons

• 工具图层 Rendering Utility Layers

• 对网格平移、拉伸、旋转的可视化小装置 Gizmos

• 如何利用Auto-LOD对模型简化 Simplifying Meshes With Auto-LOD

• 如何绘制网格的轮廓线 Rendering Edges

• 牵引网格 Trail Mesh

  • 如何制作彗星拖尾效果

• 网格爆炸 Exploding Meshes

  • 制作零部件爆炸效果

遮挡检测 Occlusion Queries

• 可以设置网格不可见不渲染

粒子 Particles

• 粒子系统 Particle System

• 实体粒子系统SPS Solid Particle System

  • 每个粒子都是一个网格

• 点云系统PCS Point Cloud System

物理世界 Physics

• 如何使用物理引擎 Physics Engine
• 力 Forces
• 关节 Joints
• 轴心和轴 Pivots and Axes
• 混合体、复合体 Compound Bodies
• 软体 Soft Bodies
• 高级物理特性 Advanced Physics Features
• 自定义物理引擎 Add Your Own Physics Engine

后处理 Post Processes

• Babylon内置了很多后处理工具

场景 Scene

• 新建场景 Fast Build A world
• 场景内交互 Interacting With Scenes
• 多场景 Using Multiple Scenes
• 多画布 Using Multiple Canvases
• 如何使用录制器记录场景变化，并应用到场景中 Applying Delta Changes To A Scene
• 如何自定义场景加载画面 Creating Custom Loading Screens
• 如何优化场景性能 Optimizing Your Scene
• 自带的场景优化器 The Scene Optimizer
• 使用八叉树进行场景优化 Optimizing With Octrees
• 使用缓存资源进行场景优化 Optimizing Using Cached Resources
• 如何减少内存容量使用 Reducing Memory Footprint
• 使用离屏渲染 Using Offscreen Canvas
• 截图 Render Scenes To .png Files
• 截视频 Render Scenes To Video
• 如何使用平面切割场景 Using Clipping Planes
• 服务器渲染 Rendering Scenes On A Remote Server
• 如何用layerMask在场景中隐藏网格 In-Depth layerMask

二维平面精灵图 Sprites

标签 Tags

• 可以给场景中的网格设置标签，可以通过标签查询网格

网页虚拟现实、增强现实 WebXR

Advanced Topics 进阶话题

.babylon文件 The .babylon File Format

• 介绍了.babylon文件的数据格式

着色器介绍 Introduction to Shaders

• 介绍了着色器作用和编写方式

如何构建一个最小版本的BJS Creating The Mini-fied Version of Babylon.js

多平台压缩纹理的支持情况 Multi-Platform Compressed Textures

WebGL2 的支持情况 WebGL2 Support

WebGPU 的支持情况 WebGPU Support

如何在服务器运行 BJS 执行渲染

• 可用于测试

Tools And Resources 工具及资源

工具 Tools

• 游乐场 Playground

  • 可以在线调试运行示例

• 检查器 Inspector

  • 可以拾取查看修改场景中的网格等信息

• 节点材质编辑器 Node Material Editor

• 粒子编辑器 Particle Editor

• 精灵图编辑器 The Sprite Editor

• 纹理检查器 Texture Inspector

• 骨骼查看器 Skeleton Viewer

资源库 Asset Libraries

• 提供了一堆可以在playground使用的资源

工具类 Utilities Functions

• 求表面积 Mesh Surface Area

• 裁剪网格 Extract Submeshes as Meshes

• Picture Frame

• 增加网格分面 Increasing Facets

  • 可以制作出平面长草的效果

• 如何创建网格内部点云 Create Points Inside A Mesh

• 检测点是否在网格内部 Check When a Point is Inside a Mesh

• 如何绘制带宽度的线 Draw a Line With a Set Width

• 共享顶点 Forcing Shared Vertices

  • 能降低纹理线条的尖锐度

• 网格挤压拐角处理 Extrusion With Sharp Corners

• 显示顶点法向量 Display Vertex Normals

• 展示路径点的切线、法向量及副法向量 Display Tangent, Normal, and Binormal of a Path3D

• 设置网格旋转和放大的中心点 Rotate and Scale About a Point

• 根据圆心点和夹角向量绘制扇形 Draw a Sector of a Circle

• 球形平移相机 Spherical Panning Camera

  • 构建 VR360度场景

• 在网格表面绘制点云 Draw Points on a Mesh Surface

• 显示世界坐标系 Display World Axes

离线教程 Offsite Tutorials

https://doc.babylonjs.com/toolsAndResources/offsite

Guided Learning 学习指南

如何使用BabylonJS开发一个游戏 Create A Game Tutorial Series

各种视频教程 Video Tutorials

工作间 Workshops 提供了一系列设计和试验结果

• 路径追踪 Simple Path Following
• 简单的车辆驾驶 A Simple Driven Car
• 房屋设计 House Creation Design
• 房屋构造 House Creation Use
• 给房子加屋顶 Adding a Roof
• 复杂的路径追踪 Following a Complex Track
• 非物理碰撞 Thoughts on Non Physics Collisions
• 物理碰撞遇到的问题 Issues with Collisions
• 格子间里面的碰撞测试 Collisions Within a Grid
• 慢物理碰撞测试 Slow Particle Collisions
• 自由运动物理碰撞 Freely Moving Particle Collisions
• 简单VR Simple VR Game
• 波浪型着色器 Shader Wave Pattern
• 烟花着色器 Shader Fireworks

Extensions 扩展

如何支持亚马逊视频360°播放器 Azure Media Player 360 Video Plugin

BabylonJS的独立查看器 Babylon.js Viewer

BabylonJS集成到CMS（例如WordPress） Babylon.js CMS Integration

CastorGUI V2.0

• 一款GUI绘制库

克隆系统 Cloner System

动态地形 Dynamic Terrain

• 可以来生成地形

三维文字生成器 Mesh Writer

人群导航系统 Crowd Navigation System

纹理画板 Texture Canvas

• 一种可以把其他纹理绘制它上面的纹理

树生成器 Tree Generators

场景编辑器 Babylon.js Editor

模型导出器 Exporters

• 从3dsmax、blender等导出到babylonjs

gltf导出器 glTF Exporter

https://doc.babylonjs.com/