<script src="https://unpkg.com/hypershape/dist/hypershape.js"></script>
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)
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.
- WebGPU support by default
- Support PBR only
- Hypertext only behavior via MHTL
- Be future forward for augmented reality
mv-space
- container for the root space which content and controls are attached toid
- 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 cameramv-camera
- allows you specify the position of the camera in spaceposition
- 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
)
mv-link
- allows you define elements that navigate the browser to a different urlhref
- 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 hypertextaction
- url attribute where the form data will be sent to either as url query parameters forGET
requests or form data forPOST
requestsmethod
- http method attribute to be used for the actionGET
/POST
(defaultGET
)timout
- attribute used for setting a timeout (in milliseconds) after which the form will auto submittimer
- attribute used for setting a timer interval (in milliseconds) which the form will auto submit each intervaltarget
- 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 submittedsrc
- model to use for inputtype
- input type attribute (text
,password
,checkbox
)name
- name attribute that will determine the name to be used in form submission dataposition
- 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 placedid
- identifier attribute used for targeting by forms
mv-model
- 3D model to add to a spacesrc
- attribute for specifing the GLTF file to showposition
- 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 spacetext
- text attribute that determines the text to showposition
- 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 spacetype
- light type attribute to specify the kind of light to useambient
or "hdri
src
- src attribute for specifing hdri to usebackground
- boolean attribute for specifing if we ant hdri to show as background toocolor
- color attribute for ambient lightintensity
- intensity for ambient light (default1
)
mv-water
- dynamic water element to add to a space
- 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
![Screenshot 2023-08-10 at 2 37 51 PM](https://private-user-images.githubusercontent.com/294042/259880026-152190d2-aeb6-455d-81bf-8dd213abcefc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNzYwMzYsIm5iZiI6MTcyMDE3NTczNiwicGF0aCI6Ii8yOTQwNDIvMjU5ODgwMDI2LTE1MjE5MGQyLWFlYjYtNDU1ZC04MWJmLThkZDIxM2FiY2VmYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwNVQxMDM1MzZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01MDM2ZTA1Y2Y1OWY3OTkxYmVkODZiZjQ2NWIzNWM3MmY1YTUxMDBjNDc5MjkxYzhhYTg1Y2U4MGMzOTJlOWQ0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9._IjDWzSLQWQ9fX4_kP8GgkE4hTdqH9NNiusmEF6C7gc)
<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.
![Screenshot 2023-08-10 at 2 48 54 PM](https://private-user-images.githubusercontent.com/294042/259881817-29059b04-efba-4251-bcdc-fcc90bb8449d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNzYwMzYsIm5iZiI6MTcyMDE3NTczNiwicGF0aCI6Ii8yOTQwNDIvMjU5ODgxODE3LTI5MDU5YjA0LWVmYmEtNDI1MS1iY2RjLWZjYzkwYmI4NDQ5ZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwNVQxMDM1MzZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lODE5ZTczNjQxMDQ1NjUxMzk5ZWNlZjZmMWEyMDI1ZTlmY2EzZmJkM2FkMTJkNjllMTM3MzRhN2ZmNDg4MjRlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.KuNqHrBRBEALZLbuuxpVnaiq7Z2K5H7ODwIacWRhMT0)
<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.
![Screenshot 2023-08-10 at 3 02 47 PM](https://private-user-images.githubusercontent.com/294042/259884095-b3d6b1d7-a8d8-4262-a820-c1c0699b4052.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNzYwMzYsIm5iZiI6MTcyMDE3NTczNiwicGF0aCI6Ii8yOTQwNDIvMjU5ODg0MDk1LWIzZDZiMWQ3LWE4ZDgtNDI2Mi1hODIwLWMxYzA2OTliNDA1Mi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwNVQxMDM1MzZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mMjRlZDU4ODA5NGRjYzUzYWRkYzQ4NmEzZTBhZjQxYjUzZTE5MTc2MmExMTlkYjgxMjM1NmIzY2MxNDRhYzNkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.HfvYU8nPO9Gn8XuA2XYDj4mpU-zjXAv5rk2HmYe_khs)
<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.
![Screenshot 2023-08-10 at 3 47 30 PM](https://private-user-images.githubusercontent.com/294042/259890090-a1d9447c-742d-4e41-9404-460d23b24c8d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNzYwMzYsIm5iZiI6MTcyMDE3NTczNiwicGF0aCI6Ii8yOTQwNDIvMjU5ODkwMDkwLWExZDk0NDdjLTc0MmQtNGU0MS05NDA0LTQ2MGQyM2IyNGM4ZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwNVQxMDM1MzZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00NjUwODQxNzc0ZTE3ZDZmMGEyZTBlNTEzZTVmZjY0Y2NmNjcyYmI5ZDFlMTY5ODg4YTA5NjkyNWM5OGIwNmU3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.JpodLBi1fZZ8ND8tglqlxoPXp2JnyslcMvjNYYLNIws)
<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.