三个实时渲染场景,覆盖资产管线、光学透射与自定义着色 —— 全部在浏览器中原生运行,零插件。
正在构建场景…
基于 glTF 2.0 的工业级 PBR 资产,在 HDR 环境光下呈现金属、粗糙度与自发光的真实层次。点击「爆炸拆解」,观察零件级的空间结构。
PBR 次表面透射(Transmission)让光线穿过几何体时真实弯折:1.52 折射率、柯西色散与清漆涂层,共同雕琢出这枚液态玻璃。
五阶分形噪声在顶点着色器中实时置换球面,菲涅尔边缘光由片元着色器逐像素计算 —— 每一帧,都是纯粹的数学。
左侧编辑、右侧渲染。内置模板覆盖入门到进阶 —— 改一行,点运行,立刻看到结果。
从网页展示到 3A 级 Web 游戏,Babylon.js 提供覆盖渲染、物理、XR 与内容管线的完整能力。
PBR Metallic-Roughness 工作流,支持清漆、各向异性、次表面散射与 HDR 环境探针,逼近真实世界的光。
全球首批完整支持 WebGPU 的 Web 引擎:计算着色器、更低的 CPU 开销,为下一代 Web 图形而生。
十万级粒子在 GPU 端并行模拟:星云、流体、魔法特效,以毫秒级开销驱动震撼视效。
一行代码接入 VR / AR:手势追踪、平面检测、空间锚点与空间音频,全部开箱即用。
深度集成工业级 Havok:高保真刚体碰撞、关节约束、布娃娃系统与极速碰撞检测。
可视化搭建着色器逻辑,无需手写 GLSL —— 艺术家的图形学画布,工程师的效率工具。
CDN 直接引入,或通过 npm 获得完整的模块化与类型支持。
生产环境提示 — 官方 CDN 面向学习、教学与原型验证。生产项目请通过 npm 安装,或托管至自有 CDN,以保证可用性与版本锁定。
<!-- 核心引擎 -->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<!-- 模型加载器:glTF / OBJ / STL -->
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!-- 高级材质库 -->
<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<!-- 2D / 3D GUI 系统 -->
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
# 安装
npm install babylonjs --save
# 完整引入
import * as BABYLON from 'babylonjs';
# 按需引入(支持 Tree-Shaking,推荐生产环境)
import { Engine, Scene, ArcRotateCamera } from '@babylonjs/core';
// tsconfig.json — 开启全局类型提示
{
"compilerOptions": {
"target": "ES2022",
"moduleResolution": "node",
"types": ["babylonjs", "babylonjs-gui", "babylonjs-loaders"]
}
}
cdn.babylonjs.com/babylon.jscdn.babylonjs.com/loaders/babylonjs.loaders.min.jscdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.jscdn.babylonjs.com/gui/babylon.gui.min.js从在线实验到模型导出,Babylon.js 生态覆盖 3D 内容生产的每一个环节。
在线代码实验场,数万个社区开源案例,学习与分享 3D 创意的第一站。
拖拽即可检视 .babylon / glTF / glb 模型,快速核对材质、骨骼与动画。
可视化节点着色器编辑器,拖拖拽拽即可构建复杂材质并导出复用。
Create Your Own Shader —— 在线 GLSL 实验室,实时编写顶点与片元着色器。
Blender / 3ds Max / Maya 官方导出插件,建模软件一键直达 Web 端。
极其活跃的全球社区,核心研发团队每日在线解答前沿图形学问题。