开发者：Vision Pro 上的 WebXR 并不完美 | 多人游戏 | 跨平台 | 混合现实

随着苹果Lab的开放，全球各地的开发者陆续发布了关于Vision Pro的文章，近日，美国开发者Asad Memon在苹果位于库比蒂诺的Lab使用了一天设备后，分享了他的一些心得，全文如下：

我在 Vision Pro 设备上使用了一天并设置了 XCode 🎉

我们向苹果开发者实验室申请了在库比蒂诺使用 Vision Pro 的权限。幸运的是，我们第一天就被选中了！我们可能是最早接触 Vision Pro 的非苹果开发者之一。

我的主要目标是尝试一些代码演示，主要是探索 WebXR，使用Playroom Kit制作多人演示（https://docs.joinplayroom.com/）并尝试针对我们感兴趣的一系列人工智能用例对设备进行基准测试（例如在设备上运行Stable Diffusion的推理）。不幸的是，我不被允许谈论太多我的经历。但总体来说是积极的，我玩得很开心！

为跨平台 XR 革命做好准备

此前，主流的XR产品只有Oculus Quest，但当Vision Pro出现后，我们可能需要制作跨平台的XR堆栈来制作游戏，因为两个平台的技术堆栈完全不同。简言之，制作跨平台XR游戏的主要选项是使用Unity或WebXR。

我们喜欢 WebXR，因为无需安装，可以减少摩擦，特别是对于多人游戏。这也是我们 Playroom 押注网络优先多人游戏的原因。

Vision Pro 上的 WebXR

苹果的模拟器支持WebXR，但目前仅支持完全沉浸模式，不支持混合现实模式。WebXR 隐藏在 Vision Pro 上 Safari 中的功能标志后面。您需要从“设置”中启用它：

事实证明，在 Vision Pro 上使用 WebXR 和 Playroom Multiplayer SDK 开发快速多人游戏相当顺利！使用了 Three.js 和 Playroom 内置的Gamepad API（在新选项卡中打开）将游戏控制器连接到游戏。Vision Pro 不允许录制视频，这是我使用游戏控制器WebXR Viewer在 iPhone 上玩游戏的视频（https://docs.joinplayroom.com/images/blog/webxr1.mp4）。

代码概览

这是一个标准的 Three.js 游戏，启用了 xr：

import { XRButton } from 'three/addons/webxr/XRButton.js';

// ...

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );

renderer.setPixelRatio( window.devicePixelRatio );

renderer.setSize( window.innerWidth, window.innerHeight );

renderer.setAnimationLoop( render );

renderer.xr.enabled = true;

document.body.appendChild( renderer.domElement );

document.body.appendChild( XRButton.createButton( renderer ) );

添加了处理多人游戏和游戏手柄 API 的 Playroom SDK：

const { onPlayerJoin, insertCoin, isHost, myPlayer, Joystick, isStreamScreen } = Playroom;

let players = [];

// ... 

await insertCoin({streamMode: true, allowGamepads: true});

onPlayerJoin((state) => { 

// Create a plane for the player 

const plane = createPlane(scene, state.getProfile().color.hex); 

// Create a joystick for the player 

const joystick = new Joystick(state, {type: "dpad"}) 

players.push({state: state, plane, joystick });

});

现在可以使用游戏控制器玩游戏。它只需要读取游戏手柄状态并在主游戏循环中更新玩家的飞机位置：

function render() { renderer.render( scene, camera );

players.forEach((player) => { 

const playerState = player.state; 

const plane = player.plane; 

const dpad = player.joystick.dpad() || {};

if (dpad.x === "left"){ 

plane.mesh.rotation.y += 0.03; 

} 

if (dpad.x === "right"){ 

plane.mesh.rotation.y -= 0.03; 

} 

if (dpad.y === "up"){ 

plane.mesh.rotation.z -= 0.03; 

} 

if (dpad.y === "down"){ 

plane.mesh.rotation.z += 0.03;

} 

// Move the plane forward towards the direction it is facing

// ... });

}

不足

值得注意的是，Vision Pro 上的 WebXR 并不完美。它还不支持immersive-ar，这意味着还没有混合现实体验。我希望苹果能让immersive-ar尽快落地。

往期推荐