webVR Markup (Alpha)

November 16, 2015 ยท View on GitHub

What is webVR Markup

webVR Markup applies the HTML/CSS way of positioning and styling to a 3D object.

<meta-table class='nice-table'>
  <meta-tsurface></meta-tsurface>
</meta-table>

.nice-table {
  table-padding-top: 0.4;
  table-padding-bottom: 0.4;
}

Why create webVR markup when there are other VR markup language

Most of the 3D markup language is svg, it declares cube, geometries, vertices and material. I want a real HTML/CSS VR markup language that declares table, room, picture, grass planes, plants, human and stairs.

Why webVR Markup?

Dynamic scaling base on children's dimension

alt tag

Styleable 3d objects

alt tag

Display inline positioning

alt tag

Animation with CSS keyframe

alt tag

Sandbox

A quick sandbox to test out

Sandbox

Getting Started

bower install webvr-markup

then include MetaRoomMarkup and webcomponentsjs in your html

<html>
  <head>
    <script src="./bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="./bower_components/MetaRoomMarkup/dist/metaroom-markup.html">
  </head>

  <body>
    <meta-verse>
      <meta-style>
        meta-table{
          thickness: 0.3;
          tbottom-padding-top: 0.3;
          tbottom-padding-bottom: 0.1;
          material-color: #416fa0;
        }
        meta-wall{
          material-color: #d3d3d3;
        }
      </meta-style>
      <meta-room width='10' height='10' length='20'>
        <meta-wall align='left'>
        </meta-wall>
        <meta-wall align='right'>
        </meta-wall>
        <meta-wall align='front' meta-style='material-color: #e7e3e4;'>
        </meta-wall>
        <meta-wall align='back'>
        </meta-wall>
        <meta-wall align='ceiling'>
        </meta-wall>
        <meta-floor>
          <meta-table width='3' length='3' height='3'>
            <meta-tsurface>
            </meta-tsurface>
            <meta-tbottom align='right'>
            </meta-tbottom>
            <meta-tbottom align='left'>
            </meta-tbottom>
          </meta-table>
        </meta-floor>
      </meta-room>
    </meta-verse>
  </body>
</html>

Markup Language Reference

<meta-verse>

create a Metaverse world

<meta-style>

Meta style will be like style sheet.

<meta-style>
  .nice-tabe {

  }
</meta-style>

<meta-room>

creates a structure of the room

Attributes
  • width type: number, default: 1
  • height type: number. default 1
  • depth type: number. default 1

<meta-wall>

creates a wall in the meta-room

Attributes
  • align change the alignment of wall. Default is front. Can be left, right, ceiling, front and back.
Meta style
  • material-color css color code
Example
<meta-room>
  <meta-wall meta-style='material-color: red' align='left'></meta-wall>
  <meta-wall align='right'></meta-wall>
  <meta-wall align='front'></meta-wall>
  <meta-wall align='back'></meta-wall>
  <meta-wall align='ceiling'></meta-wall>
</meta-room>

<meta-floor>

creates a floor in the meta-room

meta-style
  • material-color css color code
Example
<meta-room>
  <meta-floor meta-style='material-color: #333333'></meta-floor>
</meta-room>

<meta-table>

creates a table structure

meta-style
  • material-color css color code
  • tbottom-padding
<meta-floor>
  <meta-table meta-style='material-color: red;'>
    <meta-tsurface></meta-tsurface>
  </meta-table>
</meta-floor>

<meta-tsurface>

creates a table surface

meta-style
  • material-color css color code

<meta-tbottom>

creates a table side

Attributes
  • align change the alignment of wall. Default is front. Can be left, right, ceiling, front and back.
meta-style
  • material-color css color code

Disclaimer

it is a prototype.

Any meta-tags that you want?

Open a github issue

Roadmap

  • add CSS to change the shader. We should support glsify
  • add functional modeling for table and use CSS to change the arguments
  • tab to change positions like tabindex
  • How do we scroll in VR or 3D? There should be a path in the meta-room that follows all the tabindex, meta-link and meta-item
  • meta-section to define a section and meta-label to guide user to the location along the meta-path region

Introduction to webvr-markup video:

webvr-markup video

Dev setup

git clone git@github.com:vr-collab/webvr-markup.git
cd webvr-markup
npm install
bower install

Hot update during development

gulp

Run the test # go to http://localhost:8000/test/index.html after gulp