Skip to content

Add uiblocks addon and an xrblocks integrated sample.#199

Merged
qxziuan merged 1 commit intomainfrom
add-uiblocks-addon
Mar 23, 2026
Merged

Add uiblocks addon and an xrblocks integrated sample.#199
qxziuan merged 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 2 times, most recently 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?

@qxziuan qxziuan force-pushed the add-uiblocks-addon branch from 4414c89 to a081d3e Compare March 23, 2026 17:33
@qxziuan qxziuan force-pushed the add-uiblocks-addon branch from a081d3e to b03f6d4 Compare March 23, 2026 17:35
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.

Looks good to me.

Let's start with add-ons and gradually change existing demos to ui blocks.

@qxziuan qxziuan merged commit 4d75b6f into main Mar 23, 2026
7 checks passed
@ruofeidu ruofeidu added the enhancement New feature or request label Mar 24, 2026
@dli7319 dli7319 deleted the add-uiblocks-addon branch March 27, 2026 00:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants