首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Spark AR中将屏幕边界转换为局部坐标?

在Spark AR中,可以通过以下步骤将屏幕边界转换为局部坐标:

  1. 获取屏幕边界的尺寸和位置信息:使用Device模块中的screen属性获取屏幕的宽度和高度,以及bounds属性获取屏幕边界的位置信息。
  2. 创建一个平面对象:使用Scene模块中的create方法创建一个平面对象。
  3. 设置平面对象的尺寸和位置:将平面对象的宽度和高度设置为屏幕的宽度和高度,将平面对象的位置设置为屏幕边界的中心位置。
  4. 将屏幕边界转换为局部坐标:使用Scene模块中的projectToScreen方法将屏幕边界的四个角点坐标转换为局部坐标系中的坐标。

以下是一个示例代码:

代码语言:txt
复制
const Scene = require('Scene');
const Device = require('Device');

(async function () {
  // 获取屏幕尺寸和边界信息
  const screen = Device.screen;
  const bounds = screen.bounds;

  // 创建平面对象
  const plane = await Scene.create('Plane');

  // 设置平面对象尺寸和位置
  plane.width = screen.width;
  plane.height = screen.height;
  plane.transform.x = bounds.x + bounds.width / 2;
  plane.transform.y = bounds.y + bounds.height / 2;

  // 将屏幕边界转换为局部坐标
  const topLeft = Scene.projectToScreen(plane, { x: bounds.x, y: bounds.y });
  const topRight = Scene.projectToScreen(plane, { x: bounds.x + bounds.width, y: bounds.y });
  const bottomLeft = Scene.projectToScreen(plane, { x: bounds.x, y: bounds.y + bounds.height });
  const bottomRight = Scene.projectToScreen(plane, { x: bounds.x + bounds.width, y: bounds.y + bounds.height });

  // 打印转换后的坐标
  console.log('Top Left:', topLeft);
  console.log('Top Right:', topRight);
  console.log('Bottom Left:', bottomLeft);
  console.log('Bottom Right:', bottomRight);
})();

这样,你就可以在Spark AR中将屏幕边界转换为局部坐标了。

请注意,以上代码仅为示例,具体实现可能需要根据你的项目需求进行调整。另外,腾讯云并没有与Spark AR直接相关的产品或服务,因此无法提供相关的产品介绍链接地址。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

OpenGL ES-3D图形变换知识

也就是说,每个顶点的x,y,z坐标都应该在-1.0到1.0之间,超出这个坐标范围的顶点都将不可见。我们通常会自己设定一个坐标的范围,之后再在顶点着色器中将这些坐标换为标准化设备坐标。...然后将这些标准化设备坐标传入光栅器(Rasterizer),再将他们转换为屏幕上的二维坐标或像素。...将坐标换为标准化设备坐标,接着再转化为屏幕坐标的过程通常是分步,也就是类似于流水线那样子,实现的,在流水线里面我们在将对象转换到屏幕空间之前会先将其转换到多个坐标系统(Coordinate System...裁剪空间 在一个顶点着色器运行的最后,OpenGL期望所有的坐标都能落在一个给定的范围内,且任何在这个范围之外的点都应该被裁剪掉(Clipped)。...在这一阶段之后,坐标经过转换的结果将会被映射到屏幕空间(就是我们的glViewport)且被转换成片段。 投影矩阵将观察坐标换为裁剪坐标的过程采用两种不同的方式,每种方式分别定义自己的平截头体。

95420

终端图像处理系列 - OpenGL ES 2.0 - 3D基础(矩阵投影)

线性代数 学习OpenGL三维投射知识之前,我们得事先了解下一些基础的线性代数知识,向量运算,矩阵运算。...通常情况下,我们会根据画布(屏幕)的大小设定一个坐标范围,在顶点着色器中将这些坐标换为标准化设备坐标。...对我们来讲,一般情况下需要用到5个不同的坐标系统: 局部空间(Local Space):物体起始坐标;如一个正方体a,原点是正方体的中心O1(0,0,0)。...物体的坐标局部坐标变换到是世界坐标由模型矩阵(Model Matrix)负责实现。 模型矩阵是一种变换矩阵,能对物体进行位移,缩放,旋转。...裁剪空间(Clip Space):顶点着色器运行到最后,OpenGL期望所有的坐标落在一个特定的范围内,且任何在这个范围之外的点会被裁剪掉。

2.4K110
  • Unity基础(10)-坐标系统

    Vector3(x,y,z) Unity中坐标系分类: word Space (世界坐标系) local Space (局部坐标系) Screen Space(屏幕坐标系) viewport (视口坐标...transform.LocalPosition可以获得该局部坐标 2-3 屏幕坐标屏幕坐标系:以像素为单位,左下角是(0,0),右上角为(screen.width, screen.height),Z...参数中的z坐标的作用就是:用来表示上述平面离摄像机的距离。X,Y表示像素坐标,根据(X,Y)相对于屏幕的位置,得到游戏世界中的点相对于截面P的位置,也就将屏幕坐标换为了世界坐标。...(SpLocalPos); // 从世界坐标局部坐标 Vector3 SpLocalPos1 = GameObject.Find("Cube").transform.InverseTransformPoint...参数中的z坐标的作用就是:用来表示上述平面离摄像机的距离。X,Y表示像素坐标,根据(X,Y)相对于屏幕的位置,得到游戏世界中的点相对于截面P的位置,也就将屏幕坐标换为了世界坐标

    4.9K20

    iOS ARKit教程:用裸露的手指在空中画画

    通过将这些数字以某种方式乘以3D顶点v1,在其局部空间中,它会生成一个新的3D顶点v2,它代表世界空间中的v1。...对象跟踪的工作原理如下:首先,我们为它们提供一个图像和一个正方形的坐标,用于我们想要跟踪的对象的图像边界。之后我们调用一些函数来初始化跟踪。...iOS ARKit Vision库检测到的要素点 我们将按照以下步骤初始化缩略图跟踪: 上面最棘手的部分是如何将点击位置从UIView坐标空间转换为图像坐标空间。...ARKit为我们提供了displayTransform从图像坐标空间转换到视口坐标空间的矩阵,但不是相反。那么我们怎么做反过来呢?通过使用矩阵的逆。...随着计算机视觉的进步,以及为小工具(深度相机)添加更多AR友好的硬件,我们可以访问我们周围越来越多的物体的3D结构。

    2.2K30

    NDK OpenGLES3.0 开发(八):坐标系统

    将一个物体(图像)渲染到屏幕上,通常经过将物体坐标换为标准化设备坐标,然后再将标准化设备坐标转化为屏幕坐标的过程。...该过程通常涉及多个坐标系统的变换,将所有顶点转换为片段之前,顶点需要处于不同的坐标系统进行计算,对我们来说比较重要的有 5 个坐标系统: 局部空间(Local Space,或者物体空间(Object...坐标系统 局部空间 局部空间 (Local Space) 是指对象所在的坐标空间,坐标原点由你自己指定,模型的所有顶点相对于你的对象来说都是局部的。...观察空间 观察空间(View Space)也被称为 OpenGL 相机空间,即从摄像机的角度观察到的空间,它将对象的世界空间的坐标换为观察者视野前面的坐标。...,且任何在这个范围之外的点都应该被裁剪掉。

    1.4K20

    头戴式ARVR 光学标定

    系统接收来自真实世界的恒定图像帧流,并将虚拟内容组合到这些图像帧中,VST-AR可以与标准视频监视器、手持设备(平板电脑或手机)以及不透明的VR头戴式显示器(也称为混合现实(MR)显示器)一起使用。...例如,给定眼睛坐标系xE中的3D点,该点被投影到HMD屏幕空间S中的2D点u_S 图1 轴外针孔相机模型的y-z平面。 图2:图像平面的三维表示,以及针孔相机模型的相关固有特性。...通过将该变换集成到相机模型EK中,我们得到3×4投影矩阵HEP,从显示器(HMD)坐标到用户眼睛坐标: 下图这些坐标系的一个图示(个人理解:就是说传统的针孔相机下的图像坐标系的中心为透过屏幕上光心的中点...,而AR设备中将图像坐标系分解成成像坐标系和显示坐标系,因为设备中的屏幕坐标系和成像坐标系不再是同一个坐标系了) 头盔显示器的坐标系通常由一个内向外看的相机或一个外向外看的跟踪系统来定义,该系统决定了一个虚拟人的姿态...这意味着SPAAM2将屏幕参数矩阵重新定义为EK0 EK。由于屏幕参数应该保持不变,这种解释是不正确的。

    1.8K20

    从弧到多线段:深入解析 Java 中的弧度多线段算法!

    本文将详细讲解如何在 Java 中将弧线转化为多线段,讨论其核心数学原理,并通过实际案例帮助理解这一概念的应用场景。我们不仅会从深度解析转换的步骤,还会从广度角度延伸讨论该方法在其他领域的应用。...通过将弧转换为多线段,我们可以:提高绘制性能:大多数图形库和硬件加速仅支持直线绘制,通过弧度多线段可以充分利用图形加速的优势。...方便几何计算:一些几何计算(碰撞检测、路径规划)更适合在线段而非弧线上进行操作。增强控制:通过线段我们可以精细控制渲染的精度和性能之间的平衡。核心原理解析:如何实现弧度多线段1....计算坐标:对于每个 theta 值,使用极坐标公式转换为笛卡尔坐标: 这两个公式利用角度 theta 计算对应的 X 和 Y 坐标。...总结:这段代码展示了如何在 Java Swing 中将弧线转换为一系列直线段进行绘制。主要步骤包括计算线段的角度间隔,迭代计算每个线段的端点坐标,并使用 Graphics2D 绘制这些线段。

    16022

    Unity2D游戏开发-坐标系与辅助线绘制

    局部/本地坐标 transform.localPosition 本地坐标系的特点是: 原点位于游戏对象的position属性指定的位置。...本地坐标系经常用于: 指定对象相对自身的偏移量,使用LocalPosition。 作为对象内部组件的相对坐标系,相机、碰撞体等组件。 用作计算对象本身的运算坐标系。 表示对象空间下的点、矢量等。...获取鼠标的位置是屏幕坐标 视口坐标系 视口坐标系和屏幕坐标系完全对等,不过范围是0-1。 GUI坐标系 和屏幕坐标系最大值一样,只不过y轴的方向相反,是从上到下。...别名 世界坐标(全局坐标、左手坐标、绝对坐标) 本地坐标局部坐标、自身坐标、物体坐标、相对坐标屏幕坐标(像素坐标) 视口坐标(视窗坐标) GUI坐标(UI坐标) 示例代码 private void...ScreenToWord ( Vector3 sPos, Camera mCamera, Vector3 pPos ) { //因为屏幕坐标没有z值,所以我们线获取世界屏幕时的

    81810

    OpenGLES讲解稿

    OpenGL不是简单地把所有的3D坐标换为屏幕上的2D像素;OpenGL仅当3D坐标在3个轴(即x、y和z)上都为-1.0到1.0的范围内时才处理它。...我们要画的物体通常自己有一个坐标的范围,如一个建筑,它本身的坐标可能是实际的长宽高,我们拿到它的长宽高,之后再在顶点着色器中将这些坐标换为标准化设备坐标。...然后将这些标准化设备坐标传入光栅器(Rasterizer),再将他们转换为屏幕上的二维坐标或像素展示出来。...将原始坐标换为标准化设备坐标,接着再转化为屏幕坐标的过程,这个过程涉及以下五个重要的坐标系统: 1.局部空间(Local Space,或者称为物体空间(Object Space)),即物体本身的坐标...在光栅化阶段,基本图元被转换为二维的片元(fragment),fragment 表示可以被渲染到屏幕上的像素,它包含位置,颜色,纹理坐标等信息,这些值是由图元的顶点信息进行插值计算得到的。

    1.1K20

    模型矩阵、视图矩阵、投影矩阵

    模型矩阵 模型矩阵将局部坐标系下的顶点坐标转化到世界坐标系下。此处就要涉及局部坐标系相对于世界坐标系的位置和方向,或者说空间中的点的位置发生变化时,坐标如何变化。...模型矩阵之所以称之为「模型矩阵」,是因为一个模型里所有的顶点往往共享同一个变换,抛在空中的一个木块,运转机器中的一个齿轮。...考虑一个物体绕任意的轴(而不是三个坐标轴)旋转,:绕着过顶点(x, y, z)的方向为(a, b, c)的轴,旋转角度θ。...相机空间的左、右、上、下边界是受限于屏幕的边缘,同时也设定前、后边界,因为你很难看清太近或太远的东西。相机空间就是上述的四棱锥台体。 主要的有两种投影方式,正射投影和透视投影。...前者用于精确制图,工业零件侧视图或建筑物顶视图,从屏幕上就可以量测平行于屏幕的线段长度;后者用于模拟视觉,远处的物体看上去较小。这里只讨论透视投影,正射投影是类似的。

    2.2K20

    js调用原生API--陀螺仪和加速器

    将欧拉角转换为旋转矩阵表示法 计算屏幕坐标系转化为我们的旋转矩阵 计算世界坐标系转化为我们的旋转矩阵(可选) 把它们组合起来计算出一个适应屏幕也适应世界的旋转矩阵表达法 要把设备绕X轴旋转β度,我们可以用下面的要素旋转矩阵...根据你的应用中来构建的坐标系,比如将整个坐标系翻转使其能指向屏幕背后方向。 例子中我们会再次变化旋转矩阵使其指向屏幕背后的方向以便能应用于在three.js虚拟空间达到VR或AR的效果。...要得出这个和虚拟空间适配的旋转坐标系(Rx),我们要把第二步中得出的适配屏幕方向的旋转矩阵(Rs)和上述绕X轴90度(转化到弧度制)的变形相乘: ? 因此我们构建出的世界方向矩阵如下: ?...基于上述实际考虑,我们可以通过下面3步来应用: 将航空次序欧拉角转换为一个单位四元数 将屏幕坐标系转换成四元数 将世界坐标系转换为四元数(可选) 把它们组合起来计算出一个适应屏幕也适应世界的四元数表示法...在这个例子里我们要再一次变换我们的四元数,是它能正指向屏幕的背后以便应用于three.js虚拟空间达到VR、AR的效果。

    4.7K161

    【Cesium】Cesium坐标转换

    角度弧度 π/180×角度 ; 弧度变角度 180/π×弧度。 2.2 坐标转换 Cesium其实是一个封装好的WebGL库,当然这里面就牵扯到好几套坐标问题:屏幕坐标、三维空间坐标、投影坐标。..., scene) //其中pt1为一个二维屏幕坐标。...2.2.5 经纬度坐标地理坐标(弧度) var cartographic = Cesium.Cartographic.fromDegree(point) //point是经纬度值 var coord_wgs84...转换到笛卡尔坐标系后就能运用计算机图形学中的仿射变换知识进行空间位置变换平移旋转缩放。...下面举个例子: 一个局部坐标为p1(x,y,z)的点,将它的局部坐标原点放置到loc(lng,lat,alt)上,局部坐标的z轴垂直于地表,局部坐标的y轴指向正北, 并围绕这个z轴旋转angle度

    2.9K40

    iOS ARKit教程:赤手在空中绘画

    通过将这些数字乘以一个3D顶点v1,在它的局部空间中,它会产生一个新的三维顶点,v2,将会在世界空间中代表v1。...到目前为止,我们正在绘制被探测的表面,假设虚拟笔位于屏幕的中心。现在,有趣的部分——可以检测用户的手指并使用它而不是屏幕中心。...对象跟踪的工作原理如下:首先,我们为图像边界中的一个正方形的图像和坐标提供我们要跟踪的对象。之后,我们调用一些函数来初始化跟踪。...VNDetectedObjectObservation(boundingBox: trackImageBoundingBoxInImage) } 上面最棘手的部分是如何将拍摄位置从UIView坐标空间转换为图像坐标空间...ARKit为我们提供了displayTransform从图像坐标空间转换为视口坐标空间的矩阵,但不是相反的。那么我们怎么能做逆?通过使用矩阵的倒数。

    1.8K10

    python中tkinter窗口位置坐标大小等实现示例

    正在尝试着做一个比较完善的画图软件,计划使用tkinter库中的canvas控件来做,然后正在攻关图形项位置、坐标、大小及其他属性项的保存和加载的问题,刚好需要用到坐标、位置的知识,因此作为这个画图软件的附带产出物...好的,言归正传,回归本篇博文的主题:python中tkinter窗口位置|坐标\大小等知识的科普。 大家都知道tkinter库中有很多控件和主窗口,因此这些控件和主窗口都有对应的屏幕坐标的信息。...其实:第一个是指窗口的宽度,第二个窗口的高度,第三个窗口左上点离左屏幕边界距离,第四个窗口左上点离上面屏幕边界距离。...root.iconbitmap(icon_file),icon_file就是一个.ico的图标文件,使用绝对或相对路径 设置窗口大小:root.geometry(“x_WIDTHxx_HEIGHT”),其中将..._WIDTH替换为窗口宽度,将_HEIGHT替换为窗口高度 设置窗口在屏幕上的位置: root.geometry(“+X+Y”),X/Y表示以屏幕左上角为顶点的窗口的坐标 (2)常用的事件处理函数: 刷新窗口状态

    2.5K60

    UIKit Dynamics:开始入门 —《Graphics & Animation系列一》

    设置边界 为了保持方块在屏幕边界内,需要定义一个边界。 添加另一个属性在 ViewController.swift var collision: UICollisionBehavior!...上述代码不是明确添加边界坐标,而是将translatesReferenceBoundsIntoBoundary属性设置为true。...这会导致边界使用提供给UIDynamicAnimator的参考视图的边界。 运行时可以看到正方形与屏幕底部碰撞,稍微反弹,然后停止,如下所示: ?...方块现在从边界反弹,旋转一点,然后继续往屏幕底部前进的地方休息。 到目前为止,UIKit Dynamics的功能已经变得相当清晰:只需几行代码就可以完成很多工作。...在下一步中,将了解如何在物品碰撞时接收通知。

    1.9K30

    OpenGL学习笔记 (三)- 坐标系与顶点变换

    文章目录[隐藏] 坐标局部空间 世界空间 观察空间 裁剪空间 标准化设备坐标 屏幕空间 预备知识 齐次坐标系 矩阵合成的顺序 顶点变换 模型矩阵 视图矩阵 投影矩阵 透视投影 Z-Fighting...顶点变换的步骤(修改自Reference) 我们先来了解变换中出现的各个坐标系,之后再来了解处理过程中的各个矩阵和步骤。 局部空间 局部空间是我们传入的顶点坐标所在的空间。...标准化设备坐标 标准化设备坐标是真正绘制在屏幕内顶点的坐标,其x、y、z的取值范围都必须在 [-1,1] 之内。以屏幕的正中心为 ;屏幕方向看为xOy直角坐标系;z为深度,由屏幕外向内递增。...模型矩阵 模型矩阵复杂把局部空间的顶点变换为世界空间的顶点,可以理解为把一个“模型”摆到它在世界中的位置,因此模型矩阵并没有什么固定的要求。...另外,需要注意的是平移操作通常会影响后续的旋转和缩放操作,因此推荐把平移操作留至最后进行: 视图矩阵 视图矩阵就是将世界空间变换为观察空间的矩阵,经过变换之后,物体的坐标将会变换为摄像机观察的坐标

    3.8K21

    unity3d:Shader知识点,矩阵,函数,坐标转换,Tags,半透明,阴影,深度,亮度,优化

    它由以下三个矩阵的乘积组成: Model Matrix(模型矩阵):将三维模型从其局部坐标系变换到世界坐标系中的位置、旋转和缩放。...总而言之,Unity_WorldToObject 可以帮助你在片段着色器中将世界坐标换为物体本地坐标,为你提供了更多的灵活性和控制权来执行特定的计算或操作。...通过使用"UnpackNormal"函数,你可以在着色器中将纹理采样的结果转换为法线向量,然后再进行后续的计算和操作。...在着色器中,我们可以使用这个旋转矩阵来将法线从切线空间转换到世界空间或屏幕空间,以便进行光照计算和渲染。 切线空间是一种以顶点切线、法线和切线叉积向量为基础的局部坐标系,常用于处理带有法线贴图的模型。...用于坐标从模型空间转世界空间 V代表观察矩阵。用于世界空间观察空间 P代表投影矩阵。

    32310

    OpenGL与OpenGL在移动端的应用

    OpenGL不是简单地把所有的3D坐标换为屏幕上的2D像素;OpenGL仅当3D坐标在3个轴(x、y和z)上都为-1.0到1.0的范围内时才处理它。...这就是标准化设备坐标,只有在这个范围内的坐标才会最终呈现在屏幕上(在这个范围以外的坐标都不会显示)。 我们通常会自己设定一个坐标的范围,之后再在顶点着色器中将这些坐标换为标准化设备坐标。...然后将这些标准化设备坐标传入光栅器(Rasterizer),再将他们转换为屏幕上的二维坐标或像素。...将坐标换为标准化设备坐标,接着再转化为屏幕坐标的过程,这个过程涉及以下五个重要的坐标系统: 局部空间(Local Space,或者称为物体空间(Object Space)) 世界空间(World...在光栅化阶段,基本图元被转换为二维的片元(fragment),fragment 表示可以被渲染到屏幕上的像素,它包含位置,颜色,纹理坐标等信息,这些值是由图元的顶点信息进行插值计算得到的。

    2.7K30

    研学社•架构组 | CoCoA:大规模机器学习的分布式优化通用框架

    每个子问题都使用当前最佳的现成单台机器求解器解决,然后在单一一步 REDUCE 步骤中将来自每次迭代的局部更新组合起来(REDUCE 这个术语借用自 MAP-REDUCE)。...CoCoA 框架 要在数据分布在 K 台机器上时最小化目标 OA,我们需要将计算分配给 K 个局部子样本并在每次全局迭代过程中将 K 个局部更新组合起来。...但是,和传统的近似方法不同,CoCoA 并不需要完美的局部解。相反,它容许局部次优性(定义为与最优的期望绝对偏差),并且会将其整合进自己的收敛边界中,下面就可以看到。...在原始的设置中,我们应用 CoCoA 在上述每个数据集上拟合 lasso 模型,其中使用了随机坐标下降作为局部求解器,而总迭代次数 H 调节了局部解的质量 Θ。...为了理解 CoCoA 的原始-对偶互换性,我们让其两种变体都拟合了弹性网络回归模型,并使用了坐标下降作为局部求解器。 ?

    1.1K61

    深入浅出 ARCore

    ARCore会查找常见水平表面(桌面)上的特征点集群,除此之外,ARCore还可以确定每个平面的边界,并将以上信息提供给您的应用程序。...用户交互 ARCore使用 hit testing(命中测试) 获取与手机屏幕相对应的(x,y)坐标通过点击屏幕等交互方式),将其投射到 Camera 的3D坐标系中,并返回与命中点射线相交的所有平面和特征点...Pose com.google.ar.core.Pose类, 姿势表示从一个坐标空间到另一个坐标空间位置不变的转换。...在所有的ARCore API里,姿势总是描述从对象本地坐标空间到世界坐标空间的转换。 随着ARCore对环境的了解不断变化,它将调整坐标系模式以便与真实世界保持一致。...上面的代码中首先创建了一个背景线程,用来将从Camera中获取的视频渲染到屏幕上当背景。数据是从哪里来的呢?

    3.8K10
    领券