<div id="canvasContainer">
  <canvas id="mcanvas"></canvas>
</div>

body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
  font-family: "Inter", sans-serif !important;
}

#mcanvas {
  width: 100%;
  height: 100%;
  z-index: -1;
}
#canvasContainer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 5;
}

.font-inter {
  font-family: "Inter", sans-serif !important;
}

.font-gilroy {
  font-family: "Gilroy", sans-serif !important;
}

::-webkit-scrollbar {
  width: 12px; /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}
::-webkit-scrollbar-track {
  background: rgba(64, 64, 64, 0.4);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.2);
  border-radius: 6px;
}
::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0.5);
}

import {
  CoreEditorApp,
  addEditorPlugins,
  PresetLibraryPlugin,
  defaultPresets
} from "https://dist.pixotronics.com/webgi/runtime/bundle-0.9.3.mjs";

// Check the Documentation and Manual Here: https://webgi.xyz/docs
// Note: when in production, use links to assets on your server, defaultPresets are provided for demo purposes.

async function initialize() {
  const editor = new CoreEditorApp({
    canvas: document.getElementById("mcanvas")
  });

  editor.scene.activeCamera.userData.minNearPlane = 0.2;

  console.log(editor.defaultModes);

  // remove extras tab
  editor.defaultModes = editor.defaultModes.filter((m) => m.title !== "Extras");

  // add default editor plugins
  await addEditorPlugins(editor, {
    caching: true,
    ground: true,
    bloom: true,
    depthTonemap: true,
    enableDrop: false,
    importPopup: false,
    debug: false
  });

  // load some presets
  console.log(defaultPresets);

  // For an example, keep only first 2 presets
  // Here presets can be removed or custom presets can be added.
  // Note: when in production, use links to assets on your server, defaultPresets are provided for demo purposes.
  const presets = { ...defaultPresets };
  for (const i of [...Object.keys(presets)]) {
    presets[i] = presets[i].slice(0, 2);
  }

  const presetLib = editor.getPlugin(PresetLibraryPlugin);
  await presetLib.loadPresetGroups(presets);

  // Load an environment Map
  await editor.setEnvironmentMap(
    "https://dist.pixotronics.com/webgi/assets/hdr/gem_2.hdr"
  );

  // setup editor ui
  await editor.setupUi();
}

initialize();