Skip to content
/ exeudvr-canister Public template
generated from willguest/vite-react-motoko

Typescript interface and template for ExeudVR, for building immersive canisters.

Notifications You must be signed in to change notification settings

Exeud/exeudvr-canister

Repository files navigation

Exeuδ VR Canister Template

This is a template for deploying immersive experiences on the Internet Computer, configured for use with the ExeuδVR Unity toolkit.

This project connects Unity's C# functionality (user interaction) to TypeScript interfaces and functions, enabling authentication and message signing from Unity to the Internet Computer. This project aims to be widely compatible, facilitating many flavours of immersive experience on the Internet Computer. It is built with:

  • TypeScript everywhere, but with JavaScript compatibility.
  • Node.js: Easily add JavaScript packages to extend functionality.
  • Rust: Add crates with Cargo.
  • Motoko: Connects to the mops package manager, for Web 3.0 functionality.

This repo also uses Internet Identity, a WebAuthn solution configured for the Internet Computer. The implementation provides a secure context to pass messages to the blockchain, enabling crypto transactions and secure messaging, from inside Unity.

  <React.StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <UnityProvider>
          <App />
        </UnityProvider>
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>

📦 Creating a New Project

Make sure that Node.js >= 20 and dfx >= 0.14 are installed on your system.

Beginning with a new, empty project directory:

Import the project and start dfx with the following commands:

npx degit willguest/exeudvr-canister # Download this template
dfx start --clean --background # Run dfx in the background
Add the Unity build:
  • Currently ExeudVR only supports uncompressed builds.

  • Make sure the Unity build is called unity_build.
    If another name is used, update UnityInterface.tsx.

  • Copy the files from the 'Build' folder into src/assets/build.

Enter the following commands, which reference NPM scripts:

npm run setup # Install packages, deploy canisters, and generate type bindings
npm run build # Compiles TypeScript files and builds the webpack.
npm run start # Deploys local dependency canisters and runs the front- and back-end in parallel.

You can then open a new browser window at the location prompted by the terminal. http://127.0.0.1:4943/?canisterId=<local-canister-id>

When ready, run dfx deploy --network ic to deploy your application to the Internet Computer.

🛠️ Technology Stack

  • ExeudVR: Interactive, immersive Unity toolkit.
  • React: a component-based UI library
  • TypeScript: JavaScript extended with syntax for types
  • Prettier: code formatting for a wide range of supported languages
  • Motoko: a safe and simple programming language for the Internet Computer
  • Mops: an on-chain community package manager for Motoko
  • mo-dev: a live reload development server for Motoko

📚 Documentation

💡 Tips and Tricks

  • Reduce the latency of update calls by passing the --emulator flag to dfx start.
  • Install a Motoko package by running npx ic-mops add <package-name>. Here is a list of available packages.
  • Split your frontend and backend console output by running npm run frontend and npm run backend in separate terminals.

💛 Sponsorship

The framework is open-source and was initially funded by non-dilutive grants from the Internet Computer. I welcome sponsorship in all forms and look forward to scaling this project as more resources become available. Please visit my sponsorship page for more information.

🙏 Acknowledgements

Thanks to DFINTY for building out the Internet Computer.

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