0.10.7
What you will see on upgrading (nothing exported in 0.10.6 is removed or renamed, but a ^0.10 range picks this up unasked):
- Every
panel3dis tighter (shorter rows, half the space between them), and icon-bar captions are tooltips. - Flat, the corner buttons, settings panel and pause are drawn in the scene;
::part(...)styling of them no longer shows.<tosi-b3d flat-ui="dom">keeps the HTML. - The settings panel has a title bar (move, name, ×); in a headset it opens from the system bar ahead of you, and Exit VR is on that bar.
- Popups are alpha-blended with the panels' light outline, where they were opaque with a grey rim.
- The placeholder Inventory, Journal, Quick Access and Menu rig panels no longer ship; declare your own
<tosi-b3d-panel>s.
Changed
- The scene's corner controls, settings panel and pause are drawn in the scene by default (flat), not as HTML over the canvas (#3307). If you styled them through
::part(sceneToolbar),::part(scenePanelGear),::part(enterVrButton)or the pause host, that styling no longer shows: the HTML is still there but hidden. A button you hide withdisplay: none(on::part(...)or otherwise) is still left off the in-scene toolbar, which mirrors what shows. The toolbar now has a third button (full screen) and covers about 150 x 56 px at the top left, so anything of yours pinned there needs moving (the demo loadouts moved to 64 px down).<tosi-b3d flat-ui="dom">restores the HTML presentation. - The system bar (
systemBar, wassceneToolbarearlier in this cycle): the scene's one row of buttons, flat in the top-left corner and, in a headset, up ahead where the settings panel used to hang for the whole session (twice the flat bar's size there). The owl opens the settings panel under it (now with a ×, flat and in VR alike); in a headset Exit VR is on the bar and no longer on the settings panel. System panels: a<tosi-b3d-panel preset="system-bar" icon="personStanding">is not pinned to the rig but gets a button on the bar and opens under it, flat and in a headset (and from the HTML lozenge withflat-ui="dom"). One is open at a time, the settings panel included. The content is asked with a cancelablepanelopen, so content that opens itself (inventoryDock) does, and its own close puts the panel away.FramePanelSpec.focusable: falsekeeps a panel where it is placed (#3307). - Placeholder cards wear the outline too (the pins demo's plaques, a system panel with no
svg):placeholderPanelSvgdraws the sharedpanelRim, and the card now fills its viewBox. - A panel on the system bar is an icon, a title and what it shows.
<tosi-b3d-panel icon="map" title="Map">with an<svg>inside it (in HTML, orb3dPanel({ icon, title }, panel3d(...))) gets a button on the bar and opens under it; nothing else to wire. Aniconwith nopresetnow means the system bar (preset="system-bar"still works), and an<svg>child is the content (thesvgproperty, when set, wins). A panel with neither shows a card with its title. - Frame panels can be dragged by their title bar in space, not only on the screen: in a headset the panel slides over its sphere to where the controller points, keeping the offset you grabbed it by (a point along the ray, not its direction from your eyes:
orbitFromAim). For a panel whose anchor is its own angles (not a preset, not aposition). A system panel reopens where you left it in a headset too; holding its button resets both. - A list's "put in" target stays in view: with the heading and the drop target, at the top of a fixed-height list, and the things scroll in the space left. It was the list's last row, below the bottom of a list taller than its panel.
- Polish, from a headset pass. The system bar's buttons are 3 apart with the same 3 between them and its outline (
BAR_GAP,BAR_PAD,BAR_HEIGHTexported), so it reads as one even strip. Panels and popups have no dark fringe at their rounded corners: their textures are premultiplied (SvgTexturepremultiplied) and blendedSRC + DST(1 - a). A box's clip is rounded as the box is, so a pinned heading no longer squares off its top corners. The inventory dock: the bag sits half as far from the loadout, has no "bag" caption, and its two targets sit side by side as unequip (Lucide's backpack, new iconlucideBackpack) and drop (trash) (inventoryPanelheadings,putLabel,putIcon,dropIcon;carrySocketinline,icon); a list that scrolls leaves room for its scrollbar, so rows breathe evenly either side; a one-line target centres its label, and a refusal's reason takes its place. - A system panel wears the settings panel's title bar (move, its title, ×), flat and in a headset, in place of content's own close (the dock's minus in a circle, and its outline, are left to the frame:
panelopensaysframed). Flat, a drag by the bar moves it and it reopens where you left it, as the settings panel does; holding its button on the system bar (or the owl's, for the settings panel) puts it back under the bar (systemhold, afterHOLD_MS).<tosi-b3d-panel chrome="none">for content with chrome of its own;titled3d(content, { title, handleClose })gives any SVG the same bar. - The demo inventory is on the system bar (
demoLoadout, the inventory-box page): a button (Lucide's person-standing) that opens the loadout with its bag. The small closed loadout over your shoulder is gone. - The rig's spots are named pins, empty by default:
left-shoulder,right-shoulder,overhead,waist,wrist, demonstrated on the b3d-panel page. The placeholder Inventory, Journal, Quick Access and Menu panels no longer ship; declared<tosi-b3d-panel>s are the set. - Panels are tighter. A control row pads ¾ as much above and below (40 px, was 46), rows in a
panel3dstack half the theme spacing apart (4, was 8), the icon bar is its buttons plus 2 px either side (36, was 46 plus a caption band), and the gap under a pinned header is halved. A panel shows about a fifth more in the same height.gaponpanel3drestores the old space between rows; the rows themselves and the icon bar stay tighter (a larger--w3d-paddinggrows the rows), so a panel given a fixed height comes out with room to spare. - Icon-bar captions are tooltips. The first word under every icon is gone; hovering (a mouse, or a controller ray) shows the whole title in a tooltip drawn in the SVG, so a texture shows it too.
- Panels and popups share one outline, the corner toolbar's light line (
panelRim: white at 60%, 4 units wide, heavy enough to pop a panel off a dark sky), in place of a popup's grey rim, since nothing in a scene casts a shadow to separate them. - Popups are alpha-blended quads like every other panel, not opaque meshes with cut corners, so their outline and corners are the SVG's and a translucent theme shows through them. They still write depth (
b3dSvgPlanetransparent: 'depth', new: blended, depth-written, empty pixels discarded), so stacked popups do not swap order as you orbit.
Added
Icons:
book,bookOpen(Feather's),personStanding(Lucide's),backpackandloadout(ours). The inventory dock wears the panels' outline, open and closed (closed, its line scaled to the small picture).<tosi-b3d-panel icon>/FramePanelSpec.iconis a system panel's button.The settings panel has a title bar: move, its name and close, in the band that was empty headroom.
panelTitleon<tosi-b3d>names it (the demos' title rows moved there, a row each saved); flat, the panel can be dragged by the bar, stays where you put it across rebuilds, and its × closes it (close is no longer in the icon bar). The DOM panel shows the title in its head.panel3dtakestitleandhandleClose(a close glyph it handles itself, so every presentation gets it) and exposesgripHit(x, y), the bar less the close target, for a host that drags it. Frame panels pinned withscreenAnchormove with a drag on that grip, writingleft/topinto the anchor.The settings panel is in the scene (flat): the same panel the headset gets, as a
ui-layer frame panel pinned under the corner toolbar, and its popups (Perf, errors, …) are made in the same layer, hanging from it (b3dSvgPlane's newlayer, taken by a popup from its opener;panelLayerOf). A press on the background still closes it; a press a panel took does not (pointerClaimedByPanel, since Babylon cancels every canvas press, sodefaultPreventedcannot tell). The glass gamepad, which stays HTML and so sat over in-scene panels and took their presses, steps aside while the settings panel or a pause is up.flat-ui="dom"keeps the HTML panel (#3307).The respawn panel is the scene's modal too, and so is the pause in a headset: a death's panel (
b3dDeath) and the pause are one modal, over everything so terrain and the wreck's smoke cannot bury it: flat in the middle of the screen, in a headset in front of you a little below eye level, riding your body frame. One that is open when you enter or leave VR comes with you. Both come throughb3d.showModal(svg, height, fallback): where the scene has no modal to give (flat-ui="dom"on a monitor, a customsetupXrrig) it callsfallback, the caller's own presentation (the pause's DOM host, the respawn's world plane), including after entering or leaving VR, so a respawn panel never simply vanishes. Two open at once are stacked, the newer nearer and on top (#3307).Pause is in the scene (flat): the same panel as a
modal-layer frame panel pinned to the middle of the screen, square to it, over the world and the ui layer, drawn and pressed first. The reasons it once moved to the DOM (occlusion, a line-of-sight placement, a raycast to press it) are each answered by the layer and the screen pins. The scene panel, open behind it, can still unpause (its header's play button).flat-ui="dom"keeps the DOM pause (#3307).The corner toolbar is in the scene (flat): settings, Enter VR and the new full-screen button are a panel in the
uilayer pinned to the top-left corner, the same in-scene UI a headset gets. It mirrors the HTML buttons rather than redoing them (systemBar): what shows, what is enabled, the icon, and a press is that button's ownclick(), so VR entry and full screen keep one definition and still run inside the user's press.<tosi-b3d flat-ui="dom">keeps the HTML overlay (#3307).System bar icons carry their names: each button's
title(oraria-label) is its SVG<title>, kept current. A texture does not draw it, and everything else can read it. This is the first step of "icons first, never nameless" (UI-DESIGN-NOTES).Full screen (
fullscreenButtonpart): the scene element, not the page; the standard API with the webkit fallback, and no button where neither exists (iPhone Safari). Toggles, and says which way.UI layers:
world,ui,modal. A frame panel'slayer(and<tosi-b3d-panel layer>) puts it in a Babylon utility layer drawn over the whole world with its own depth, and given the pointer first: a nearer wall can neither hide it nor take its press.modalis overui. Made in pairs per scene (panelLayerScene(scene, layer), exported so a game can promote its own objects); a layered panel's stand-in rides its frame in the main scene and the drawn copy takes its pose each frame. The demo loadouts areui. In a headset too: Babylon's XR controller ray picks the world and only its own default layer, and lets a nearer world hit win, so while it picks each frame a ray that hits one of our layers (modal first) returns that pick: it beats the wall, the laser stops at the panel, and the press lands (pickPanelLayers, exported). Checked in the emulated headset with a box between the controller and the loadout: the plain pick hits the box, the controller's pick is the panel, and the press opens it (#3307). ⚠️ It does this by wrappingscene.pickWithRayfrom the start of each XR frame until it renders: a pick of yours in that window that crosses auiormodalpanel returns the panel, whatever your predicate says (#3327, fixed in the next patch).
Fixed
A
<tosi-b3d>removed and added back keeps running. Its system bar was kept as 'the same buttons' across the teardown, so the re-added scene had none, threw in its render loop and froze; an open system panel is now closed with the scene too.A system-bar panel declared in markup alone (
preset="system-bar"and atitle, no JSsvg) was dropped silently; it now gets its button and opens a card with its title, as a pinned panel does.flat-uihas a row in the attribute table, and a value other thansceneordomwarns once.Title bars: the title is centred, and the move and × glyphs are centred in the bar with the same margin at the side as at the top (they were pulled into their corners). The × is drawn larger than the move glyph so the two read the same size: Feather's × covers 12 of its 24 units and the move arrows 20. The HTML panel centres its title too. This is all
chromeLayout, so popups,panel3d,titled3dand the settings panel get it alike.A focused frame panel no longer swells and shrinks with your head in a headset: its fit to the view is worked out once per focus (and per content size), not every frame.
A sky with its own moons no longer draws Earth's. At night the skybox drew its built-in moon on the replayed day arc and lit the scene from it, even when
<tosi-b3d-moon>s gave the sky other moons: on Io (Land and Sky) a bright disc sat low in the east under Jupiter and read as the sun, while Jupiter was lit, correctly, by the real sun set in the west. Now a sky's own moons replace the built-in one, and the night light comes from the first of them, as bright as its sunlit face (Jupitershine).A popup opened from the in-scene settings panel can be moved and closed, and fits the screen. Its × and title bar were tested by a pick in the main scene, but it lives in the
uilayer's own scene (which also keeps the press from the main scene's observers), so neither did anything; popups are now picked in their own scenes, layers first. A screen-pinned panel's popup is built no taller than the screen (a layer host'sroomFor; it scrolls past that) and kept on it, where it used to hang from its row at up to 480 px and run off the bottom (the solar system's 27-body picker).A press on a popup opened from the in-scene settings panel (Perf, errors…) no longer closes the settings panel: in-scene planes claim their presses as frame panels do (
claimPointer).The glass gamepad really steps aside for a menu:
suppresshid it withvisibility, which parts of the pad override, so bits of it still drew and took presses meant for the panel under it. It usesdisplaynow.Full screen: a scene removed and re-added no longer gets a second toggle on its button (one press went in and straight back out), and a refused request no longer throws an unhandled rejection.
Size: barrel (min, packages external) 1104.9 KB raw / 376.3 KB gz, +2.11% on 0.10.6.