Skip to content

Add uiblocks addon and an xrblocks integrated sample.#199

Open
qxziuan wants to merge 1 commit intomainfrom
add-uiblocks-addon
Open

Add uiblocks addon and an xrblocks integrated sample.#199
qxziuan wants to merge 1 commit intomainfrom
add-uiblocks-addon

Conversation

@qxziuan
Copy link
Collaborator

@qxziuan qxziuan commented Mar 19, 2026

This PR introduces uiblocks, a powerful new spatial UI framework addon for xrblocks. It is built on top of the @pmndrs/uikit engine and enables developers to easily create responsive, interactive, and beautiful 2D interfaces situated directly in 3D/XR space.

Key Features & Capabilities:

  • Flexbox Layout Engine: Automatic UI item positioning, sizing, wrapping, and alignment (padding, gap, flow), completely eliminating the need for manual 3D coordinate math.
  • Rich Aesthetics: Out-of-the-box support for glassy background panels, adjustable corner radii, borders, and smooth linear/radial gradient fills.
  • Core UI Components: (1) UICard: The physical world bridge that anchors 2D UI panels into the 3D scene. It support multiple spatial behaviors such as HeadLeashBehavior, ObjectAnchorBehavior, etc. (2) UIPanel: Flexbox containers for structuring layouts. (3) UIText, UIImage, UIIcon: The UI elements.
  • Built-in Interactions: Ready-to-use raycast callbacks for interactive buttons with animated state changes.

What's included in this PR:

  • The complete uiblocks source library seamlessly integrated into the xrblocks build pipeline.
  • Comprehensive documentation.
  • A suite of isolated basic samples demonstrating individual features like cards, layouts, contents, and interactions.
  • A fully assembled integration sample at samples/uiblocks/index.html showcasing a complete, interactive profile card.

@qxziuan qxziuan requested review from dli7319 and ruofeidu March 19, 2026 19:16
@qxziuan qxziuan force-pushed the add-uiblocks-addon branch 2 times, most recently from 5a3ecb0 to e539eac Compare March 19, 2026 19:28
@dli7319
Copy link
Collaborator

dli7319 commented Mar 19, 2026

The package-lock is pointing to google-internal URLs.

rollup.config.js Outdated
},
}),
],
onwarn: (warning, warn) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need this?

@ruofeidu
Copy link
Collaborator

Thank you David!

I think Xun is working on lint errors and let's review after all check have passed.

@ruofeidu ruofeidu self-assigned this Mar 20, 2026
@qxziuan qxziuan force-pushed the add-uiblocks-addon branch from e539eac to fb868e6 Compare March 20, 2026 20:37
@qxziuan qxziuan force-pushed the add-uiblocks-addon branch from fb868e6 to 4414c89 Compare March 20, 2026 20:38
@qxziuan
Copy link
Collaborator Author

qxziuan commented Mar 20, 2026

Hi @dli7319 @ruofeidu I resolved all the errors. @dli7319 I also addressed your previous feedback.

@qxziuan qxziuan changed the title Add uiblocks addon and a sample. Add uiblocks addon and an xrblocks integrated sample. Mar 20, 2026
Copy link
Collaborator

@ruofeidu ruofeidu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall look great to me. AMAZING Major Feature Update!

Things to improve next time:

  1. consistency of third-person / first person comments, capitalization.

  2. xb.raycaster, xb.controllers alias to further streamline access.
    you can already use xb.scene and xb.renderer from aliases.

  3. Example to compose from JSON?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants