mml

MML: Metaverse Markup Language

MML เป็นภาษามาร์กอัปสำหรับการอธิบายวัตถุและประสบการณ์แบบอินเทอร์แอคทีฟของผู้ใช้ 3 มิติตาม HTML

เริ่มต้น

• เยี่ยมชม https://mml.io/ เพื่อเริ่มต้นด้วย MML

• ตรวจสอบ https://github.com/mml-io/mml-starter-project เพื่อเริ่มต้นใช้งานเอกสาร MML สำหรับตัวคุณเอง

• ตรวจสอบ https://github.com/mml-io/mml-playground เพื่อค้นหาตัวอย่างของประสบการณ์เว็บ 3D ที่สามารถรวมเอกสาร MML

MML คืออะไร?

"MML stack" คือการรวมกันของสองชิ้นหลักมักจะรวมกัน:

• MML (ภาษา) - องค์ประกอบ HTML 3D และแอตทริบิวต์สำหรับการอธิบายวัตถุและประสบการณ์ 3 มิติ

• เครือข่าย DOM (เครือข่าย) - ไลบรารีและโปรโตคอลเครือข่ายสำหรับเรียกใช้เอกสาร MML/HTML บนเซิร์ฟเวอร์เพื่อให้ผู้ใช้หลายคนสามารถโต้ตอบกับพวกเขาในโหมดผู้ใช้หลายคน

MML (ภาษา)

เช่น

 <m-cube id = "my-cube" color = "red"> </m-cube> <script>
  const cube = document.getElementById ('my-cube');
  cube.addeventListener ('คลิก', () => {cube.setAttribute ('color', 'blue');
  }); </script>

HTML และ JavaScript ในรูปแบบของ DOM (โมเดลวัตถุเอกสาร) ให้รากฐานที่มีอยู่สำหรับการอธิบายและกลายพันธุ์ลำดับชั้นขององค์ประกอบ MML ใช้รากฐานนี้ด้วยองค์ประกอบและคุณลักษณะใหม่เพื่อให้สามารถอธิบายแนวคิด 3 มิติได้

โมเดลเครือข่าย

ในกรณีการใช้งานทั่วไปเอกสาร MML จะทำงานบนเซิร์ฟเวอร์และสังเกตและมีปฏิสัมพันธ์กับผู้ใช้หลายคน

ความสามารถนี้ทำได้โดยการเรียกใช้เอกสาร MML บนเซิร์ฟเวอร์โดยใช้ไลบรารี (สร้างขึ้นอย่างชัดแจ้งสำหรับ MML) ที่เรียกว่า "Networked DOM"

ส่วนประกอบเซิร์ฟเวอร์และเครือข่ายที่จำเป็นในการรองรับโหมดผู้ใช้หลายคนนี้เป็นอิสระจากการเพิ่ม MML ใน HTML (และสามารถใช้กับ HTML 2D ปกติ)

รวมกัน

คุณสามารถใช้เซิร์ฟเวอร์ DOM และไคลเอนต์ MML เครือข่ายเพื่อให้ผู้ใช้หลายคนโต้ตอบกับอินสแตนซ์เดียวกันของวัตถุในเวลาเดียวกันและนำวัตถุเหล่านี้ไปสู่เอ็นจิ้นเกมและประสบการณ์โลกเสมือนจริงของเว็บ

ประโยชน์

• ความคุ้นเคย : MML ขึ้นอยู่กับ HTML ซึ่งเป็นวิธีที่พบบ่อยที่สุดในการเขียนเอกสารสำหรับเว็บ สิ่งนี้ทำให้สามารถเข้าถึงได้สำหรับผู้สร้างที่หลากหลาย

• ระบบนิเวศ : ระบบนิเวศ HTML นั้นกว้างใหญ่และเนื่องจาก MML ใช้ HTML ผู้สร้างจึงสามารถใช้ประโยชน์จากระบบนิเวศที่มีอยู่ของห้องสมุดกรอบและแหล่งเรียนรู้

• การพกพา : เอกสาร MML สามารถทำงานได้ในเว็บเบราว์เซอร์ที่ทันสมัยทำให้ง่ายต่อการแบ่งปันและดู

• ความสามารถในการรวบรวม : เอกสาร MML สามารถประกอบด้วยเอกสารหลายฉบับที่ทำงานบนเซิร์ฟเวอร์ที่แตกต่างกันทำให้สามารถสร้างวัตถุโลกเสมือนจริงที่ซับซ้อนโดยไม่ต้องให้พลังงานการคำนวณและความสามารถทางเทคนิคทั้งหมดบนเซิร์ฟเวอร์เดียว

สถาปัตยกรรมแพ็คเกจระดับสูง

ภาษา (MML)

MML เป็นชุดขององค์ประกอบ HTML และคุณลักษณะที่สามารถใช้เพื่ออธิบายวัตถุและประสบการณ์ 3 มิติ

องค์ประกอบและแอตทริบิวต์เหล่านี้สามารถใช้งานได้โดยไม่ต้องใช้เครือข่าย อย่างไรก็ตามเมื่อเอกสาร HTML รวมถึงแท็ก MML จะทำงานบนเซิร์ฟเวอร์และเปิดเผยผ่าน WebSocket ผู้ใช้หลายคนสามารถโต้ตอบกับอินสแตนซ์เดียวกันของเอกสารในเวลาเดียวกัน

• ./packages/mml-web - Web Three.js MML Library

• ./packages/mml-web-client-Web Three.js MML Client

• ./packages/mml-web-runner-Web Runner (สำหรับการเรียกใช้เอกสาร MML ในเว็บเบราว์เซอร์แทนที่จะเป็นเซิร์ฟเวอร์)

• ./packages/schema - MML schema ในภาษานิยาม XML Schema (XSD)

• ./packages/schema-validator - แพ็คเกจสำหรับการตรวจสอบความถูกต้องของเอกสาร MML โดยใช้ MML schema

เครือข่าย (DOM เครือข่าย)

MML ขึ้นอยู่กับชุดของไลบรารี (สร้างขึ้นอย่างชัดแจ้งสำหรับ MML) ที่เรียกว่า "เครือข่าย DOM"

ส่วนประกอบเซิร์ฟเวอร์และเครือข่ายที่จำเป็นในการรองรับโหมดผู้ใช้หลายคนนั้นเป็นอิสระจากการเพิ่ม MML ใน HTML (และสามารถใช้กับ HTML 2D ปกติ)

• DOM เครือข่าย

• ./packages/networked-dom-web-เว็บไลบรารี DOM เครือข่ายเว็บ

• ./packages/networked-dom-web-client-เว็บไคลเอนต์ DOM เครือข่ายเว็บ

• ./packages/networked-dom-web-runner-Web Networked Dom Runner (สำหรับการเรียกใช้เอกสาร DOM เครือข่ายในเว็บเบราว์เซอร์แทนที่จะเป็นเซิร์ฟเวอร์)

• ./packages/networked-dom-protocol-คำจำกัดความ typenscript ของโปรโตคอล Dom WebSocket เครือข่าย

• ./packages/observable-dom-common-Dom Common ที่สังเกตได้

• ./packages/observable-dom - ห้องสมุด Dom (JSDOM Execution) ที่สังเกตได้

• ./packages/networked-dom-document-ไลบรารีเอกสาร DOM เครือข่าย

การใช้ repo นี้

repo นี้มีไลบรารีและคำจำกัดความสคีมาสำหรับ MML วิธีที่เป็นไปได้มากที่สุดในการใช้ repo นี้คือการโคลนเป็นห้องสมุดสำหรับโครงการอื่น ๆ

1. โคลน repo

2. npm install

3. npm run iterate สร้างและเริ่มสร้างสิ่งประดิษฐ์แพ็คเกจจากแหล่งที่มาเพิ่มขึ้นจากแหล่งข้อมูล

• เซิร์ฟเวอร์ควรเริ่มต้นสำหรับตัวอย่าง:

• http: // localhost: 7070 - MML ตัวอย่างเซิร์ฟเวอร์

• http: // localhost: 7071 - เซิร์ฟเวอร์ตัวอย่าง DOM เครือข่าย

ในการใช้ไลบรารีใด ๆ ใน repo นี้ในโครงการอื่นคุณสามารถใช้ npm link เพื่อให้การพึ่งพาเหล่านี้เชื่อมโยงกับโครงการ NPM อื่น ๆ ของคุณ

• npm run link-all Runs npm link ในแพ็คเกจที่ตีพิมพ์ทั้งหมดเพื่อให้สามารถใช้การพึ่งพาในท้องถิ่นเพื่อพัฒนาด้วย นอกจากนี้ยังจะพิมพ์คำสั่งเพื่อเชื่อมโยงการพึ่งพา

ไดอะแกรมสถาปัตยกรรม

แผนภาพด้านล่างแสดงสถาปัตยกรรมระดับสูงของระบบ MML เมื่อใช้ในเว็บเบราว์เซอร์ที่มีเซิร์ฟเวอร์ DOM เครือข่ายที่ใช้เอกสาร MML

 กราฟ TD
  Subgraph Networked Dom Server
    Networked-Dom-Server [เครือข่าย DOM Server]
    Networked-DOM-Document [DOM DOM เครือข่าย]
    jsdom [jsdom]
    WebSocket [WebSocket Handler]
    Networked-Dom-Server-> Networked-DOM-Document
    Networked-Dom-Document-> JSDOM
  จบ
  MML-Source ["MML Source Source (HTML)"]
  MML-Source-> เครือข่าย-โดม-เอกสาร
  เว็บเบราว์เซอร์ย่อย
    เว็บเบราว์เซอร์ [เว็บเบราว์เซอร์]
    Subgraph "3D Web Experience"
      สาม-js-scene [สามฉาก JS]
      Subgraph เครือข่ายไคลเอนต์ DOM
        Networked-Dom-Client [เครือข่าย DOM Client]
        dom ["dom (html)"]
        Networked-dom-client-> dom
      จบ
      ไลบรารีไคลเอนต์ Subgraph MML
        Web-Browser-MML-Client [MML RemotEndocument Instance]
        MML-Three-Js [MML Three.js]
        MML-THREE-JS-กิจกรรม-> Web-Browser-MML-Client
        Web-browser-mml-client-> mml-three-js
      จบ
      DOM-แสดงผลโดย-> mml-three-js
      MML-THREE-JS-แต่งเป็น-> สาม-JS-Scene
    จบ
  จบ
  Networked-dom-client-> ws-addr
  ws-addr-> webSocket
  ws-addr ["ws: // ... "]
  WebSocket-> เครือข่าย-โดม-เซิร์ฟเวอร์
  Web-Browser-> Web-browser-mml-client
  web-browser-mml-client-> networked-dom-client