webVR Markup (Alpha)
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
Styleable 3d objects
Display inline positioning
Animation with CSS keyframe
Sandbox
A quick sandbox to test out
Getting Started
bower install webvr-markupthen include MetaRoomMarkup and webcomponentsjs in your html
<html>
<head>
<script src="https://github.com/wizztjh/metaroom-vr-markup/raw/gh-pages/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://github.com/wizztjh/metaroom-vr-markup/blob/gh-pages/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
widthtype: number, default: 1heighttype: number. default 1depthtype: number. default 1
<meta-wall>
creates a wall in the meta-room
Attributes
alignchange the alignment of wall. Default is front. Can be left, right, ceiling, front and back.
Meta style
material-colorcss 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-colorcss 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-colorcss color codetbottom-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-colorcss color code
<meta-tbottom>
creates a table side
Attributes
alignchange the alignment of wall. Default is front. Can be left, right, ceiling, front and back.
meta-style
material-colorcss 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:
Dev setup
git clone git@github.com:vr-collab/webvr-markup.git
cd webvr-markup
npm install
bower installHot update during development
gulpRun the test