MML: Metaverse Markup Language
MML is a markup language for describing 3D multi-user interactive Metaversal objects and experiences based on HTML.
The "MML stack" is a combination of two main pieces usually combined together:
E.g.
<m-cube id="my-cube" color="red"></m-cube>
<script>
const cube = document.getElementById('my-cube');
cube.addEventListener('click', () => {
cube.setAttribute('color', 'blue');
});
</script>
HTML and JavaScript in the form of the DOM (Document Object Model) provide an existing foundation for describing and mutating a hierarchy of elements. MML uses this foundation with new elements and attributes to allow describing 3D concepts.
In the common use case an MML document is run on a server and is observed and interacted with by multiple users.
This capability is achieved by running an MML Document on a server using a library (built expressly for MML) called "Networked DOM".
The server and network components necessary to support this multi-user mode are independent of the MML additions to HTML (and can be used with regular 2D HTML).
The Networked DOM server and MML client can then be used to allow multiple users to interact with the same instance of an object at the same time, and bring these objects into game engines and web virtual world experiences.
MML is a set of HTML elements and attributes that can be used to describe 3D objects and experiences.
These elements and attributes can be used without networking. However, when a HTML document including MML tags is run on a server and exposed via a websocket multiple users can interact with the same instance of the document at the same time.
MML is based on a set of libraries (built expressly for MML) called "Networked DOM".
The server and network components necessary to support the multi-user mode are independent of the MML additions to HTML (and can be used with regular 2D HTML).
This repo contains libraries and schema definitions for MML. The most likely way to use this repo is cloning it as libraries for other projects.
npm install
npm run iterate
Builds and starts incrementally building package artefacts from sources
To use any of the libraries in this repo in another project, you can use npm link
to make these dependencies linkable to your other npm project.
npm run link-all
Runs npm link
in all would-be-published packages to allow using as local dependencies to develop with. It will also print the commands to link the dependencies.The below diagram shows the high-level architecture of the MML system when used in a web browser with the Networked DOM server running an MML document.
graph TD
subgraph Networked DOM Server
networked-dom-server[Networked DOM Server]
networked-dom-document[Networked DOM Document]
jsdom[JSDOM]
websocket[Websocket Handler]
networked-dom-server --> networked-dom-document
networked-dom-document --> jsdom
end
mml-source["MML Source Code (HTML)"]
mml-source --> networked-dom-document
subgraph Web Browser
web-browser[Web Browser]
subgraph "3D Web Experience"
three-js-scene[THREE.js Scene]
subgraph Networked DOM Client
networked-dom-client[Networked DOM Client]
dom["DOM (HTML)"]
networked-dom-client --> dom
end
subgraph MML Client Library
web-browser-mml-client[MML Remote\nDocument Instance]
mml-three-js[MML THREE.js]
mml-three-js -- Events --> web-browser-mml-client
web-browser-mml-client --> mml-three-js
end
dom -- Rendered By --> mml-three-js
mml-three-js -- Composed into --> three-js-scene
end
end
networked-dom-client --> ws-addr
ws-addr --> websocket
ws-addr["ws://..."]
websocket --> networked-dom-server
web-browser --> web-browser-mml-client
web-browser-mml-client --> networked-dom-client