CSS `Anchor-position` (提案) 与 `WebXR` 锚点：AR/VR 空间中的 UI 定位 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，晚上好！我是今晚的讲座主持人，咱们今天聊点新鲜玩意儿，关于CSS anchor-position这个还在提案阶段的家伙，以及它和WebXR锚点之间的那些不得不说的故事。简单来说，就是如何在AR/VR的世界里，让你的UI元素乖乖听话，稳如泰山地待在你想要它们待的地方。

第一章：啥是CSS anchor-position？

先别急着晕，咱们先从CSS anchor-position说起。这玩意儿，简单来说，就是CSS试图解决的一个老生常谈的问题：元素之间的相对定位。你可能已经熟悉了position: absolute;和各种transform属性，但这些在复杂布局，特别是动态布局里，用起来简直是噩梦。anchor-position的目标就是简化这个过程，让元素可以“锚定”到另一个元素上，然后根据锚点的位置，自动调整自己的位置。

想象一下，你有一个对话框，你希望它永远出现在某个按钮的旁边，不管按钮跑到屏幕的哪个角落。用传统的CSS，你可能需要用JavaScript监听按钮的位置变化，然后动态地调整对话框的位置。anchor-position的出现，就是想让这一切变得简单。

anchor-position的基本语法：

#dialog {
  position: absolute; /* 或者 fixed，取决于你的需求 */
  anchor-name: --my-button; /* 给按钮起个名字 */
  anchor-position: top right; /* 对话框相对于按钮的哪个位置 */
  left: anchor(--my-button top); /* 对话框左边缘和按钮的顶部对齐 */
  top: anchor(--my-button right); /* 对话框顶部边缘和按钮的右侧对齐 */
}

#button {
  anchor-name: --my-button; /* 按钮的名字 */
}

解释一下：

anchor-name: 给你的锚点元素（比如这里的按钮）起个名字，方便后续引用。注意，这个名字要以--开头，表示这是一个自定义属性。
anchor-position: 定义锚点的位置。你可以使用 top, right, bottom, left, center 等关键词的组合，来指定锚点相对于锚点元素的位置。
anchor() 函数: 这是最关键的部分。它可以让你引用锚点元素的位置。例如，anchor(--my-button top) 表示获取名为 --my-button 的元素的顶部位置。

一个小例子：

假设我们有一个按钮和一个提示框，我们希望提示框始终出现在按钮的右上方。

<button id="myButton">点击我</button>
<div id="tooltip">这是一个提示框</div>

#myButton {
  position: relative; /* 确保锚点元素不是 static 的 */
  anchor-name: --button;
}

#tooltip {
  position: absolute;
  anchor-position: top left; /* 提示框相对于按钮的左上角 */
  left: anchor(--button right); /* 提示框的左边缘和按钮的右边缘对齐 */
  bottom: anchor(--button top); /*提示框的底部边缘和按钮的顶部边缘对齐*/
  background-color: lightyellow;
  border: 1px solid black;
  padding: 5px;
}

这个例子展示了 anchor-position 的基本用法。通过 anchor-name 和 anchor() 函数，我们可以轻松地将提示框定位到按钮的右上方，而无需编写任何 JavaScript 代码。

第二章：WebXR锚点是个啥玩意儿？

现在，让我们把目光转向WebXR。WebXR简单来说，就是让你的网页应用能够访问VR/AR设备的API，让你可以在浏览器里开发VR/AR应用。

在VR/AR的世界里，我们需要一种方法来将虚拟物体（比如我们的UI元素）固定到现实世界中的某个位置。这就是WebXR锚点的作用。

WebXR锚点允许你创建一个与现实世界中的某个特定位置关联的坐标系。这意味着，即使设备移动，锚点所代表的位置仍然保持不变。这对于创建稳定的、沉浸式的AR/VR体验至关重要。

WebXR锚点的基本流程：

请求锚点追踪权限： 首先，你需要请求用户授予你的应用访问锚点追踪的权限。
创建锚点： 使用 XRFrame.createAnchor() 方法在当前帧中创建一个锚点。你需要提供一个 XRRigidTransform 对象来指定锚点的位置和方向。
获取锚点的pose： 在每一帧中，使用 XRFrame.getPose() 方法获取锚点的当前姿态（位置和方向）。
将虚拟物体附加到锚点： 将你的虚拟物体的变换矩阵设置为锚点的姿态矩阵。这样，虚拟物体就会跟随锚点移动。

代码示例 (简化版)：

// 假设你已经有了 XR 相关的初始化代码

let xrSession;
let xrReferenceSpace;
let anchor;
let cube; // 你的虚拟物体 (Three.js, Babylon.js 等)

async function createXRAnchor(x, y, z) {
  const transform = new XRRigidTransform({x, y, z}); // 锚点的位置
  anchor = await xrSession.requestReferenceSpace('local').then(refSpace => {
        return xrSession.requestAnchor(transform, refSpace);
    });
  return anchor;
}

function onXRFrame(t, frame) {
  const pose = frame.getPose(anchor.anchorSpace, xrReferenceSpace);

  if (pose) {
    // 将锚点的姿态应用到你的虚拟物体上
    cube.position.set(pose.transform.position.x, pose.transform.position.y, pose.transform.position.z);
    cube.quaternion.set(pose.transform.orientation.x, pose.transform.orientation.y, pose.transform.orientation.z, pose.transform.orientation.w);
  }
}

这个例子展示了如何创建一个WebXR锚点，并在每一帧中更新虚拟物体的位置和方向，使其跟随锚点移动。

第三章：anchor-position + WebXR = 完美搭档？

现在，激动人心的时刻到了。我们可以将 anchor-position 和 WebXR 锚点结合起来，创造出更强大的AR/VR UI体验。

想象一下，你希望在AR场景中创建一个始终跟随某个特定物体移动的对话框。你可以使用WebXR锚点将一个虚拟物体固定到该物体上，然后使用 anchor-position 将对话框锚定到该虚拟物体上。

具体步骤：

创建WebXR锚点： 将一个虚拟物体（例如一个空的 Three.js Object3D）绑定到WebXR锚点。
将UI元素附加到虚拟物体： 将你的UI元素（例如一个HTML <div> 元素）作为虚拟物体的子元素添加到场景中。
使用anchor-position定位UI元素： 使用 anchor-position 将UI元素相对于虚拟物体进行定位。因为虚拟物体是WebXR锚点的子元素，所以UI元素会跟随锚点移动。

代码示例（伪代码）：

// 创建一个 Three.js Object3D 作为锚点
const anchorObject = new THREE.Object3D();
scene.add(anchorObject);

// 创建一个 WebXR 锚点并将其附加到 anchorObject
async function createAnchorAndAttach(x, y, z) {
  const anchor = await createXRAnchor(x, y, z); // 前面定义的 createXRAnchor 函数

  // 将 anchorObject 的位置与 WebXR 锚点同步
  function onXRFrame(t, frame) {
    const pose = frame.getPose(anchor.anchorSpace, xrReferenceSpace);
    if (pose) {
      anchorObject.position.set(pose.transform.position.x, pose.transform.position.y, pose.transform.position.z);
      anchorObject.quaternion.set(pose.transform.orientation.x, pose.transform.orientation.y, pose.transform.orientation.z, pose.transform.orientation.w);
    }
  }
  xrSession.requestAnimationFrame(onXRFrame);
}

// 创建一个 HTML 元素作为 UI
const uiElement = document.createElement('div');
uiElement.id = 'myUI';
document.body.appendChild(uiElement);

// 将 UI 元素添加到 anchorObject 中
const css3DObject = new CSS3DObject(uiElement); // 使用 CSS3DRenderer 将 HTML 元素渲染到 3D 场景中
anchorObject.add(css3DObject);

// CSS 样式
uiElement.style.position = 'absolute'; // 关键！
uiElement.style.anchorName = '--anchor-object';
uiElement.style.anchorPosition = 'top left';
uiElement.style.left = 'anchor(--anchor-object right)';
uiElement.style.bottom = 'anchor(--anchor-object top)';
uiElement.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
uiElement.style.padding = '10px';

anchorObject.name = '--anchor-object'; // 注意这里，直接给 Three.js 对象起名字

// 初始化 CSS3DRenderer
const cssRenderer = new CSS3DRenderer();
cssRenderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( cssRenderer.domElement );

// 渲染循环
function render() {
    requestAnimationFrame( render );
    cssRenderer.render( scene, camera );
}
render();

这个例子展示了如何将一个HTML元素作为UI，通过Three.js和CSS3DRenderer渲染到3D场景中，并使用 anchor-position 将其相对于一个Three.js对象进行定位，而这个Three.js对象又绑定到了WebXR锚点。

表格总结：

技术	作用	优势	缺点
WebXR锚点	将虚拟物体固定到现实世界中的某个位置。	保证虚拟物体在AR/VR场景中的稳定性。	需要设备支持WebXR，并且用户需要授予权限。
CSS `anchor-position`	定义元素之间的相对定位关系。	简化了复杂布局的实现，减少了对JavaScript的依赖。	还在提案阶段，浏览器支持有限。对于复杂的3D场景，可能需要结合其他技术才能实现更精细的控制。
WebXR锚点 + `anchor-position`	在AR/VR场景中创建稳定的、相对定位的UI元素。	结合了WebXR锚点的稳定性和 `anchor-position` 的灵活性，可以创建更强大的AR/VR UI体验。	需要同时掌握WebXR和CSS `anchor-position`，实现起来相对复杂。并且受到浏览器支持的限制。

第四章：注意事项和未来展望

兼容性： anchor-position 仍然是一个提案，浏览器支持有限。在使用之前，请务必检查浏览器的兼容性。
性能： 在复杂的AR/VR场景中，大量的UI元素可能会对性能产生影响。请注意优化你的UI，避免过度使用 anchor-position。
可访问性： 确保你的AR/VR UI具有良好的可访问性。为视力障碍者提供替代方案，例如语音提示。
未来： 随着WebXR和CSS的不断发展，我们可以期待更多强大的AR/VR UI工具的出现。例如，我们可以使用机器学习来自动识别现实世界中的物体，并将UI元素锚定到这些物体上。

总结陈词：

总而言之，CSS anchor-position 和 WebXR 锚点是构建强大AR/VR UI体验的两个关键技术。虽然它们目前还处于发展阶段，但它们代表了WebAR/VR开发的未来方向。通过结合这两项技术，我们可以创造出更稳定、更沉浸式、更易于使用的AR/VR应用。

好了，今天的讲座就到这里。希望大家有所收获，也欢迎大家在实践中探索更多可能性。咱们下期再见！

发表回复 取消回复

发表回复取消回复