🏝️ ICVR News: New features, no-code VR canister creation, Unity canister template

[willguest]

Island Collective Virtual Reality, December 2023 (1 of 2)

the code lives here →

It has been a multithreaded sort of a year, and the development of ICVR has seen a few twist and turns and a lot of updates, with our integrated VR framework seeing a first release at the start of August, and a second at the start of November.

What is ICVR?

For those unaware, ICVR is an open-source toolkit for building immersive canisters, built on Unity WebGL and WebXR. It is made of a few core modules:

• Controllers for movement and interaction
• Physics and interaction components
• WebRTC avatar and interaction sharing
• On-demand media using IndexedDB

Along the way, we made a few cansiters to show off what the framework is capable of:

The Island Collective __ deBunker ____ The Island Club ____ Island Bowling

The second release allowed for a much-simplified setup within Unity editor. In short, I discovered that you can make settings presets and load them into the editor. Even better, you can import dependencies with the click of a button. This means that, in a few simple actions, you are ready to create your first VR canister.

This release also saw Unity functions added around authentication (using II) and token transactions within the Unity scene - there will be more information on these in part 2. A quick spoiler though, that also requires no coding.

---

Need help getting started?

Check out this set of tutorials, given by my collaborator, Magic. In these videos, he’ll walk you through using his pre-made scenes, sculpting basic terrain, taking assets from the Unity Asset Store and has some tips on optimisation in Blender, when exporting for an ICVR scene. The final video is a long-form guide, looking at various aspects of optimisation and performance considerations:

Also in the repository, alongside some unitypackages, you will find documentation for all of the important C# classes, many of which contain usage notes and additional information. If you have any questions, suggestions or accusations, drop a comment below, or get in touch via Discord or X.

This takes you as far as the creation of a WebAssembly module, ready for deployment onto the Internet Computer. In part 2, I’ll be looking at the canister template that makes that happen. For those wanting to get a head start, you can find it here.

Acknowledgements

I cannot close this without giving a nod to DFINITY, who supported the creation of this framework with their grant program. Their hospitality is also spot on.

[willguest]

Unity Canister Template, December 2023 (2 of 2)

icvr-canister code →

The second part of this year’s activities produced a Unity canister template, written (mostly) in TypeScript. It aims to be widely compatible, but also easy to use and modify.

Canister

See the test canister here: https://mcheo-eiaaa-aaaai-qpcga-cai.icp0.io/

Features

• Internet Identity authentication
• Typed Unity Interface, for modular loading and configuration of the instance
• Cross-canister communication example - requests coin from test fund.
• Compatible with TypeScript, JavaScript, Rust and Motoko.
• Uses node.js, Cargo and mops package managers.
• Configured with webpack and tsconfig.

Patterns

Though somewhat experimental, I wanted to achieve modularity in the Unity is loaded and displayed. This means that it can easily be extracted from this project and added into another project. Handling the II authentication the same way led to a really tidy index.tsx:

...
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <UnityProvider>
          <App />
        </UnityProvider>
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>
);

Internet Identity authentication, when in an AuthContext like this, becomes simpler, allowing messages sent from Unity to be handled asynchronously in the browser. This template, when deployed locally, will include an Internet Identity canister, using the new ‘pull’ functionality in dfx.json:

"canisters": {
    "internet_identity": {
      "type": "pull",
      "id": "rdmx6-jaaaa-aaaaa-aaadq-cai"
    },
...
}

The token communication is handled with an ExtendedActorClass and an IDL factory, built with a TypeScipt version of the token canister interface. That token is an EXT format single-token canister, made for test purposes. Its canister id is cps3y-fiaaa-aaaak-qav4a-cai.

Connecting calls from Unity to canister function follows a simple, extendable pattern, seen in UnityFunctions.ts:

export default function AddUnityFunctions(unityContext) {
    const auth = useAuth();
    unityContext.on("ICLogin", async function (cbIndex) {
		await IILogin(cbIndex, unityContext, auth);
	});
...
}

No other additions are needed, thanks to the UnityInterface.ts connecting all functions in this file when it is loaded. This entry point can be used for larger-scale initialisation or setup.

Bugs

The repository is still quite rough around the edges. Do not be surprised to find some areas of test code, or commented out sections.

• VR browsers are not compatible with WebAuthn, needed for II authentication. This will be resolved in time, but currently browser development is lagging. The above example should be usable in VR, but currently there is no way to test it.

• I’ve had some trouble reading the loading progression, as I think the canister doesn’t handle it in the way it is expecting. The progression value does not get updated during the loading of the WebAssembly module, or the value is not communicated in the way it expects. There are still smells in the code, attempting to find a workaround, such as unity.sh, which attempts to read the data file sizes, for a manual calculation.

Acknowledgements

Thanks to @rvanasa for the original vite-react-motoko template, on which this is based.