@ driftengine/ core (英语)

运行时间 漂流引擎,用于网络的 三维游戏引擎 和已安装的应用程序。 它通过 WebGPU 绘制浏览器有设备的地方和通过 WebGL2 其他任何地方,一个API后面, 并携带固定步骤环路, 渲染器,相机, 输入、场景图、几何、文字和全部 @driftengine/physics,它再出口. 其它的都是一个单独的包 当游戏到达它.

费用:966.4 KB gzipped, 进口 createRenderer。 。 。 . 以 scripts/size-gate.test.mjs, (中文(简体) ), 如果数字漂移超过3%,则会失败.

手册在 dev/docs (英语),并运行示例 除了每一章, 每一个导出都在 参考文献。 。 。 .

安装

npm install @driftengine/core

它决心编译JavaScript,所以任何ES模块捆绑器都把它当作它;Vite就是什么 实例使用。 一个浏览器至少需要WebGL2,这是每个当前都有的. 安装 覆盖页面、 类型脚本和 后门.

快速启动

一个点亮的立方体在固定的台阶上打开,在页面上 <canvas id="stage">数字 :

import {
  Camera,
  MeshBuilder,
  SceneNode,
  createEnvironment,
  createRenderer,
  srgbColor,
  startLoop,
} from '@driftengine/core';
import { bindModule } from '@driftengine/script';
import { loadModule, patchModule } from 'driftscript';
import * as spinScript from './spin.drs';

const canvas = document.querySelector<HTMLCanvasElement>('#stage');
if (canvas === null) throw new Error('the page must carry <canvas id="stage">');

/*
 * Asynchronous because it has to be: asking for a WebGPU adapter returns a promise, and there
 * is no synchronous way to learn whether a usable device exists. The fall back to WebGL2 is
 * automatic and silent, so `reason` is the only thing that says why. Print it: the first
 * question asked about any picture is what drew it.
 */
const { renderer, backend, reason } = await createRenderer(canvas, {
  maxDevicePixelRatio: 1.75,
});

const readout = document.querySelector('#backend');
if (readout !== null) readout.textContent = `${backend}: ${reason}`;

renderer.resize();
addEventListener('resize', () => renderer.resize());

/**
 * Light, air and ground bounce. Chosen once, because these are allocation-sized decisions.
 *
 * Every colour here and below was picked by eye, so it goes through `srgbColor`: the renderer
 * lights in linear values and encodes them for the screen at the end, and a colour typed as it
 * looks would come out too light. The clear colour in the loop is one of them.
 */
const CLEAR = srgbColor(0.05, 0.06, 0.09);

const ENV = createEnvironment({
  directionalDir: [0.4, 0.7, 0.35],
  directionalColor: srgbColor(1, 0.96, 0.88),
  ambient: srgbColor(0.2, 0.22, 0.28),
  ambientGround: srgbColor(0.08, 0.08, 0.1),
  emissiveGain: 0,
  nightFactor: 0,
  fogColor: srgbColor(0.16, 0.18, 0.24),
  fogDensity: 0.004,
  fogHeightFalloff: 0.03,
  fogBaseY: 0,
});

/*
 * Colour is vertex data here, which is what lets a whole world be flat-shaded draw calls.
 * `addBox` takes a centre and *half* extents, so this ground is 24 units across and the cube
 * is two units on a side.
 */
const shapes = new MeshBuilder();
shapes.addBox([0, 1, 0], [1, 1, 1], srgbColor(0.85, 0.45, 0.25));
const cube = renderer.createMesh(shapes.build());

const slab = new MeshBuilder();
slab.addBox([0, -0.25, 0], [12, 0.25, 12], srgbColor(0.3, 0.32, 0.36));
const ground = renderer.createMesh(slab.build());

const spinner = new SceneNode();
spinner.setPosition(0, 1, 0);
const stillness = new SceneNode();
stillness.updateWorld();

const camera = new Camera();
camera.position[0] = 6;
camera.position[1] = 4.5;
camera.position[2] = 8;
camera.lookAt(0, 1, 0);

/*
 * How fast the cube turns is a rule, and rules live in DriftScript: `spin.drs`. The bundler compiles
 * the file, `loadModule` makes a module of it, and `bindModule` gives it the engine capabilities it
 * imports. Saving the file while the page is open replaces its function in place.
 */
const spinModule = loadModule(spinScript as Record<string, unknown>);
const bound = bindModule(spinModule, {});
if (!bound.bound) throw new Error(bound.reason);
const rules = spinModule.exports as unknown as { spinRate(time: number): number };

if (import.meta.hot) {
  import.meta.hot.accept('./spin.drs', (next) => {
    if (next !== undefined) patchModule(spinModule, next as Record<string, unknown>);
  });
}

/*
 * Two angles, because that is what `alpha` is for. The simulation advances in fixed steps and
 * the display does not, so a frame almost never lands on a step boundary: drawing `spin`
 * directly judders at any refresh rate that is not a multiple of the step. Interpolating
 * between the last two states is the whole reason the loop hands `alpha` over.
 */
let spin = 0;
let previousSpin = 0;
let time = 0;

startLoop({
  simulate(dt) {
    previousSpin = spin;
    time += dt;
    spin += dt * rules.spinRate(time);
  },
  render(alpha) {
    spinner.setRotationAxisAngle(0, 1, 0, previousSpin + (spin - previousSpin) * alpha);
    spinner.updateWorld();

    camera.updateMatrices(canvas.height > 0 ? canvas.width / canvas.height : 1);

    renderer.beginFrame(CLEAR);
    renderer.bindMeshPass(camera, ENV);
    renderer.drawMesh(ground, stillness.worldMatrix);
    renderer.drawMesh(cube, spinner.worldMatrix);
    renderer.endFrame();
  },
});

立方体转速多快是一条规则,所以它生活在"漂流脚本"(DriftScript, in)中 spin.drs 页面旁:

// How the cube turns. The page owns the cube; this file only says how fast it goes.
//
// Save it while the page is open and the cube takes the new rate without the page reloading. Try a
// steady 2, a cube that stops every few seconds, or one that turns the other way.

import { sin } from "std/math"

// Radians a second: a steady turn that quickens and eases every few seconds.
fn spinRate(time: f32) -> f32 {
    return 0.8 + 0.4 * math.sin(time * 0.5)
}

捆绑器用 DriftScript 的 Vite 插件编译, 设置为启动器 vite.config.ts· ; 安装 有两个包 这个配置.

这是引擎的 examples/starter,并且一个测试 保持两者不变. 哈罗世界 穿过它 你的第一个游戏 建立一个完整的.

里面有什么东西

其他软件包

当游戏到达时,每个游戏都会被添加,而一个从未导入过游戏的游戏则没有携带任何一款.

许可证

阿帕奇2.0 (英语). 发售意味着复制 NOTICE,每捆已经 携带。 部分 漂流引擎; 见 docs/ARCHITECTURE.md 页:1 软件包如何分割.