MML은 HTML을 기반으로 한 3D 다중 사용자 대화식 메타 버전 객체 및 경험을 설명하는 마크 업 언어입니다.
MML을 시작하려면 https://mml.io/를 방문하십시오.
https://github.com/mml-io/mml-starter-project를 확인하여 직접 MML 문서를 실행하기 시작하십시오.
MML 문서를 포함 할 수있는 3D 웹 경험의 예를 찾으려면 https://github.com/mml-io/mml-playground를 확인하십시오.
"MML 스택"은 일반적으로 두 가지 주요 조각의 조합입니다.
MML (언어) - 3D 객체 및 경험을 설명하기위한 3D HTML 요소 및 속성
Networked DOM (Networking) - 여러 사용자가 다중 사용자 모드에서 상호 작용할 수 있도록 서버에서 MML/HTML 문서를 실행하기위한 라이브러리 및 네트워크 프로토콜.
예를 들어
<m-cube id = "my-cube"color = "red"> </m-cube> <cript> const cube = document.getElementById ( 'my-cube'); cube.addeventListener ( 'click', () => {cube.setattribute ( 'color', 'blue'); }); </script>
DOM (Document Object Model) 형태의 HTML 및 JavaScript는 요소의 계층 구조를 설명하고 돌연변이하기위한 기존 기반을 제공합니다. MML 은이 기초를 새로운 요소와 속성과 함께 사용하여 3D 개념을 설명 할 수 있습니다.
공통 사용 사례에서 MML 문서는 서버에서 실행되며 여러 사용자가 관찰하고 상호 작용합니다.
이 기능은 "Networked Dom"이라는 라이브러리 (MML 용으로 구축)를 사용하여 서버에서 MML 문서를 실행하여 달성됩니다.
이 다중 사용자 모드를 지원하는 데 필요한 서버 및 네트워크 구성 요소는 HTML에 대한 MML 첨가와 무관하며 일반 2D HTML과 함께 사용할 수 있음).
그런 다음 네트워크 DOM 서버 및 MML 클라이언트를 사용하여 여러 사용자가 동시에 동일한 인스턴스와 동시에 상호 작용하고 이러한 객체를 게임 엔진 및 웹 가상 세계 경험으로 가져올 수 있습니다.
친숙 함 : MML은 웹에 대한 문서를 작성하는 가장 일반적인 방법 인 HTML을 기반으로합니다. 이것은 광범위한 제작자에게 접근하기 쉽게 만듭니다.
생태계 : HTML 생태계는 방대하며 MML은 HTML을 기반으로하기 때문에 제작자는 라이브러리, 프레임 워크 및 학습 리소스의 기존 생태계를 활용할 수 있습니다.
이식성 : MML 문서는 모든 최신 웹 브라우저에서 실행될 수 있으므로 공유하고보기가 쉽습니다.
Composability : MML 문서는 다른 서버에서 실행되는 여러 문서로 구성 될 수 있으므로 단일 서버에서 모든 컴퓨팅 전원 및 기술적 기능을 제공하지 않고도 복잡한 가상 월드 객체를 만들 수 있습니다.
MML은 3D 객체 및 경험을 설명하는 데 사용할 수있는 일련의 HTML 요소 및 속성 세트입니다.
이러한 요소와 속성은 네트워킹없이 사용할 수 있습니다. 그러나 MML 태그를 포함한 HTML 문서가 서버에서 실행되고 WebSocket을 통해 노출되는 경우 여러 사용자가 동일한 문서 인스턴스와 동시에 상호 작용할 수 있습니다.
./packages/mml -web -Web Three.js MML 라이브러리
./packages/mml-web-client- 웹 3.js MML 클라이언트
./packages/mml-web-runner- 웹 러너 (서버가 아닌 웹 브라우저에서 MML 문서 실행)
./packages/schema -XML 스키마 정의 언어 (XSD)의 MML 스키마
./packages/schema-validator- MML 스키마를 사용하여 MML 문서를 검증하기위한 패키지
MML은 "Networked Dom"이라는 일련의 라이브러리 (MML 용으로 구축)를 기반으로합니다.
다중 사용자 모드를 지원하는 데 필요한 서버 및 네트워크 구성 요소는 HTML에 대한 MML 첨가와 무관하며 일반 2D HTML과 함께 사용할 수 있음).
네트워크 DOM
./packages/networked-dom-web- 웹 네트워크 DOM 라이브러리
./packages/networked-dom-web-client- 웹 네트워크 DOM 클라이언트
./packages/networked-dom-web-runner- 웹 네트워크 DOM Runner (서버가 아닌 웹 브라우저에서 네트워크로 된 DOM 문서를 실행하기 위해)
./packages/networked-dom-protocol-Networked Dom Websocket 프로토콜 형식 정의
./packages/Observable-dom-common- 관찰 가능한 dom common
./packages/Observable-dom- 관찰 가능한 dom (JSDOM 실행) 라이브러리
./packages/networked-dom-document- 네트워크 DOM 문서 라이브러리
이 repo에는 MML에 대한 라이브러리 및 스키마 정의가 포함되어 있습니다. 이 repo를 사용하는 가장 가능성이 높은 방법은 다른 프로젝트의 라이브러리로 복제하는 것입니다.
레포를 복제하십시오
npm install
npm run iterate
하고 소스에서 패키지 인공물을 점진적으로 구축하기 시작합니다.
서버는 예제를 위해 시작해야합니다.
http : // localhost : 7070 -MML 예제 서버
http : // localhost : 7071- 네트워크 DOM 예제 서버
다른 프로젝트 에서이 저장소의 라이브러리를 사용하려면 npm link
사용하여 이러한 종속성을 다른 NPM 프로젝트에 연결할 수 있습니다.
npm run link-all
로컬 의존성으로 개발할 수 있도록 모든 출판 된 패키지에서 npm link
실행합니다. 또한 종속성을 연결하기 위해 명령을 인쇄합니다.
아래 다이어그램은 MML 문서를 실행하는 Networked DOM 서버가있는 웹 브라우저에서 사용될 때 MML 시스템의 높은 수준 아키텍처를 보여줍니다.
그래프 TD
서브 그래프 네트워크 DOM 서버
Networked-Dom-Server [Networked Dom Server]
Networked-Dom-Document [Networked DOM 문서]
jsdom [jsdom]
WebSocket [WebSocket Handler]
Networked-Dom-Server-> Networked-Dom-Document
네트워크 도약 문서-> jsdom
끝
MML-Source [ "MML 소스 코드 (HTML)"]
MML-Source-> 네트워크 -Dom-Document
서브 그래프 웹 브라우저
웹 브라우저 [웹 브라우저]
하위 그래프 "3D 웹 경험"
Three-JS-Scene [Three.JS 장면]
서브 그래프 네트워크 DOM 클라이언트
Networked-Dom-Client [Networked Dom Client]
dom [ "dom (html)"]
Networked-Dom-Client-> dom
끝
하위 그래프 MML 클라이언트 라이브러리
Web-Browser-MML-Clitient [MML RemotendOcument 인스턴스]
MML-Three-JS [MML Three.JS]
MML-THREE-JS- 이벤트-> Web-Browser-MML-Clitient
Web-Browser-MML-Clitient-> MML-Three-JS
끝
dom- 렌더링-> MML-Three-JS
MML-Three-JS- 구성-> 3-JS- 현장
끝
끝
Networked-Dom-Client-> WS-ADDR
ws-addr-> WebSocket
ws-addr [ "ws : // ..."]
WebSocket-> Networked-Dom-Server
Web-Browser-> Web-Browser-MML-Clylient
Web-Browser-MML-Clitient-> Networked-Dom-Client
로딩