System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() WebGL渲染引擎的碰撞检测方法、装置及电子设备制造方法及图纸_技高网

WebGL渲染引擎的碰撞检测方法、装置及电子设备制造方法及图纸

技术编号:41195096 阅读:3 留言:0更新日期:2024-05-07 22:24
本公开提供了一种WebGL渲染引擎的碰撞检测方法、装置及电子设备,其中方法包括:在WebGL渲染引擎中,接收用户在画布的视窗中输入的点;将视窗中的点扩展为预设大小的矩形,其中,矩形的大小恒定;将视窗中的矩形变换为元素图层中的第一多边形,其中,元素图层为WebGL渲染引擎采用的画布图层架构中的图层;将画布中的元素作为第二多边形,采用多边形相交算法对第一多边形和第二多边形进行碰撞检测,实现监听画布中元素的碰撞检测事件。本公开通过将点扩展为恒定大小的矩形,可以使用恒定的碰撞范围与画布中的元素进行碰撞检测,使得元素的交互更加顺畅;通过多边形相交算法进行碰撞检测,可以实现监听画布中元素的碰撞检测事件。

【技术实现步骤摘要】

本公开涉及碰撞检测,具体涉及一种webgl渲染引擎的碰撞检测方法、装置及电子设备。


技术介绍

1、webgl渲染引擎在浏览器中是一个文档对象模型(document object model,简称为dom)元素,相关技术中,每个dom元素只能够监听自身的点击事件,在webgl渲染引擎中无法直接监听画布内元素的交互事件,导致webgl渲染引擎无法监听碰撞检测事件。

2、针对相关技术中webgl渲染引擎无法监听碰撞检测事件的问题,目前尚未提出有效的技术解决方案。


技术实现思路

1、本公开的主要目的在于提供一种webgl渲染引擎的碰撞检测方法、装置及电子设备,以解决相关技术中webgl渲染引擎无法监听碰撞检测事件的问题。

2、为了实现上述目的,本公开的第一方面提供了一种webgl渲染引擎的碰撞检测方法,包括:

3、在webgl渲染引擎中,接收用户在画布的视窗中输入的点;

4、将视窗中的点扩展为预设大小的矩形,其中,矩形的大小恒定;

5、将视窗中的矩形变换为元素图层中的第一多边形,其中,元素图层为webgl渲染引擎采用的画布图层架构中的图层;以及

6、将画布中的元素作为第二多边形,采用多边形相交算法对第一多边形和第二多边形进行碰撞检测,实现监听画布中元素的碰撞检测事件。

7、可选地,webgl渲染引擎采用的画布图层架构包括多级图层,多级图层按照层级从高到低包括根图层、页面图层和元素图层;

8、多级图层还包括画板图层,画板图层和元素图层采用多种方式嵌套;

9、在将视窗中的矩形变换为元素图层中的第一多边形之前,方法还包括:

10、对画布图层架构中的图层进行级联变换,得到视窗投影变换矩阵。

11、进一步地,根图层为页面图层的父图层,根图层和页面图层均为元素图层的祖先图层;

12、对画布图层架构中的图层进行级联变换,得到视窗投影变换矩阵,包括:

13、将画布图层架构中元素图层和元素图层的所有祖先图层级联相乘,得到元素图层的视窗投影变换矩阵。

14、进一步地,将画布图层架构中元素图层和元素图层的所有祖先图层级联相乘,得到元素图层的视窗投影变换矩阵,包括:

15、令根图层变换矩阵为t0,元素图层变换矩阵为tn,元素图层的父图层变换矩阵为tn-1,按照下述公式确定元素图层的视窗投影变换矩阵t:

16、

17、其中,i表示第i个图层,i=0时表示根图层,i=n时表示元素图层,ti表示第i个图层变换矩阵。

18、进一步地,将视窗中的矩形变换为元素图层中的第一多边形,包括:

19、按照下述公式将视窗中的矩形p′变换为元素图层中的第一多边形p:

20、p=t-1p′

21、其中,t-1为视窗投影变换矩阵的逆矩阵。

22、可选地,采用多边形相交算法对第一多边形和第二多边形进行碰撞检测,包括:

23、采用分离轴定理算法对第一多边形和第二多边形进行相交检测;

24、遍历第一多边形和第二多边形的所有边,将第一多边形和第二多边形投影至与边垂直的分离轴,其中,分离轴与第一多边形和第二多边形的边对应;

25、判断第一多边形和第二多边形在各个分离轴上的投影是否重叠;

26、如果第一多边形和第二多边形在各个分离轴上的投影均重叠,则第一多边形和第二多边形相交,检测出用户输入的点与画布中的元素碰撞;

27、如果存在分离轴使得第一多边形和第二多边形的投影不重叠,则第一多边形和第二多边形不相交,检测出用户输入的点与画布中的元素不碰撞。

28、进一步地,在实现监听画布中元素的碰撞检测事件之后,方法还包括:

29、如果检测出用户输入的点与画布中的元素碰撞,则响应画布中元素的碰撞检测事件。

30、本公开的第二方面提供了一种webgl渲染引擎的碰撞检测装置,包括:

31、接收单元,用于在webgl渲染引擎中,接收用户在画布的视窗中输入的点;

32、扩展单元,用于将视窗中的点扩展为预设大小的矩形,其中,矩形的大小恒定;

33、变换单元,用于将视窗中的矩形变换为元素图层中的第一多边形,其中,元素图层为webgl渲染引擎采用的画布图层架构中的图层;以及

34、检测单元,用于将画布中的元素作为第二多边形,采用多边形相交算法对第一多边形和第二多边形进行碰撞检测,实现监听画布中元素的碰撞检测事件。

35、本公开的第三方面提供了一种计算机可读存储介质,计算机可读存储介质存储有计算机指令,计算机指令用于使计算机执行第一方面任意一项提供的webgl渲染引擎的碰撞检测方法。

36、本公开的第四方面提供了一种电子设备,电子设备包括:至少一个处理器;以及与至少一个处理器通信连接的存储器;其中,存储器存储有可被至少一个处理器执行的计算机程序,计算机程序被至少一个处理器执行,以使至少一个处理器执行第一方面任意一项提供的webgl渲染引擎的碰撞检测方法。

37、在本公开实施例提供的webgl渲染引擎的碰撞检测方法中,在webgl渲染引擎中接收用户在画布的视窗中输入的点;将视窗中的点扩展为预设大小的矩形,其中,矩形的大小恒定;通过将点扩展为恒定大小的矩形,可以使用恒定的碰撞范围与画布中的元素进行碰撞检测,使得元素的交互更加顺畅,解决了较小的线条或图形难以选中的问题;

38、将视窗中的矩形变换为元素图层中的第一多边形,其中,元素图层为webgl渲染引擎采用的画布图层架构中的图层;通过将视窗中的矩形变换为元素图层中的第一多边形,只需要变换矩形,不需要变换整个元素图层,提高了计算效率;

39、将画布中的元素作为第二多边形,采用多边形相交算法对第一多边形和第二多边形进行碰撞检测,实现监听画布中元素的碰撞检测事件。通过多边形相交算法进行碰撞检测,可以实现监听画布中元素的碰撞检测事件,解决了相关技术中webgl渲染引擎无法监听碰撞检测事件的问题。

本文档来自技高网...

【技术保护点】

1.一种WebGL渲染引擎的碰撞检测方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,所述WebGL渲染引擎采用的画布图层架构包括多级图层,所述多级图层按照层级从高到低包括根图层、页面图层和元素图层;

3.根据权利要求2所述的方法,其特征在于,所述根图层为所述页面图层的父图层,所述根图层和页面图层均为元素图层的祖先图层;

4.根据权利要求3所述的方法,其特征在于,所述将所述画布图层架构中所述元素图层和所述元素图层的所有祖先图层级联相乘,得到所述元素图层的视窗投影变换矩阵,包括:

5.根据权利要求4所述的方法,其特征在于,所述将所述视窗中的矩形变换为元素图层中的第一多边形,包括:

6.根据权利要求1所述的方法,其特征在于,所述采用多边形相交算法对所述第一多边形和第二多边形进行碰撞检测,包括:

7.根据权利要求6所述的方法,其特征在于,在实现监听画布中元素的碰撞检测事件之后,所述方法还包括:

8.一种WebGL渲染引擎的碰撞检测装置,其特征在于,包括:

9.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有计算机指令,所述计算机指令用于使计算机执行权利要求1至7任意一项所述的WebGL渲染引擎的碰撞检测方法。

10.一种电子设备,其特征在于,所述电子设备包括:至少一个处理器;以及与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述至少一个处理器执行的计算机程序,所述计算机程序被所述至少一个处理器执行,以使所述至少一个处理器执行权利要求1至7任意一项所述的WebGL渲染引擎的碰撞检测方法。

...

【技术特征摘要】

1.一种webgl渲染引擎的碰撞检测方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,所述webgl渲染引擎采用的画布图层架构包括多级图层,所述多级图层按照层级从高到低包括根图层、页面图层和元素图层;

3.根据权利要求2所述的方法,其特征在于,所述根图层为所述页面图层的父图层,所述根图层和页面图层均为元素图层的祖先图层;

4.根据权利要求3所述的方法,其特征在于,所述将所述画布图层架构中所述元素图层和所述元素图层的所有祖先图层级联相乘,得到所述元素图层的视窗投影变换矩阵,包括:

5.根据权利要求4所述的方法,其特征在于,所述将所述视窗中的矩形变换为元素图层中的第一多边形,包括:

6.根据权利要求1所述的方法,其特征在于,所述采用多边形相交算法对...

【专利技术属性】
技术研发人员:董旭林炳河
申请(专利权)人:厦门稿定股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1