Add basic render engine example

[vorg]

Minimal example seems to be below. Our current basic.js is quite verbose (even if indeed basic)

import {
  renderEngine as createRenderEngine,
  world as createWorld,
  entity as createEntity,
  components,
} from "../index.js";

import createContext from "pex-context";

import { cube } from "primitive-geometry";

const pixelRatio = devicePixelRatio;
const ctx = createContext({ pixelRatio });
const renderEngine = createRenderEngine({ ctx });
const world = createWorld();

const perspectiveCameraEntity = createEntity({
  transform: components.transform({
    position: [5, 5, 5],
  }),
  camera: components.camera({}),
  orbiter: components.orbiter(),
});
world.add(perspectiveCameraEntity);

const cubeEntity = createEntity({
  transform: components.transform(),
  geometry: components.geometry(cube()),
  material: components.material({}),
});
world.add(cubeEntity);

const gridTenEntity = createEntity({
  transform: components.transform({ scale: [2, 2, 2] }),
  gridHelper: components.gridHelper({ size: 10 }),
});
world.add(gridTenEntity);

const skyboxReflectionProbeEntity = createEntity({
  skybox: components.skybox({ sunPosition: [2, 2, 2] }),
  reflectionProbe: components.reflectionProbe(),
  transform: components.transform(),
});
world.add(skyboxReflectionProbeEntity);

ctx.frame(() => {
  renderEngine.update(world.entities);
  renderEngine.render(
    world.entities,
    world.entities.filter((entity) => entity.camera)
  );

  window.dispatchEvent(new CustomEvent("pex-screenshot"));
});