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

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

Principles

MHTL Elements

Spatial elements

Hypermedia control elements

Content Elements

Project status

Learn HyperShape in 4 examples

Screenshot 2023-08-10 at 2 37 51 PM

<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

Screenshot 2023-08-10 at 2 48 54 PM

<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

Screenshot 2023-08-10 at 3 02 47 PM

<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

Screenshot 2023-08-10 at 3 47 30 PM

<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

image