hypershape

HyperShape

<script src="https://unpkg.com/hypershape/dist/hypershape.js"></script>

Hypertext for the metaverse

Inspired by vrml and htmx — HyperShape is a hypertext for building an interactable server-generated metaverse.

See a demo

The markup language shall be known as MHTL (metaverse hypertext language)

What made Web 1.0 great

Two key elements of HTML unleashed the power of Web 1.0

• <a> - The anchor element created the world wide web, it allowed a network of hypermedia servers to be traversed by a hypermedia client
• <form> - The form element allowed apps to be created on the world wide web by being a control that could submit data to server backends.

HyperShape aims to capitalize on these two ideas as it's foundations to make a metaverse that is traversable and modifiable.

Principles

• WebGPU support by default
• Support PBR only
• Hypertext only behavior via MHTL
• Be future forward for augmented reality

MHTL Elements

Spatial elements

• mv-space - container for the root space which content and controls are attached to
  • id - identifier attribute used for targeting by forms
• mv-hud - container for the root space which content and controls are attached to in the view of the camera
• mv-camera - allows you specify the position of the camera in space
  • position - positioning attribute for camera (e.g. 1,1,1)
  • lookat - attribute to set a target for camera to look at (e.g. 1,1,1)

Hypermedia control elements

• mv-link - allows you define elements that navigate the browser to a different url
  • href - hypertext reference attribute that specifies a url child objects will navigate the browser to when clicked
• mv-form - allows you to submit data to hypermedia servers and either navigate the whole page or replace a small part of it with the returned hypertext
  • action - url attribute where the form data will be sent to either as url query parameters for GET requests or form data for POST requests
  • method - http method attribute to be used for the action GET/POST (default GET)
  • timout - attribute used for setting a timeout (in milliseconds) after which the form will auto submit
  • timer - attribute used for setting a timer interval (in milliseconds) which the form will auto submit each interval
  • target - attribute used for targeting the ID of the element you want to replace the inner dom of instead of a full screen navigation
• mv-input - special controls that add data to the form data to be submitted
  • src - model to use for input
  • type - input type attribute (text,password,checkbox)
  • name - name attribute that will determine the name to be used in form submission data
  • position - positioning attribute for 3D object (e.g. 1,1,1)
  • rotation - rotation attribute for 3D object in degrees (e.g. 0,90,0)
  • scale - scaling attribute for 3D object (e.g. 1,1,1 or .4)
• mv-target - allows you to specify a target where content returned from the form will be placed
  • id - identifier attribute used for targeting by forms

Content Elements

• mv-model - 3D model to add to a space
  • src - attribute for specifing the GLTF file to show
  • position - positioning attribute for 3D object (e.g. 1,1,1)
  • rotation - rotation attribute for 3D object in degrees (e.g. 0,90,0)
  • scale - scaling attribute for 3D object (e.g. 1,1,1 or .4)
• mv-label - single line of text to add to a space
  • text - text attribute that determines the text to show
  • position - positioning attribute for 3D object (e.g. 1,1,1)
  • rotation - rotation attribute for 3D object in degrees (e.g. 0,90,0)
  • scale - scaling attribute for 3D object (e.g. 1,1,1 or .4)
• mv-light - light to add to a space
  • type - light type attribute to specify the kind of light to use ambient or "hdri
  • src - src attribute for specifing hdri to use
  • background - boolean attribute for specifing if we ant hdri to show as background too
  • color - color attribute for ambient light
  • intensity - intensity for ambient light (default 1)
• mv-water - dynamic water element to add to a space

Project status

• basic elements are implemented and functional
• want to add less distructive changes to 3D scene when dom changes
• want to add more lights
• want to support more 3D formats
• want to add better input controls
• want to add VR support with teleport

Learn HyperShape in 4 examples

3D model positioned in space that links to another page

<mv-space>
  <mv-link href="https://en.wikipedia.org/wiki/Fox">
    <mv-model
      src="https://richardanaya.github.io/hypershape/dist/Fox.gltf"
      position="0,.1,0"
      scale=".005"
      rotation="0,45,0"
    ></mv-model>
  </mv-link>
</mv-space>

Play with the demo.

An ocean and HDRI environment light with a camera looking at the horizon

<mv-space>
  <mv-camera position="0,1.75,3" lookat="0,1.75,0"></mv-camera>
  <mv-light
    type="hdri"
    src="https://richardanaya.github.io/hypershape/dist/assets/kloofendal_43d_clear_puresky_4k.hdr"
    backkground="true"
  ></mv-light>
  <mv-water></mv-water>
</mv-space>

Play with the demo.

A login screen in a HUD

<mv-hud>
  <mv-form action="/login">
    <mv-input type="text" position="0,.2,0" name="email"></mv-input>
    <mv-label position=".1,.2,0" text="Email"></mv-label>
    <mv-input type="password" position="0,0,0" name="password"></mv-input>
    <mv-label position=".1,0,0" text="Password"></mv-label>
    <mv-input type="submit" position="0,-.2,0"></mv-input>
    <mv-label position=".1,-.2,0" text="Login"></mv-label>
  </mv-form>
</mv-hud>

Play with the demo.

Replace content with interactive buttons

<mv-space id="my_object">
  <mv-model
    src="https://richardanaya.github.io/hypershape/dist/Fox.gltf"
    position="0,.1,0"
    scale=".005"
    rotation="0,45,0"
  ></mv-model>
</mv-space>
<mv-hud>
  <mv-form action="/avocado" target="my_object">
    <mv-input type="submit" position="0,0,0"></mv-input>
    <mv-label position=".1,0,0" text="Avocado"></mv-label>
  </mv-form>
  <mv-form action="/fox" target="my_object">
    <mv-input type="submit" position="0,-.2,0"></mv-input>
    <mv-label position=".1,.-2,0" text="Fox"></mv-label>
  </mv-form>
</mv-hud>

Play with the demo.

Art