BABYLONJS 官方文檔
https://doc.babylonjs.com/
Getting Started 入門(mén)示例
示例1：場(chǎng)景+模型
https://doc.babylonjs.com/start/chap1
示例2：創(chuàng)建一個(gè)小鎮(zhèn)場(chǎng)景
https://doc.babylonjs.com/start/chap2
示例3：創(chuàng)建小鎮(zhèn)場(chǎng)景里面的動(dòng)畫(huà)
https://doc.babylonjs.com/start/chap3
示例4：碰撞檢測(cè)
https://doc.babylonjs.com/start/chap4
示例5：環(huán)境設(shè)置（山、天空、樹(shù)）
https://doc.babylonjs.com/start/chap5
示例6：粒子噴泉
https://doc.babylonjs.com/start/chap6
示例7：燈光設(shè)置和黑夜模式
https://doc.babylonjs.com/start/chap7
示例8：視角設(shè)置
https://doc.babylonjs.com/start/chap8
Diving Deeper 深入了解
動(dòng)畫(huà) Animation
音頻 Audio
行為 Behaviors
- 相機(jī)行為 Camera Behavior
- 網(wǎng)格物體行為 Mesh Behavior
相機(jī) Cameras
控制器 2D Controls
- 時(shí)間線控制 Timeline Control
- 拉伸控制 Resizer Control
- 圖片濾鏡控制 Image Filter Control
開(kāi)發(fā)支持 Develop With Babylon.js
- 論壇
- 引擎版本
- npm包
- 等等
環(huán)境 Environment
- 天空盒子 Sky box
- 背景材質(zhì)
- 鏡頭光暈
- 反射、鏡面
- 全景圖片
- 全景視頻
事件系統(tǒng) Events
- 動(dòng)作 Actions
- 監(jiān)聽(tīng) Observables
- 異步回調(diào) Promises
交互界面繪制 GUI
- BabylonGUI功能介紹
- 滾動(dòng)窗口 Scroll View
- 三維GUI Babylon 3D GUI
用戶輸入 Inputs
游戲鍵盤(pán) Gamepads
-
虛擬操縱桿 Virtual Joysticks
- 有點(diǎn)像王者榮耀的操作
設(shè)備資源管理 Device Source Manager
資源導(dǎo)入 Importing Assets
加載任意類(lèi)似資源 SceneLoader
gltf、stl、obj資源加載
-
資源異步遞增加載 Incremental Loading System
- 可見(jiàn)才加載
- .incremental.babylon文件
自定義加載器 Create Your Own File Importer
統(tǒng)一資源管理器 Asset Manager
場(chǎng)景資源容器 Asset Containers
逐級(jí)加載 低清到高清 Progressively Load
燈光 Lights
- 4種燈光介紹
- 陰影 Shadow
- 實(shí)時(shí)陰影 Cascaded Shadow Map
- 體積光 擴(kuò)散 效果 Volumetric Light Scattering Post Process
材質(zhì) Materials
-
材質(zhì)的使用 Using Materials
材質(zhì)基本介紹 Introduction To Materials ?
-
貼圖 Mapping
- 凹凸貼圖 Bump Mapping
- 透明貼圖 Opacity Mapping
- 平鋪貼圖 Tiling Mapping
- 細(xì)節(jié)貼圖 Detail Mapping
視差貼圖 Parallax Mapping
如何將材質(zhì)應(yīng)用到網(wǎng)格的各個(gè)獨(dú)立的面 Applying Materials to Individual Faces
如何將不同材質(zhì)應(yīng)用的網(wǎng)格的正面和背面 Applying Different Materials to the Front and Back
復(fù)合材質(zhì) Multi-Materials
動(dòng)態(tài)紋理 Dynamic Textures
視頻紋理 Dynamic Textures
混合模式 Blend Modes
物理渲染PBR Physically Based Rendering
如何在物理渲染時(shí)使用 高動(dòng)態(tài)光照渲染 Using An HDR Environment For PBR
掌握PBR材質(zhì) Mastering PBR Materials
-
反射紋理 Reflection Texture
- 反射 Reflection
- 折射 Refraction
-
菲涅爾參數(shù) Fresnel Paramaters
- 用于基礎(chǔ)材質(zhì)中調(diào)節(jié)高光折射率的
過(guò)程紋理 Procedural Textures
KTX2 壓縮紋理支持
節(jié)點(diǎn)材質(zhì) Node Material
-
材質(zhì)進(jìn)階 Advanced Materials
- 材質(zhì)是如何工作（生效）的 How Materials Work
- 材質(zhì)和三角面頂點(diǎn)的關(guān)系 Materials and Vertices
- 自定義過(guò)程紋理 Creating Procedural Textures
- 創(chuàng)建紋理包 Creating A Texture Package
- 理解法線貼圖 Understanding Normal Maps
- 如何創(chuàng)建原始貼圖 Raw Textures
- 深度渲染器 Depth Renderer
- 對(duì)數(shù)深度緩沖區(qū) Logarithmic Depth Buffer
網(wǎng)格物體 Mesh
創(chuàng)建網(wǎng)格 Create Meshes
網(wǎng)格變換 Mesh Transformations
網(wǎng)格的復(fù)制、克隆、實(shí)例化 Copies, Clones, and Instancing
-
網(wǎng)格交互 Interactions
- 碰撞 Collision
- 拾取 Picking
如何繪制網(wǎng)格的包圍盒 Drawing Bounding Boxes
如何給網(wǎng)格表面動(dòng)態(tài)貼花 Decals
如何高亮網(wǎng)格 Highlighting Meshes
如何使網(wǎng)格發(fā)光 Making Meshes Glow
合并網(wǎng)格 Merging Meshes
如何繪制曲線 Drawing Curves
-
三維路徑 Path3D
- 使用三維點(diǎn)坐標(biāo)集合構(gòu)建三維路徑
-
分面數(shù)據(jù) FacetData
- 面 face 比如：立方體有前后左右上下6個(gè)面
- 分面 facet 比如：前面分為2個(gè)小三角，每個(gè)小三角就是一個(gè)分面
- Babylon的網(wǎng)格實(shí)例提供了一個(gè)facetNb屬性來(lái)獲取分面數(shù)據(jù)，但是默認(rèn)是不賦值的（會(huì)影響性能），需要先調(diào)用實(shí)例的updateFacetData() 方法
-
細(xì)節(jié)分級(jí) Levels of Detail（LOD）
- 在不同距離的時(shí)候顯示不同細(xì)節(jié)程度
網(wǎng)格動(dòng)態(tài)變形 Dynamically Morph A Mesh
網(wǎng)格變形目標(biāo) Morph Targets
骨骼動(dòng)畫(huà) Bones and Skeletons
工具圖層 Rendering Utility Layers
對(duì)網(wǎng)格平移、拉伸、旋轉(zhuǎn)的可視化小裝置 Gizmos
如何利用Auto-LOD對(duì)模型簡(jiǎn)化 Simplifying Meshes With Auto-LOD
如何繪制網(wǎng)格的輪廓線 Rendering Edges
-
牽引網(wǎng)格 Trail Mesh
- 如何制作彗星拖尾效果
-
網(wǎng)格爆炸 Exploding Meshes
- 制作零部件爆炸效果
遮擋檢測(cè) Occlusion Queries
- 可以設(shè)置網(wǎng)格不可見(jiàn)不渲染
粒子 Particles
粒子系統(tǒng) Particle System
-
實(shí)體粒子系統(tǒng)SPS Solid Particle System
- 每個(gè)粒子都是一個(gè)網(wǎng)格
點(diǎn)云系統(tǒng)PCS Point Cloud System
物理世界 Physics
- 如何使用物理引擎 Physics Engine
- 力 Forces
- 關(guān)節(jié) Joints
- 軸心和軸 Pivots and Axes
- 混合體、復(fù)合體 Compound Bodies
- 軟體 Soft Bodies
- 高級(jí)物理特性 Advanced Physics Features
- 自定義物理引擎 Add Your Own Physics Engine
后處理 Post Processes
- Babylon內(nèi)置了很多后處理工具
場(chǎng)景 Scene
- 新建場(chǎng)景 Fast Build A world
- 場(chǎng)景內(nèi)交互 Interacting With Scenes
- 多場(chǎng)景 Using Multiple Scenes
- 多畫(huà)布 Using Multiple Canvases
- 如何使用錄制器記錄場(chǎng)景變化，并應(yīng)用到場(chǎng)景中 Applying Delta Changes To A Scene
- 如何自定義場(chǎng)景加載畫(huà)面 Creating Custom Loading Screens
- 如何優(yōu)化場(chǎng)景性能 Optimizing Your Scene
- 自帶的場(chǎng)景優(yōu)化器 The Scene Optimizer
- 使用八叉樹(shù)進(jìn)行場(chǎng)景優(yōu)化 Optimizing With Octrees
- 使用緩存資源進(jìn)行場(chǎng)景優(yōu)化 Optimizing Using Cached Resources
- 如何減少內(nèi)存容量使用 Reducing Memory Footprint
- 使用離屏渲染 Using Offscreen Canvas
- 截圖 Render Scenes To .png Files
- 截視頻 Render Scenes To Video
- 如何使用平面切割場(chǎng)景 Using Clipping Planes
- 服務(wù)器渲染 Rendering Scenes On A Remote Server
- 如何用layerMask在場(chǎng)景中隱藏網(wǎng)格 In-Depth layerMask
二維平面精靈圖 Sprites
標(biāo)簽 Tags
- 可以給場(chǎng)景中的網(wǎng)格設(shè)置標(biāo)簽，可以通過(guò)標(biāo)簽查詢網(wǎng)格
網(wǎng)頁(yè)虛擬現(xiàn)實(shí)、增強(qiáng)現(xiàn)實(shí) WebXR
Advanced Topics 進(jìn)階話題
.babylon文件 The .babylon File Format
- 介紹了.babylon文件的數(shù)據(jù)格式
著色器介紹 Introduction to Shaders
- 介紹了著色器作用和編寫(xiě)方式
如何構(gòu)建一個(gè)最小版本的BJS Creating The Mini-fied Version of Babylon.js
多平臺(tái)壓縮紋理的支持情況 Multi-Platform Compressed Textures
WebGL2 的支持情況 WebGL2 Support
WebGPU 的支持情況 WebGPU Support
如何在服務(wù)器運(yùn)行 BJS 執(zhí)行渲染
- 可用于測(cè)試
Tools And Resources 工具及資源
工具 Tools
-
游樂(lè)場(chǎng) Playground
- 可以在線調(diào)試運(yùn)行示例
-
檢查器 Inspector
- 可以拾取查看修改場(chǎng)景中的網(wǎng)格等信息
節(jié)點(diǎn)材質(zhì)編輯器 Node Material Editor
粒子編輯器 Particle Editor
精靈圖編輯器 The Sprite Editor
紋理檢查器 Texture Inspector
骨骼查看器 Skeleton Viewer
資源庫(kù) Asset Libraries
- 提供了一堆可以在playground使用的資源
工具類(lèi) Utilities Functions
求表面積 Mesh Surface Area
裁剪網(wǎng)格 Extract Submeshes as Meshes
Picture Frame
-
增加網(wǎng)格分面 Increasing Facets
- 可以制作出平面長(zhǎng)草的效果
如何創(chuàng)建網(wǎng)格內(nèi)部點(diǎn)云 Create Points Inside A Mesh
檢測(cè)點(diǎn)是否在網(wǎng)格內(nèi)部 Check When a Point is Inside a Mesh
如何繪制帶寬度的線 Draw a Line With a Set Width
-
共享頂點(diǎn) Forcing Shared Vertices
- 能降低紋理線條的尖銳度
網(wǎng)格擠壓拐角處理 Extrusion With Sharp Corners
顯示頂點(diǎn)法向量 Display Vertex Normals
展示路徑點(diǎn)的切線、法向量及副法向量 Display Tangent, Normal, and Binormal of a Path3D
設(shè)置網(wǎng)格旋轉(zhuǎn)和放大的中心點(diǎn) Rotate and Scale About a Point
根據(jù)圓心點(diǎn)和夾角向量繪制扇形 Draw a Sector of a Circle
-
球形平移相機(jī) Spherical Panning Camera
- 構(gòu)建 VR360度場(chǎng)景
在網(wǎng)格表面繪制點(diǎn)云 Draw Points on a Mesh Surface
顯示世界坐標(biāo)系 Display World Axes
離線教程 Offsite Tutorials
https://doc.babylonjs.com/toolsAndResources/offsite
Guided Learning 學(xué)習(xí)指南
如何使用BabylonJS開(kāi)發(fā)一個(gè)游戲 Create A Game Tutorial Series
各種視頻教程 Video Tutorials
工作間 Workshops 提供了一系列設(shè)計(jì)和試驗(yàn)結(jié)果
- 路徑追蹤 Simple Path Following
- 簡(jiǎn)單的車(chē)輛駕駛 A Simple Driven Car
- 房屋設(shè)計(jì) House Creation Design
- 房屋構(gòu)造 House Creation Use
- 給房子加屋頂 Adding a Roof
- 復(fù)雜的路徑追蹤 Following a Complex Track
- 非物理碰撞 Thoughts on Non Physics Collisions
- 物理碰撞遇到的問(wèn)題 Issues with Collisions
- 格子間里面的碰撞測(cè)試 Collisions Within a Grid
- 慢物理碰撞測(cè)試 Slow Particle Collisions
- 自由運(yùn)動(dòng)物理碰撞 Freely Moving Particle Collisions
- 簡(jiǎn)單VR Simple VR Game
- 波浪型著色器 Shader Wave Pattern
- 煙花著色器 Shader Fireworks
Extensions 擴(kuò)展
如何支持亞馬遜視頻360°播放器 Azure Media Player 360 Video Plugin
BabylonJS的獨(dú)立查看器 Babylon.js Viewer
BabylonJS集成到CMS（例如WordPress） Babylon.js CMS Integration
CastorGUI V2.0
- 一款GUI繪制庫(kù)
克隆系統(tǒng) Cloner System
動(dòng)態(tài)地形 Dynamic Terrain
- 可以來(lái)生成地形
三維文字生成器 Mesh Writer
人群導(dǎo)航系統(tǒng) Crowd Navigation System
紋理畫(huà)板 Texture Canvas
- 一種可以把其他紋理繪制它上面的紋理
樹(shù)生成器 Tree Generators
場(chǎng)景編輯器 Babylon.js Editor
模型導(dǎo)出器 Exporters
- 從3dsmax、blender等導(dǎo)出到babylonjs
