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;
}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.
A quick sandbox to test out
bower install webvr-markupthen 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>create a Metaverse world
Meta style will be like style sheet.
<meta-style>
.nice-tabe {
}
</meta-style>creates a structure of the room
widthtype: number, default: 1heighttype: number. default 1depthtype: number. default 1
creates a wall in the meta-room
alignchange the alignment of wall. Default is front. Can be left, right, ceiling, front and back.
material-colorcss color code
<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>creates a floor in the meta-room
material-colorcss color code
<meta-room>
<meta-floor meta-style='material-color: #333333'></meta-floor>
</meta-room>creates a table structure
material-colorcss color codetbottom-padding
<meta-floor>
<meta-table meta-style='material-color: red;'>
<meta-tsurface></meta-tsurface>
</meta-table>
</meta-floor>creates a table surface
material-colorcss color code
creates a table side
alignchange the alignment of wall. Default is front. Can be left, right, ceiling, front and back.
material-colorcss color code
it is a prototype.
Open a github issue
- 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
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