Recap of HTML
Most Web beginner starts from HTML.
It is the foundation of the Web. HTML stands for HyperText Markup Language. It is a markup language that defines the structure of your content. HTML consists of a series of elements that you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>HTML in Space
At traditional Web browser, HTML is commonly used to create window-based applications, namely pages. The browser renders the HTML and displays it to the user. The user can interact with the page by clicking on links, buttons, and other elements.
This behavior has been extended to other screen-based devices, such as smartphones and tablets. HTML or Web pages are used to create windowed applications on these devices as well.
But the question is: what about non-windowed devices? Such as an AR glasses or VR headset? How does HTML work in a space?
I believe that every Web developer should answer this question quickly: create a virtual screen or window before rendering the HTML.
And yes, good news! We follow this way to create a way to render web pages in space:
- Create a virtual window firstly.
- Render the HTML content into the created window.
- Display the window in the space.
- Bypass the user interaction to the window.
Now we have a virtual window to use any Web page, and we can interact with it, either. The experience is similar to the Desktop Web browser or smartphone, and this has been the first step to bring the Web to space.
The next step is the non-windowed objects and its interactions.
The Birth of XSML
Because <body> does represent a 2D plane only, there is no possibility to put a cube or sphere in <body> directly. So we need to extend the HTML to support 3D objects, and we call it XSML (eXtended Space Markup Language).
<xsml>
<head>
<title>My First Web box</title>
</head>
<space>
<cube />
<sphere />
<plane>
<h1>Welcome to My First Web Page</h1>
<p>This is a paragraph of text.</p>
</plane>
</scene>
</xsml>In XSML, we do the following changes to HTML:
- Replace
<body>with<space>, now the root element can represent a three-dimensional space. - Add new tags to represent 3D objects, such as
<cube>,<sphere>, and<plane>. - Put the original HTML tags like
<h1>and<p>inside the<plane>tag.
This seems to be simple enough, and looks easy to use?
The answer is NO. The most difficult part is XSML is not HTML, it is a brand new language that needs to be written from scratch. It causes the Web ecosystem to be divided into 2 parts: HTML and XSML, and no one wants to learn a new language and even migrate the existing HTML content to XSML.
The 2nd problem to be considered is the Web APIs and CSS is designed based on HTML context, if we want to introduce a new markup language, there is a lot of work to be done to make the Web APIs and CSS compatible with XSML design.
Therefore the Backward Compatibility would be the key to the success of the Web in space. We need to find a way to extend HTML to support 3D objects without breaking the existing Web ecosystem.
Recap HTML
To find the key to keep the backward compatibility, we need to recap the HTML and find the way to extend it to support 3D objects.
The answer is the HTML is not application, but a document.
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is a paragraph of text.</p>
</body>The above snippet is the information about: there is a heading and a paragraph in a document, and the browser renders it to the user, but it does not tell the browser how to render it and what render target to use.
This means the body is not a window, not a volume, not anything that we can see. It's just a document, a piece of information.
Based on this, a HTML document can be rendered in a window just like the traditional Web browser does, a HTML document can be rendered in a three-dimensional space. For example, the <body> can be rendered in a cube, the <h1> can be rendered in a plane, and the <p> can be rendered in a plane as well.
Let's add a 3D object to the HTML document:
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is a paragraph of text.</p>
<sphere />
</body>The above HTML added a <sphere /> tag to the document, and insert after the <p> tag. The renderer can render the sphere after the paragraph, and the user can see the sphere and other 2D elements in the same space.
This is completely backward compatible! The existing HTML (Web pages) can be rendered in a three-dimensional space without any modification. The rest of the work is to extend the HTML to support 3D objects and interactions, this is progressive enhancement. To all the Web developers, they need to work just like before, and learn the new elements and attributes on-demand to add XR experience to their Web pages.
The Vision
JSAR is to help the Web developers to create XR experiences with the existing Web technologies. It is a progressive enhancement to the Web, and it is backward compatible.
With this vision, XSML has been deprecated and replaced by the extended HTML.