学习和案例

加载模型

骨骼动画和蒙皮

物理仿真

WGSL语言介绍

主要封装 (Updating,最新的内容还未更新)

GLTF 模型加载用法

import { checkWebGPUSupported, createCanvas } from "../../tools";
import { degToRad } from "../../tools/math";
import { StaticTextureUtils } from "../../tools/utils";
import { GLTFLoaderV2 } from "../../tools/loaders/GLTFLoader-v2";
import { OrbitController, PerspectiveCamera } from "../../tools/camera";
import { ObjLoader } from "../../tools/loaders/ObjLoader";
import { GUI } from "dat.gui";
import { Scene } from "../../tools/scene";
import { DirectionLight } from "../../tools/lights";
import { WebGPURenderer } from "../../tools/renderer";
const base = location.href;
// 配置
const config = {
 path: `${base}glTF-Sample-Models/2.0/Sponza/glTF-Binary/Sponza.glb`,
 near: 0.01,
 far: 100,
 eye: [5, 10, 0],
 target: [0, 3, 0],
 zoomSpeed: 10,
},
// 新建一个 WebGPURenderer
const renderer = await new WebGPURenderer().checkSupport();
// 创建场景对象
const scene = new Scene(renderer.device);
// 创建灯光
const light = new DirectionLight([-1, -1, -1], [1, 1, 1, 1], 10);
scene.add(light);
// 创建相机和控制器
const camera = new PerspectiveCamera(
 degToRad(75),
 renderer.aspect,
 config.near,
 config.far
);
camera.lookAt(config.eye, config.target);
const orbitController = new OrbitController(camera, renderer.canvas, {
 zoomSpeed: config.zoomSpeed,
});
scene.add(orbitController);
// 加载 gltf 模型 或者 obj 模型
const loader = model_name === "bunny" ? new ObjLoader() : new GLTFLoaderV2();
const model = await loader.load(renderer.device, config.path, {
 bindGroupLayouts: [scene.bindGroupLayout],
 format: renderer.format,
});
scene.add(model);
// 循环运行渲染
async function frame() {
 renderer.render(scene);
 requestAnimationFrame(frame);
}

加载效果截图

几何、材质、屏幕后处理

wgssl

效果视频

碰撞检测、骨骼动画

框架说明

目前困惑

TODO

后续进度

引用