1、渚薰在AR空间中开发程序是中什么样的体验个介绍 热衷Web3D/AR/VR技术 996乐队 机党 咖啡爱好者 次元/游戏宅男 之前担任阿淘宝互动娱乐前端TL演讲的内容 什么是AR空间 在AR空间中开发程序 对未来WebAR 技术的展望Part 1-什么是AR空间AR空间的概念-空间由度（Degree of Freedom）旋转（度）平移（位置）AR空间的概念-不同由度下的体验0 Dof3 Dof6 DofAR空间的概念-跟踪（Tracking）图像2d跟踪设备跟踪AR空间的概念-跟踪（Tracking）对象3d跟踪部/身体跟踪AR空间的概念-检测（Detection）平检测点云检测AR空间的概

2、念-输事件势射线开发AR有哪种案Unity/Unreal XR功能强，持多种设备MetaQuestMagic LeapHoloLensPicoRokidPico WebApp功能有差异，持设备少MetaQuest Oculus BrowserUnity/Unreal XR我找到了种有趣的案JSAR种 的解决案可嵌空间前可持在Rokid AR中开发空间程序什么是可嵌空间在世界空间中存在独运空间在空间内，存在可以交互的物体多个空间可以同时存在什么是空间程序种近似程序的技术架构能够在AR应中独且安全的运JSAR的技术构成Embedded NodeJS RuntimeBabylon JSWeb Sta

3、ndard APIJSAR Dom SpecDOM ImplementationUnity RuntimeJSAR PrefabEntity ContextEntity ContextEntity ContextJS Runtime ContextRendererTransmute ProtocolJSAR的技术特性 持 空间沙箱（运安全）持Web-standard APIs 持 TypeScript 持 Babylon.js 开发场景 持 VSCode插件调试和预览 持 Unity中嵌式运https:/lify.app/manual/latest/basic-concepts/space-w

4、idgetPart 2-JSAR开发空间程序JSAR进开发-档和标签创建AR空间的“档”，引3D模型，并使它JSAR进开发-样式和动画给模型些样式和动画JSAR进开发-技术要点1.引模型，mesh标签使模型2.style定义模型的位置、缩放等“样式”3.keyframes定义模型的transform动画JSAR进开发-DOM Spechttps:/lify.app/manual/latest/basic-concepts/intro-xsmlhttps:/lify.app/manual/latest/basic-concepts/intro-scssJSAR进开发-户界（GUI）熟悉的HTML

5、/CSS创建户界JSAR进开发-对GUI进操作“熟悉”的DOM API监听标事件JSAR进开发-让模型播放动作Babylon引擎，播放场景内的动画JSAR进开发-技术要点1.相较于document，换成了spatialDocument2.GUI沿了shadowRoot的概念，并持部分DOM API3.使Babylon引擎对场景进操作，如播放动画JSAR进开发-JS Runtime Contexthttps:/lify.app/manual/latest/runtime动画格材质资源事件assertbufferes modulefetchTimerBlobCanvasNavigatorAudio

6、scenegetNodegetMatposeeventtracking预览和调试这样的开发体验适合前端吗？并不完全是，因为仍然有不学习成本，例如3D引擎前端来开发AR应的问题仍然在于“转型”成本那未来WebAR技术，可否“抛弃”3D引擎，回归最初的样？Part 3-对未来WebAR技术的展望我选择JSAR的理由-No.1套接近于Web开发习惯的DSL我选择JSAR的理由-No.2可以轻松简单在空间中混合展示 3D物体、2D图混排，以及动画那么假如原持混合的3D和2D标签原持3D元素的DOM API原持3D Style为什么我觉得这2个理由很重要开发AR应不等于开发3D游戏，需要关注的仍然是样式

7、、动画和排版What if-3D元素（标签）What if-3D样式和动画What if-GUI是个Shadow DOMWhat if-熟悉的DOM APIWhat if-识别势以上这些都较容易程段实现，但。如何设计空间内的混合排版？先需要定义2D元素在空间下的包围盒即使是2D元素，也应该拥有Z轴的体积Padding/Border/Margin-Left/Right/DepthmarginborderpaddingcontentBounding BoxBounding VolumeWhat if-排版1：纵深层叠？增加新flex向:depthdepthhorizontalverticalWha

8、t if-排版2：曲？类似平flex布局，但以曲的式呈现1800R1800RWhat if-排版3：半球？类似平的grid布局，但以半球穹顶的式呈现grid-columngrid-rowWhat if-定位：轨道就像绕地球轨道那样，元素布局在条围绕焦点的轨道（椭圆）上radiusangle设计这些标签/样式/排版/API的的我期待未来能和现在开发Web应样开发AR应HTML5已经15岁HTML5=3+2=3D+2D优秀的2D内容排版能 性能的2D和3D画布HTML5已经15岁，HTML6还会有吗？HTML5=3+2=3D+2D优秀的2D内容排版能 性能的2D和3D画布HTML6=3 x 2=3D x 2D优秀的2D/3D内容混合排版能 性能的2D/3D混合渲染画布HTML6到来之前，JSAR会是个不错的选择由Rokid的Yorkie负责整个技术案的持续建设已持Rokid AR，计划将持更多的XR设备JSAR已经迈出了第步，且朝着理想的标前JSAR-DOM现已开源，我也将加其中起探讨和实现案https:/