初始化创建实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
padding: 0;
margin: 0;
}
#canvasContainer {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<canvas id="canvasContainer"></canvas>
<script>
//初始化3d引擎
const canvas = document.getElementById('canvasContainer');
const engine = new BABYLON.Engine(canvas);
//添加场景
const scene = new BABYLON.Scene(engine);
//相机
const camera = new BABYLON.ArcRotateCamera(
'Camera',
Math.PI / 2,
Math.PI / 2,
2,
new BABYLON.Vector3(0, 0, 5),
scene
);
//添加相机控制
camera.attachControl(canvas, true);
// 创建内容，一个球
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene);
// loop
engine.runRenderLoop(function () {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
Api
地址：doc.babylonjs.com/typedoc/mod…
初始化
两种方式
- webgpu方式
- webgl方式
Babaylon.js 可以理解为一个游戏引擎，Engine 就是引擎，负责处理渲染、游戏循环、音频等。目前 WebGPU 已经开始慢慢被接受，所以使用 EngineFactory 可以自动选择底层渲染机制。WebGPU 的初始化是异步的，因此这里需要使用 async。
目前 Babylon.js 中的 WebGPU 并不是能直接替换传统 WebGL 的，因此有一些功能是有冲突或者不支持的。Babylon.js 可以直接指定需要的渲染机制：
//官方示例，反向兼容必须异步
const engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();
//webgl
const engine = new BABYLON.Engine(canvas);
babylonjs 引擎性能比对
Babylon.js 渲染引擎提供了两种引擎：Engine 和 WebGPUEngine
- 渲染API：
Engine使用 WebGL 渲染，而WebGPUEngine使用 WebGPU 渲染。WebGPU 是一个新的图形API，可以通过它优化现代GPU的渲染能力和计算能力。 - 性能：由于 WebGPU 允许更为直接地控制GPU的操作，使用
WebGPUEngine可以使得场景中的动态元素处理、特效渲染等更快速，且在大规模场景中运作更为流畅。 - 兼容性：由于 WebGPU 是比较新的 API，还不是所有的浏览器均提供对它的支持。现在只有chrome 113版本支持webGPU。
在babylonjs中使用WebGL引擎和WebGPU引擎加载同一个模型，进行性能对比：
- 更低的渲染延迟，WebGPUEngine 支持 WebGPU 原生异步调用机制，使得渲染执行更加高效。
- 更高的内存性能。WebGPUEngine 支持更快速的高效内存分配，同时避免频繁地切换内存。
Engine
-
canvasOrContext ：定义用于呈现的画布或 WebGL 上下文
-
antialias：布尔值，定义启用抗锯齿（默认值：假）
-
options：定义要发送到 getContext（） 函数的更多选项
-
adaptToDeviceRatio：布尔值 ； 定义是否适应设备的视口特征（默认值：false）：如果设置为 true，则在浏览器中放大和缩小将正确重新缩放硬件缩放。
new Engine（canvasOrContext： Nullable<HTMLCanvasElement | 屏幕外画布 |WebGLRenderingContext | WebGL2RenderingContext>， antialias？： boolean， options？： EngineOptions， adaptToDeviceRatio？： boolean）： Engine
//初始化3d引擎
const canvas = document.getElementById('canvasContainer');
const engine = new BABYLON.Engine(canvas);
scene
//添加场景
const scene = new BABYLON.Scene(engine);
camera
两种相机
- UniversalCamera：可以自由移动和转向的相机，兼容三端
- ArcRotateCamera：360度“围观”一个场景用的相机
// 最常用的是两种相机:
// UniversalCamera, 可以自由移动和转向的相机，兼容三端
const camera = new BABYLON.UniversalCamera(
'FCamera',
new BABYLON.Vector3(0, 0, 0),
scene
)
camera.attachControl(this.canvas, true)
// 以及ArcRotateCamera, 360度“围观”一个场景用的相机
// 参数分别是alpha, beta, radius, target 和 scene
const camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene)
camera.attachControl(canvas, true)
光源
// 点光源
const light1 = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(1, 10, 1), scene)
// 方向光
const light2 = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, 0), scene)
// 聚光灯
const light3 = new BABYLON.SpotLight("spotLight", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), Math.PI / 3, 2, scene)
// 环境光
const light4 = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), scene)
复制代码
光的色彩
// 所有光源都有 diffuse 和 specular
// diffuse 代表光的主体颜色
// specular 代表照在物体上高亮部分的颜色
light.diffuse = new BABYLON.Color3(0, 0, 1)
light.specular = new BABYLON.Color3(1, 0, 0)
// 只有环境光有groundColor，代表地上反射光的颜色
light.groundColor = new BABYLON.Color3(0, 1, 0)
渲染
// loop
engine.runRenderLoop(function () {
scene.render();
});
物体
// 创建内容，一个球
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene);
