WebGPU初尝鲜

前言：最近公司接到了一个关于智慧孪生后台的需求，并且是公司对甲方提供配套的设备和电脑，浏览器版本可以由公司决定，所以可以使用最新的特性，也就是最近更新正式推出的WebGPU也可以使用。

由于直接使用 WebGPU的学习成本太高，我决定找一个支持WebGPU的库，一开始看的是babylon.js，但发现这玩意的中文文档几乎没有，英语太差的我只能看看有没有别的库，正好就看到了Orillusion，完全基于WebGPU 标准的轻量级渲染引擎，有中文文档,并且对于引入模型、光照等上手难度不高。

废话不多说，直接看效果,无论是光照的反射和流畅度都很不戳。以前用webGL想实现更精细的效果需要花费大量的学习成本学习烘焙和着色器之类的，当性能瓶颈提上去后，或许就不需要这么大费周折也能实现精细的效果了.

后续更新：尽管chrome最新版本开放了webGPU，但出于安全，只有https协议才能开启，公司的项目后台都是基于http，还是放弃了。555，但是效果真的很惊艳，期待赶紧开放。

代码部分

<script setup>
import {
  Engine3D,
  Scene3D,
  Object3D,
  Camera3D,
  View3D,
  LitMaterial,
  BoxGeometry,
  MeshRenderer,
  DirectLight,
  HoverCameraController,
  AtmosphericComponent,
  Vector3
} from '@orillusion/core';
import { gsap } from "gsap";
let canvas = document.getElementById('canvas')
await Engine3D.init({
  canvasConfig: { canvas }
});
let scene3D = new Scene3D();
// 添加大气散射天空组件
let sky = scene3D.addComponent(AtmosphericComponent);
// 新建摄像机实例
// 创建一个节点
// 创建一个节点
let cameraObj = new Object3D();
// 添加相机组件
let camera = cameraObj.addComponent(Camera3D);


// 设定 Object3D 的 Position 或 Rotation 

// gsap.to(cameraObj.position, { z: -460, duration: 15 ,ease:'power1.inOut'})
// 根据窗口大小设置摄像机视角
camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
// 设置相机控制器
let controller = camera.object3D.addComponent(HoverCameraController);
controller.setCamera(0, 0, 15);
// 添加相机节点
scene3D.addChild(cameraObj);


// 新建光照
let light = new Object3D();
// 添加直接光组件
let component = light.addComponent(DirectLight);
// 调整光照参数
light.rotationX = 45;
light.rotationY = 30;
component.intensity = 2;
// 添加光照对象
scene3D.addChild(light);

// 新建对象
const obj = new Object3D();
// 为对象添 MeshRenderer
let mr = obj.addComponent(MeshRenderer);
// 设置几何体
mr.geometry = new BoxGeometry(5, 5, 5);
// 设置材质
mr.material = new LitMaterial();

// scene3D.addChild(obj);

// 创建View3D对象
let view = new View3D();
// 指定渲染的场景
view.scene = scene3D;
// 指定使用的相机
view.camera = camera;


// 加载模型
let dragon = await Engine3D.res.loadGltf('../../blender/Tesla-Model3.glb')
dragon.rotationY = 180;
dragon.transform.localScale.set(2,2,2);
scene3D.addChild(dragon)
// 开始渲染
Engine3D.startRenderView(view);

</script>

<template>
  <canvas id="canvas" width="800" height="500" />
</template>