New and improved

Hey all!

Hannah here — let’s get updated on some happenings from the end of last year.

This one’s a bit shorter, but more features are coming your way in the coming months 😊

Check us out!

Join WebXR.social! - Quick reminder - We’re big fans of mastodon, so we’ve launched an instance for the WebXR community! Jump in and sign up to keep track of what’s happening with the Spatial Web.

We have a Discord! - Keep a closer eye on our discussions and commentary, and even join in with your ideas - we post very openly on there, staying true to our #buildInPublic value.

Star us on GitHub to stay up to date on any features and changes we build in the coming months - have an idea/request? open an issue or make a pull request :D

Documentation - Our documentation is now hosted on mrs.docs.io, check it out! More tutorials, onboarding, etc. coming soon ~

Some major changes

The benefit of building in public is that you can see as we play with ideas and pivot the code structurally over-time. As our API is getting more solidified and public-ready, the larger refactors and maneuverings are calming down. In this final refactor, we’ve modified the repo for readability, usability, and discoverability of our API and its features.

From a user-standpoint, this means we’ve condensed the use of row and column into the usual HTML/CSS flex-box features and reduced the confusing differences between <mr-surface> and <mr-container> in favor of <mr-panel> as we transition more of our hard-coded elements over to the default-understood setup.

That is, code setup A can be condensed and streamlined through setup B instead.

setup A - old and sad 🫠

<mr-app>
    <mr-surface>
    <mr-container>
        <mr-panel></mr-panel>
        <mr-row>
            <mr-text>
                This is a quick example of an image gallery with explainer text.
            </mr-text>
            <mr-column>
                <mr-image src="..."></mr-image>
                <mr-row height="0.02">
                    <mr-button onClick="Prev()"> <- </mr-button>
                    <mr-button onClick="Next()"> -> </mr-button>
                </mr-row>
            </mr-column>
        </mr-row>
    </mr-container>
    </mr-surface>
</mr-app>

setup B - new and improved 🦾

<mr-app>
    <!-- The 2D UI Panel -->
    <mr-panel class="layout">
        <mr-text class="title">
            This is a quick example of an image gallery with explainer text.
        </mr-text>
        <mr-img src="..."></mr-img>
        <!--wrap non-UI components in mr-div to anchor to UI-->
        <mr-div id="logo">
            <mr-model src="./assets/models/logo.glb"></mr-model> 
        </mr-div>
    </mr-panel>
</mr-app>

note: CSS for the above is available on our mrjs/README.md

As a quick explanation:<mr-surface> and <mr-container>are handled within by default, <mr-panel> now acts as the main ui-panel, and <mr-row> and <mr-column>are handled solely through the CSS flex-box attributes now. We have also switched to allow for an <mr-div> item to be a more user specific anchoring element.

Regardless of tablet, desktop, mobile, headset, and beyond, your pages can now all operate smoothly through all transitions.

Organizationally, this update also means instead of multiple jumbled folders within /src - there’s now three main levels. From an open-source standpoint, it is now easier to understand and delve into for building off of, requesting changes, and creating use-cases of your own.

/src 
 ┬
 ├───────┬─────► core (the ECS holder)
 │       │
 │       ├─────► componentSystems 
 │       │
 │       ├─────► entities
 │       │
 │       ╰─────► allBaseMRFiles
 │
 ├─────► datatypes (specific datatypes separate from ECS)
 │ 
 ╰─────► utils (generic mrjs utils. Call-able through `mrjsUtils.function()` )

Have features you want to add yourself? Send ’em our way in a pull request :)

Some smaller updates and features

npm - you can now grab directly from NPM to use mrjs ! npm i mrjs and you’re ready to go. As before, our CDN link also still works if you’d prefer to stick with that instead.

<script src="https://cdn.jsdelivr.net/npm/mrjs@latest/dist/mrjs"></script>

scrolling - there were some off edge-cases for in headset scrolling. This is now resolved and should be handled intuitively.

text- some of the internal text/font rendering issues are now resolved

More updates coming soon - Found a bug or have a feature request for the mrjs code-base? Request it here :)

Til next time

Looking forward to the upcoming year, exciting things are in the works. Stay tuned~

Hannah