BabyLon.js 6.0 学习笔记 （一）

WebGPU简介

WebGPU是新一代web API，祖上是WebGL，据说是可以让浏览器调用GPU提高网页的渲染性能。处于自己对渲染器原理的学习兴趣，又不想脱离时代，打算从WebGPU的开发环境开始着手。

相关的简介链接如下，这里不做赘述：

• 关于WebGPU
• WebGPU开发快速入门

BabyLon.js

经过一番调研，对于自己想要的开发功能包含比较全面的一个平台暂定为 BabyLon.js ， 最新版的BabyLon.js 也已经支持WebGPU，并且我发现在BabyLonJs官网有不少Demo，可以直接查看渲染效果，感觉还可以。
相关简介：
BabyLon.js

浏览器要求

经过测试，可以适配WebGPU的浏览器是最新版的Edge, Nightly 版firefox，和最新版Chrome。 其中Chrome的表现，在各种开源webGPU的示例上支持的是相对最好的。

• Chrome 设置：

  在搜索栏查找 chrome://flag , 找到WebGPU开关，然后启用
  

• 测试浏览器支持：

  WebGPU Shading Demo, 显示正常的话，可以看到渲染结果，否则就是漆黑一片
  

开发环境准备（win10）

• 安装nodejs 18.18.0 LTS
  

• 编译器使用 VSCode 1.82.3

编写第一个 BabyLon.js 工程

• 创建一个工程目录，如 test0 ：
  
• 调出 Terminal 命令行

CTRL + SHIFT + `

• 安装vite + babylon.js环境

 npm create vite@latest

a. 设置vite项目名称 ， 如 babylon_0

 ? Project name: » babylon_0

b. 设置运行环境框架 ，直接回车，默认选 vanilla

? Select a framework >> Vanilla

c. 设置编译语言, 这里选Java Script ， 当然选Type Script也可以

? Select a variant >> Java Script

• 进入刚才生成的工程目录，如babylon_0

cd babylon_0

• 安装依赖

npm install

npm install --save babylonjs

• 对自动生成的文件进行修改
  
  a. 删除 counter.js 和 javascript.svg 文件
  b. 在babylon_0下创建src文件夹， 并把main.js 和 style.css 移动到src
  c. 将 index.html 中的 src = “main.js” 按当前路径情况，修改为 src = “src/main.js” ，还要删除的子节点<div/>的内容
  
  d. 修改 main.js 文件， 仅保留 css文件导入， 其他内容删去

import './style.css'

e. 修改 style.css文件

*{
  margin: 0; /*内边距为0*/
  padding: 0; /*外边距为0*/
}

canvas{
  position: fixed; /*canvas定位固定*/
  top: 0; /*画布距顶部位置*/
  left: 0; /*画布距左部位置*/
  width: 100vw;/*画布宽=浏览器宽*/
  height: 100vh;/*画布高=浏览器高*/
}

f. 预览代码，命令行执行，出现一个本地网址，可使用chrome进行浏览

npm run dev

g. 运行正常的话会看到一个空白的网页，但是F12 打开开发者工具后，看到style.css的样式已经启用了

• OK, 接下去开始在main.js编写一个 3d web程序

import './style.css'
//导入babylonjs
import * as BABYLON from "babylonjs"
//创建canvas
const canvas  = document.createElement("canvas");
//set canvas's width and height
canvas.width = window.innerWidth;
canvas.height= window.innerHeight;
//append canvas into body
document.body.appendChild(canvas);
//create engine, true---启用抗锯齿
const engine =new BABYLON.Engine(canvas,true);
//create scene
const scene = new BABYLON.Scene(engine);
//create camera
const camera = new BABYLON.ArcRotateCamera(
     "camera",  //name
    0, //yaw 
    0, //pitch
    10, //radius m? 这里的半径单位我不清楚
    BABYLON.Vector3.Zero(), //target —— 坐标系原点
    scene  //相机所在的scene
);
//把相机附着在canvas中，并且可以用鼠标拖拽，可以用滚轮缩放
camera.attachControl(canvas);
//add a ball
const sphere = BABYLON.MeshBuilder.CreateSphere(
    "sphere", //name
    {diameter: 2}, //radius of ball，同样这里的半径什么单位不清楚
    scene
);
//add a light
const light = new BABYLON.DirectionalLight(
    "light",//name
    new BABYLON.Vector3(0,-1,0),//light direction
    scene
);

//render scene
engine.runRenderLoop(()=>{
    scene.render();
});

//监听窗口大小变化
window.addEventListener("resize",()=>{
    engine.resize();//
});

• 代码保存后，网页会自动重新加载，这个时候可以看到一个球，被光源照射

-鼠标左键拖拽控制小球绕原点旋转
-鼠标右键拖拽控制画布平移
-鼠标滚轮控制缩放

• 尽情蹂躏小球吧 ！