Skip to content

Commit

Permalink
Merge branch 'main' into hb-mask-sky
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanbollar
hanbollar committed Feb 9, 2024
2 parents 69828c3 + a0f0e6d commit bfbdf7a
Show file tree
Hide file tree
Showing 62 changed files with 3,888 additions and 1,301 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/docs.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@ jobs:

- name: Update Docs
run: |
rm "./source/pages/02Javascript API.md"
mv -f "../doc/js-api.md" "./source/pages/02Javascript API.md"
rm "./source/pages/03Javascript API.md"
mv -f "../doc/js-api.md" "./source/pages/03Javascript API.md"
- name: Commit only if there are changes
run: |
Expand Down
7 changes: 6 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
# Build/Dist - ignore in this repo, they'll be built directly by render.com
dist/*
dist/assets*
dist/examples/
dist/samples/
dist/index*
dist/style*


# Docs - ignore auto html docs in this repo, they'll be exported to the docs repo
docs/*
Expand Down
41 changes: 20 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
![The mrjs logo](https://docs.mrjs.io/static/mrjs_nopadding.svg)

An extensible WebComponents library for the Spatial Web
An extensible library of Web Components for the spatial web.

[![npm run build](https://github.com/Volumetrics-io/mrjs/actions/workflows/build.yml/badge.svg)](https://github.com/Volumetrics-io/mrjs/actions/workflows/build.yml) [![npm run test](https://github.com/Volumetrics-io/mrjs/actions/workflows/test.yml/badge.svg)](https://github.com/Volumetrics-io/mrjs/actions/workflows/test.yml) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/Volumetrics-io/mrjs/blob/main/LICENSE)

## Overview

mrjs is a mixed-reality-first, WebXR user interface library meant to bootstrap spatial web app development. It implements much of the foundational work so that developers can spend less time on the basics and more time on their app.
MRjs is a mixed-reality-first, WebXR user interface library meant to bootstrap spatial web development. It implements much of the foundational work so that developers can spend less time on the basics and more time on their app.

## Main Links

- [landing-page](https://mrjs.io) - includes about, info, and high def and community-created samples
- [docs](https://docs.mrjs.io) - includes onboarding information, engine setup (ECS, Contributing, etc), html tag helpers, and js-api documentation
- [dev-examples](https://examples.mrjs.io) - the examples from the main mrjs repo used as dev explainers and for testing purposes
- [docs](https://docs.mrjs.io) - includes onboarding information, engine setup (ECS, Contributing, etc.), HTML tag helpers, and JavaScript API documentation
- [dev-examples](https://examples.mrjs.io) - the examples from the main MRjs repository used as development explainers and for testing purposes.

## Getting started

Expand Down Expand Up @@ -50,24 +50,24 @@ npm run server

### Documentation:

Check [docs.mrjs.io](https://docs.mrjs.io) for the full documentation or our [repository](https://github.com/Volumetrics-io/documentation).
Check [docs.mrjs.io](https://docs.mrjs.io) or our [repository](https://github.com/Volumetrics-io/documentation) for the full documentation.

For local documentation or to check the local output when writing your own PR to see how it will update, run the below command. As a heads up, order of creation of docs depends on your operating system, so if when you run this and the order looks different, no worries - in the repo itself our action will handle that for you and default to use the right version for these automatically generated docs.
For local documentation or to check the local output when writing your own PR to see how it will update, run the below command. As a heads-up, the order of creation of docs depends on your operating system, so if when you run this and the order looks different, no worries - in the repository itself our action will handle that for you and default to use the right version for these automatically generated docs.

```sh
npm run docs
```

## HTTPS Requirement

In order to test on headset, WebXR requires that your project be served using an HTTPS server. If you're using WebPack you can achieve this by utilizing the [DevServer webpack plugin](https://webpack.js.org/configuration/dev-server/) with `https: true`.
To test in headset, WebXR requires that your project be served using an HTTPS server. If you're using Webpack, you can achieve this by utilizing the [Dev Server webpack plugin](https://webpack.js.org/configuration/dev-server/) with `https: true`.

Here are some additional solutions:

- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) for VS Code
- [via python](https://anvileight.com/blog/posts/simple-python-http-server/)
- [via Python](https://anvileight.com/blog/posts/simple-python-http-server/)

Both options require you generate an ssl certificate & key via openssl:
Both options require you generate an SSL certificate and a key via OpenSSL:

```sh
openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365
Expand All @@ -92,7 +92,6 @@ Create 2D UI using CSS and `mr-panel`
font-size: 5vw;
line-height: 100%;
color: rgba(24, 24, 24, 0.75);
grid-column: 2;
}
Expand Down Expand Up @@ -125,7 +124,7 @@ mr-img {

## Built-in Physics Engine

Rapier.js is fully integrated out of the box. We use it to power collision based hand-interactions, but also to support other common features such as:
Rapier.js is fully integrated out of the box. It is used to power collision-based hand interactions, but also to support other common features such as:

- Gravity
- Rag doll physics
Expand All @@ -136,19 +135,19 @@ Rapier.js is fully integrated out of the box. We use it to power collision based

## Extensible

Designed to be extensible, mrjs provides a familiar interface via THREE.js and the Custom Elements API, and leveled up with a built in ECS.
Designed to be extensible, MRjs provides a familiar interface via THREE.js, the Custom Elements API, and is leveled up with a built-in ECS (Entity Component System).

### ECS
### Entity Component System

mrjs is designed from the ground up using the Entity-Component-System Architecture. This is a common architecture implemented by Game Engines such as Unity, Unreal, and Apple's RealityKit.
MRjs is designed from the ground up using the Entity-Component-System Architecture. This is a common architecture implemented by Game Engines such as Unity, Unreal, and RealityKit.

#### Entity

An Entity is an object. It stores only the most fundamental data, such as a unique identifier, a THREE.js Object3D, a physics body, and dimension data such as width and scale.

Any `mr-*` tag within the `mr-app` is an Entity. `mr-entity` is the spatial equivalent of a `div`.

Creating a custom Entity is as simple as creating a Custom Element via the WebComponents API.
Creating a custom Entity is as simple as creating a Custom Element via the Web Components API.

Example:

Expand All @@ -169,9 +168,9 @@ customElements.get('mr-spacecraft') || customElements.define('mr-spacecraft', Sp

#### Systems

A System contains logic that is applied to all entities that have a corresponding Component, using the data stored by the component. Unlike Entities & Components, Systems have no HTML representation and are implemented entirely in JS.
A System contains logic that is applied to all entities that have a corresponding Component, using the data stored by the component. Unlike Entities & Components, Systems have no HTML representation and are implemented entirely in JavaScript.

When a component is attached or detatched from an entity, it is added or removed from its System's registry of entities.
When a component is attached to or detached from an entity, it is added or removed from its System's registry of entities.

Example:

Expand All @@ -184,7 +183,7 @@ class OrbitSystem extends System{
// called every frame
update(deltaTime, frame) {
for(const entity in this.registry) {
// Update entitiy position
// Update entity position
let component = entity.components.get('orbit')
component.radius
component.target
Expand All @@ -204,18 +203,18 @@ class OrbitSystem extends System{
//...
}

// do something when an orbit component is detatched
// do something when an orbit component is detached
detachedComponent(entity) {
//...
}
}
```

When you define a custom system, it listens for events triggered when the System's corresponding component is attached, updated, or detatched. in the above case, `data-comp-orbit`.
When you define a custom system, it listens for events triggered when the System's corresponding component is attached, updated, or detached. In the above case, `data-comp-orbit`.

#### Components

Components are attached to entities and used to store data. in mrjs they are implemented using data attributes beginning with the prefix `data-comp-`.
Components are attached to entities and used to store data. In MRjs they are implemented using data attributes beginning with the prefix `data-comp-`.

Example:

Expand Down
Binary file added dist/57cf7fc5ff4d6dfc74e4.module.wasm
View file
Binary file not shown.
116 changes: 116 additions & 0 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mr.js</title>
<meta name="description" content="mr.js">
<script src="./mr.js"></script>
<link rel="stylesheet" type="text/css" href="./index-style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body >
<mr-app>
<mr-panel class="layout">
<mr-div id="navbar">
<mr-a href="https://volumetrics.io" target="_blank" class="company">
volumetrics
</mr-a>
<mr-model
class="logo"
id="logo-model"
src="/assets/models/logo.stl"
data-comp-instancing="type: animate;"
data-comp-spin="maxspeed: -0.002; acceleration: -0.000008;"
data-rotation="-22.91 17.1887 45.8366">
</mr-model>
<mr-button onclick="spin()" class="spin-button">
spin
</mr-button>
</mr-div>

<mr-text class="title">
mr.js
</mr-text>


<mr-div class="headset">
<mr-img src="/assets/textures/headset-keyboard.jpeg"></mr-img>
<mr-text class="sub-title">
Building for Mixed Reality, in Mixed Reality.
</mr-text>
</mr-div>
<mr-text class="col-2 example-header">
Examples
</mr-text>
<mr-div class="links col-2">
<mr-a class="example-link" href="https://mrjs.io/examples/anchors.html">
Anchoring
</mr-a>
<mr-a class="example-link" href="https://mrjs.io/examples/audio.html">
Audio
</mr-a>
<mr-a class="example-link" href="https://mrjs.io/examples/embed.html">
Embed
</mr-a>
<mr-a class="example-link" href="https://mrjs.io/examples/models.html">
Models
</mr-a>
<mr-a class="example-link" href="https://mrjs.io/examples/skybox.html">
Skybox
</mr-a>
</mr-div>

<mr-text class="paragraph">
Ex veniam sunt laboris magna commodo minim eiusmod consequat dolore velit ipsum dolore. Sit nisi id tempor occaecat aute commodo nulla fugiat eu ex sit anim duis. Non eiusmod dolore exercitation adipisicing laboris elit commodo enim proident et.

Eiusmod tempor veniam et nulla eiusmod ex aute excepteur enim. Velit voluptate proident fugiat aute ea. Qui proident ad consequat enim anim nulla. Est aliquip sint nostrud elit pariatur ipsum dolor magna est eiusmod Lorem pariatur labore. Adipisicing commodo occaecat ea ut nulla magna irure officia nostrud aliqua officia culpa ex pariatur. Aliquip consequat ad proident elit laboris et aliqua nisi est amet tempor. Dolor esse labore laboris reprehenderit id sit.

Anim ipsum sit dolore id excepteur ex aliqua aute culpa duis adipisicing. Anim magna minim do nisi anim amet pariatur. Nulla ad ullamco labore culpa quis. Incididunt pariatur laboris do duis irure.

Pariatur excepteur et proident nisi. Id exercitation qui pariatur aliquip eiusmod. Nulla pariatur ad excepteur aliqua dolore sint laboris sit laborum adipisicing voluptate.

Sit aliqua eu ullamco culpa labore nostrud sit. Ullamco sit cillum excepteur officia irure laboris occaecat. Esse anim ut voluptate excepteur excepteur nostrud laboris.

Voluptate amet exercitation in consequat adipisicing eu in ea nulla eu occaecat excepteur ea irure. Nisi enim mollit do proident ex. In exercitation nostrud anim ad nulla dolor aute Lorem ipsum nostrud adipisicing pariatur. Deserunt deserunt amet anim cillum. Ex nostrud eu aute eu amet dolor. Ex aute in quis qui irure ut pariatur nisi in. Proident id fugiat anim excepteur cupidatat duis cupidatat adipisicing reprehenderit.

Sint eiusmod laboris eu voluptate ullamco ea fugiat exercitation id ad magna commodo. Irure proident et qui ullamco aliquip aute dolor nostrud laborum excepteur sint aute ea. Sit consectetur qui Lorem esse magna voluptate irure aliqua nostrud adipisicing eu irure cupidatat sunt. Officia dolore sint laboris Lorem enim labore mollit reprehenderit laboris amet. Aute eiusmod fugiat labore veniam cupidatat dolor ipsum.

Sit aliquip excepteur laboris ullamco minim sint sit dolor cupidatat culpa consequat quis sit tempor. Culpa voluptate eiusmod et eiusmod. Lorem deserunt ullamco laborum ut. Cillum aute dolore mollit sint amet. Qui ea deserunt consectetur eiusmod. Ullamco qui irure nostrud ea est do. Pariatur laboris labore in irure ea voluptate quis.

Nostrud deserunt ad officia ut irure cupidatat pariatur ea fugiat. Cillum nisi ullamco tempor consequat laborum quis pariatur cillum enim in elit veniam. Cupidatat laborum do cupidatat irure occaecat sunt nostrud. Adipisicing cillum non adipisicing enim officia excepteur ullamco fugiat.
</mr-text>

</mr-panel>

<mr-entity data-comp-animation="type: rotate; maxspeed: 0.002; acceleration: 0.000008;"
data-position="0 0 2">
<mr-light layer="2" color="hsl(30, 100%, 50%)" intensity="1" data-position="0 1 0"></mr-light>
<mr-light layer="2" color="hsl(208, 100%, 50%)" intensity="2" data-position="1 -1 0"></mr-light>
<mr-light layer="2" color="hsl(340, 100%, 50%)" intensity="3" data-position="-1 -1 0"></mr-light>
</mr-entity>

</mr-app>
</body>

<footer>
<script src="./assets/js/SpinSystem.js"></script>
<script>

let model = document.querySelector('#logo-model')

console.log(mrjsUtils.xr.isPresenting);


// increases the maxspeed and acceleration of the animation component on the logo
function spin() {
console.log('spin');
// let animationComp = model.components.get('animation')
// if (animationComp !== undefined && animationComp !== null) {
// model.components.set('animation', {maxspeed: animationComp.maxspeed * 10000, acceleration: animationComp.acceleration * 10000})
// }
}


</script>
</footer>
</html>
1,371 changes: 1,371 additions & 0 deletions dist/mr.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit bfbdf7a

Please sign in to comment.