CN106990961B - 一种WebGL图形渲染引擎的建立方法 - Google Patents

一种WebGL图形渲染引擎的建立方法 Download PDF

Info

Publication number
CN106990961B
CN106990961B CN201710193776.3A CN201710193776A CN106990961B CN 106990961 B CN106990961 B CN 106990961B CN 201710193776 A CN201710193776 A CN 201710193776A CN 106990961 B CN106990961 B CN 106990961B
Authority
CN
China
Prior art keywords
module
rendering engine
webgl
packaging
calculation
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201710193776.3A
Other languages
English (en)
Other versions
CN106990961A (zh
Inventor
高鹏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Yitong Yuanjian Beijing Technology Co ltd
Original Assignee
Beijing Aerospace Lianzhi Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Aerospace Lianzhi Technology Co ltd filed Critical Beijing Aerospace Lianzhi Technology Co ltd
Priority to CN201710193776.3A priority Critical patent/CN106990961B/zh
Publication of CN106990961A publication Critical patent/CN106990961A/zh
Application granted granted Critical
Publication of CN106990961B publication Critical patent/CN106990961B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/003D [Three Dimensional] image rendering
    • G06T15/005General purpose rendering architectures

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Graphics (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明提出了一种WebGL图形渲染引擎的建立方法,包括如下步骤:步骤S1,基于WebGL标准,建立EVM图形渲染引擎的底层接口模块;步骤S2,对所述底层接口模块进行分类整理和再封装,形成多个功能模块;步骤S3,根据建立的多个功能模块,对预设的常见业务进行封装整合,提供标准API接口,供业务层使用。本发明提供的EVM图形渲染引擎,使用方便、层次清晰、接口明确、文档方便可查,方便广大开发者进行二次开发和功能定制。

Description

一种WebGL图形渲染引擎的建立方法
技术领域
本发明涉及图形处理技术领域,特别涉及一种WebGL图形渲染引擎的建立方法。
背景技术
WebGL(Web Graphics Library)是一种3D绘图标准,这种绘图技术标准把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,可以为HTML5Canvas提供硬件3D加速渲染,提供了基于浏览器的无插件三维渲染跨平台方案,可被用于创建具有复杂3D结构的网站页面。
WebGL接口较底层,需要熟悉计算机图形学相关知识体系才能从事相关开发,使用难度非常高,并且直接使用WEBGL开发三维功能周期较长。WebGL标准推出并得到大多数浏览器支持的时间较短,目前国内市场基于WebGL的商业三维引擎封装度非常低,无法满足前端开发人员开发三维功能的需求。
发明内容
本发明的目的旨在至少解决所述技术缺陷之一。
为此,本发明的目的在于提出一种WebGL图形渲染引擎的建立方法。
为了实现上述目的,本发明的实施例提供一种WebGL图形渲染引擎的建立方法,包括如下步骤:
步骤S1,基于WebGL标准,建立EVM图形渲染引擎的底层接口模块,包括:
封装引擎循环框架,包括事件更新和图像帧更新;
封装图形数学库模块,包括向量及计算、欧拉角及计算、四元数及计算、欧拉角转四元数、四元数转欧拉角、射线拾取计算、模型包围盒计算、颜色计算和插值计算;
封装基本物体属性模块,包括三角面、线段的核心几何体封装,以支持正方向、球体、导入的自定义模型;
步骤S2,对所述底层接口模块进行分类整理和再封装,形成多个功能模块,其中,所述多个功能模块包括:相机模块、相机控制模块、灯光模块、图片精灵模块、材质模块、物理模块、粒子发射器模块、模型数据加载模块、辅助物体模块、事件绑定模块和消息传递模块;
步骤S3,根据建立的多个功能模块,对预设的常见业务进行封装整合,建立EVM图形渲染引擎,提供标准API接口,供业务层使用。
进一步,在所述步骤S1中,基于WebGL标准,对WebGL接口进行封装。
进一步,所述多个功能模块包括:着色器、灯光控制模块、相机控制模块、场景控制模块、物理模块、粒子模块、事件绑定模块和消息传递模块。
进一步,在所述步骤S3中,预设的常见业务包括:流程制定业务、物体制定业务和报表图表业务。
进一步,所述步骤S2进一步包括如下步骤:
封装相机模块,包括透视相机、正交相机、渲染到CUBE纹理相机;
封装相机控制模块,包括飞行控制和注视旋转控制;
封装灯光模块,包括环境光源、点光源、方向光源、聚光灯、穹型光源等,并实现灯光的阴影计算;
封装图片精灵模块,实现图片精灵的相关特性;
封装材质模块,包括点材质、线材质、基础材质、标准材质、深度材质、法线材质、Phong材质、兰伯特材质、自定义Shader材质,封装透明、半透明渲染设置;
封装物理模块,实现模型碰撞检测等效果;
封装粒子发射器模块、实现三维粒子特效功能;
封装模型数据加载模块,包括obj格式、Collada格式;
封装辅助物体模块,包括位置、包围盒、坐标轴、法线等辅助物体方便功能开发调试;
封装事件绑定模块和消息传递模块,实现模块间交互机制。
进一步,所述步骤S3进一步包括如下步骤:
建立EVM图形渲染引擎,所述EVM图形渲染引擎提供三维场景初始化、模型加载、灯光创建及设置、材质创建及设置,以实现快速搭建web无插件三维实时渲染方案,以及提供Client/Server架构三维引擎的所有标准接口。
本发明提供的EVM-图形渲染引擎基于WebGL标准进行开发,对底层图形硬件接口进行完整封装,生成一套完整的WebGL图形渲染引擎,比直接使用WEBGL开发降低了开发门槛,前端开发工程师通过培训能快速的使用EVM-图形渲染引擎API进行页面三维功能的开发。并且,EVM-图形渲染引擎还面向GIS显示,事件绑定,效果展现等功能进行业务层面封装,对外提供标准API,供业务层使用。
根据本发明实施例的WebGL图形渲染引擎的建立方法,具有以下有益效果:
(1)EVM-图形渲染引擎基于WebGL原生接口进行开发,在渲染效率和性能上和同类产品相比有显著提高。
(2)EVM-图形渲染引擎封装了底层渲染硬件接口,区分基础功能模块,提供丰富API。
(3)EVM-图形库封装了业务层接口,同时提供详尽功能文档,即使没有丰富底层硬件知识也可以做上层业务逻辑开发。EVM-图形渲染引擎使用方便,层次清晰,接口明确,文档方便可查,方便广大开发者进行二次开发和功能定制。
本发明附加的方面和优点将在下面的描述中部分给出,部分将从下面的描述中变得明显,或通过本发明的实践了解到。
附图说明
本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解,其中:
图1为根据本发明实施例的WebGL图形渲染引擎的建立方法的流程图;
图2为根据本发明实施例的WebGL图形渲染引擎的建立方法的示意图。
具体实施方式
下面详细描述本发明的实施例,所述实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的,旨在用于解释本发明,而不能理解为对本发明的限制。
本发明实施了提供一种WebGL图形渲染引擎的建立方法,该引擎可以提供API封装接口使用。
如图1所示,本发明实施例的WebGL图形渲染引擎的建立方法,包括如下步骤:
步骤S1,基于WebGL标准,建立EVM图形渲染的底层接口模块。
在本步骤中,基于WebGL标准,对WebGL接口进行封装,形成EVM图形渲染引擎的底层接口模块。具体接口封装见API文档及代码清单。
具体地,封装引擎循环框架,包括事件更新和图像帧更新等。封装图形数学库模块,包括向量及计算、欧拉角及计算、四元数及计算、欧拉角转四元数、四元数转欧拉角、射线拾取计算、模型包围盒计算、颜色计算、多种方式的插值计算等。封装基本物体属性模块,包括三角面、线段等核心几何体封装,以支持正方向、球体、导入的自定义模型等。
步骤S2,对底层接口模块进行分类整理和再封装,形成多个功能模块。
在本发明的一个实施例中,参考图2,多个功能模块包括:着色器、灯光控制模块、相机控制模块、场景控制模块、物理模块、粒子模块、事件绑定模块和消息传递模块等。使EVM图形渲染引擎完整可用,功能模块清晰友好。
具体地,封装相机模块,包括透视相机、正交相机、渲染到CUBE纹理相机。封装相机控制模块,包括飞行控制和注视旋转控制等。封装灯光模块,包括环境光源、点光源、方向光源、聚光灯、穹型光源等,并实现灯光的阴影计算。封装图片精灵模块,实现图片精灵的相关特性。封装材质模块,包括点材质、线材质、基础材质、标准材质、深度材质、法线材质、Phong材质、兰伯特材质、自定义Shader材质,封装透明、半透明渲染设置等。
封装物理模块,实现模型碰撞检测等效果。封装粒子发射器模块、实现三维粒子特效功能。封装模型数据加载模块,包括obj格式、Collada格式等。封装辅助物体模块,包括位置、包围盒、坐标轴、法线等辅助物体方便功能开发调试。封装事件绑定模块和消息传递模块,实现模块间交互机制。
步骤S3,根据建立的多个功能模块,对预设的常见业务进行封装整合,建立EVM图形渲染引擎,提供标准API接口,供业务层使用。
其中,预设的常见业务包括:流程制定业务、物体制定业务和报表图表业务。详见API接口文档。
EVM图形渲染引擎提供详细的API接口和丰富的手册和文档,降低开发人员学习和二次开发的技术成本。
具体地,EVM图形渲染引擎提供了三维场景初始化、模型加载、灯光创建及设置、材质创建及设置等功能模块,实现了快速搭建web无插件三维实时渲染方案。EVM图形渲染引擎具有丰富方便的接口,提供了传统Client/Server架构三维引擎的所有标准接口,并且使用高效的图形算法,让开发人员在开发三维功能开发时,不需要额外担心图形渲染的性能问题。
本发明提供的EVM-图形渲染引擎基于WebGL标准进行开发,对底层图形硬件接口进行完整封装,生成一套完整的WebGL图形渲染引擎,比直接使用WEBGL开发降低了开发门槛,前端开发工程师通过培训能快速的使用EVM-图形渲染引擎API进行页面三维功能的开发。并且,EVM-图形渲染引擎还面向GIS显示,事件绑定,效果展现等功能进行业务层面封装,对外提供标准API,供业务层使用。
根据本发明实施例的WebGL图形渲染引擎的建立方法,具有以下有益效果:
(1)EVM-图形渲染引擎基于WebGL原生接口进行开发,在渲染效率和性能上和同类产品相比有显著提高。
(2)EVM-图形渲染引擎封装了底层渲染硬件接口,区分基础功能模块,提供丰富API。
(3)EVM-图形库封装了业务层接口,同时提供详尽功能文档,即使没有丰富底层硬件知识也可以做上层业务逻辑开发。EVM-图形渲染引擎使用方便,层次清晰,接口明确,文档方便可查,方便广大开发者进行二次开发和功能定制。
在本说明书的描述中,参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不一定指的是相同的实施例或示例。而且,描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
尽管上面已经示出和描述了本发明的实施例,可以理解的是,上述实施例是示例性的,不能理解为对本发明的限制,本领域的普通技术人员在不脱离本发明的原理和宗旨的情况下在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。本发明的范围由所附权利要求极其等同限定。

Claims (5)

1.一种WebGL图形渲染引擎的建立方法,其特征在于,包括如下步骤:
步骤S1,基于WebGL标准,建立EVM图形渲染引擎的底层接口模块,包括:
封装引擎循环框架,包括事件更新和图像帧更新;
封装图形数学库模块,包括向量及计算、欧拉角及计算、四元数及计算、欧拉角转四元数、四元数转欧拉角、射线拾取计算、模型包围盒计算、颜色计算和插值计算;
封装基本物体属性模块,包括三角面、线段的核心几何体封装,以支持正方向、球体、导入的自定义模型;
步骤S2,对所述底层接口模块进行分类整理和再封装,
封装相机模块,包括透视相机、正交相机、渲染到CUBE纹理相机;
封装相机控制模块,包括飞行控制和注视旋转控制;
封装灯光模块,包括环境光源、点光源、方向光源、聚光灯、穹型光源,并实现灯光的阴影计算;
封装图片精灵模块,实现图片精灵的相关特性;
封装材质模块,包括点材质、线材质、基础材质、标准材质、深度材质、法线材质、Phong材质、兰伯特材质、自定义Shader材质,封装透明、半透明渲染设置;
封装物理模块,实现模型碰撞检测效果;
封装粒子发射器模块、实现三维粒子特效功能;
封装模型数据加载模块,包括obj格式、Collada格式;
封装辅助物体模块,包括位置、包围盒、坐标轴、法线辅助物体方便功能开发调试;
封装事件绑定模块和消息传递模块,实现模块间交互机制;
形成多个功能模块,其中,所述多个功能模块包括:相机模块、相机控制模块、灯光模块、图片精灵模块、材质模块、物理模块、粒子发射器模块、模型数据加载模块、辅助物体模块、事件绑定模块和消息传递模块;
步骤S3,根据建立的多个功能模块,对预设的常见业务进行封装整合,建立EVM图形渲染引擎,提供标准API接口,供业务层使用。
2.如权利要求1所述的WebGL图形渲染引擎的建立方法,其特征在于,在所述步骤S1中,基于WebGL标准,对WebGL接口进行封装。
3.如权利要求1所述的WebGL图形渲染引擎的建立方法,其特征在于,所述多个功能模块包括:着色器、灯光控制模块、场景控制模块、粒子模块。
4.如权利要求1所述的WebGL图形渲染引擎的建立方法,其特征在于,在所述步骤S3中,预设的常见业务包括:流程制定业务、物体制定业务和报表图表业务。
5.如权利要求1所述的WebGL图形渲染引擎的建立方法,其特征在于,所述步骤S3进一步包括如下步骤:
建立EVM图形渲染引擎,所述EVM图形渲染引擎提供三维场景初始化、模型加载、灯光创建及设置、材质创建及设置,以实现快速搭建web无插件三维实时渲染方案,以及提供Client/Server架构三维引擎的所有标准接口。
CN201710193776.3A 2017-03-28 2017-03-28 一种WebGL图形渲染引擎的建立方法 Active CN106990961B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710193776.3A CN106990961B (zh) 2017-03-28 2017-03-28 一种WebGL图形渲染引擎的建立方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710193776.3A CN106990961B (zh) 2017-03-28 2017-03-28 一种WebGL图形渲染引擎的建立方法

Publications (2)

Publication Number Publication Date
CN106990961A CN106990961A (zh) 2017-07-28
CN106990961B true CN106990961B (zh) 2023-10-27

Family

ID=59413446

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710193776.3A Active CN106990961B (zh) 2017-03-28 2017-03-28 一种WebGL图形渲染引擎的建立方法

Country Status (1)

Country Link
CN (1) CN106990961B (zh)

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107613046B (zh) * 2017-08-22 2020-12-18 创新先进技术有限公司 滤镜管道系统、图像数据处理方法、装置以及电子设备
CN108446347A (zh) * 2018-03-07 2018-08-24 华科优建(武汉)工程信息发展有限公司 一种用于网络浏览器快速渲染和交互响应的三维图形渲染系统
CN108958724A (zh) * 2018-06-26 2018-12-07 北京优锘科技有限公司 三维可视化引擎构建方法、装置、引擎、浏览器、设备及存储介质
CN109144497B (zh) * 2018-07-06 2021-07-20 中科星图股份有限公司 一种基于安卓的地理空间浏览器平台及构建方法
CN112070871B (zh) * 2020-09-02 2024-01-19 山东天兑信息科技有限公司 一种跨平台三维可视化引擎构建系统、方法、终端及储存介质
CN112364117B (zh) * 2020-11-25 2024-10-15 深圳航天智慧城市系统技术研究院有限公司 一种基于物理引擎的gis数据可视化方法及装置
CN112991508A (zh) * 2021-03-30 2021-06-18 赛瓦软件(上海)有限公司 一种基于WebGL的3D渲染系统及方法
CN113570733B (zh) * 2021-08-05 2024-08-30 稿定(厦门)科技有限公司 一种基于WebGL的图形渲染方法、装置及系统
CN114219882B (zh) * 2021-12-07 2024-10-25 杭州美创科技股份有限公司 3d渲染引擎构建方法、装置、计算机设备及存储介质

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102254292A (zh) * 2010-05-20 2011-11-23 盛乐信息技术(上海)有限公司 远程3d指令渲染系统及方法
CN103543998A (zh) * 2012-07-17 2014-01-29 上海互基信息科技有限公司 基于html5的web3d图形引擎生成方法
CN103713891A (zh) * 2012-10-09 2014-04-09 阿里巴巴集团控股有限公司 一种在移动设备上进行图形渲染的方法和装置
CN104995622A (zh) * 2013-03-14 2015-10-21 英特尔公司 用于图形函数的合成器支持
KR101580605B1 (ko) * 2014-06-27 2015-12-28 주식회사 디지털프로그 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법
CN105512364A (zh) * 2015-11-25 2016-04-20 四川物联亿达科技有限公司 一种基于webGL的三维仓库模型建立方法
CN105912655A (zh) * 2016-04-11 2016-08-31 东南大学 基于WebGL的三维模型显示方法及相应的Web-BIM工程信息集成管理系统
CN106445518A (zh) * 2016-09-22 2017-02-22 中国传媒大学 一种跨平台移动终端应用程序开发方法及系统

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10013157B2 (en) * 2015-07-22 2018-07-03 Box, Inc. Composing web-based interactive 3D scenes using high order visual editor commands

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102254292A (zh) * 2010-05-20 2011-11-23 盛乐信息技术(上海)有限公司 远程3d指令渲染系统及方法
CN103543998A (zh) * 2012-07-17 2014-01-29 上海互基信息科技有限公司 基于html5的web3d图形引擎生成方法
CN103713891A (zh) * 2012-10-09 2014-04-09 阿里巴巴集团控股有限公司 一种在移动设备上进行图形渲染的方法和装置
CN104995622A (zh) * 2013-03-14 2015-10-21 英特尔公司 用于图形函数的合成器支持
KR101580605B1 (ko) * 2014-06-27 2015-12-28 주식회사 디지털프로그 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법
CN105512364A (zh) * 2015-11-25 2016-04-20 四川物联亿达科技有限公司 一种基于webGL的三维仓库模型建立方法
CN105912655A (zh) * 2016-04-11 2016-08-31 东南大学 基于WebGL的三维模型显示方法及相应的Web-BIM工程信息集成管理系统
CN106445518A (zh) * 2016-09-22 2017-02-22 中国传媒大学 一种跨平台移动终端应用程序开发方法及系统

Also Published As

Publication number Publication date
CN106990961A (zh) 2017-07-28

Similar Documents

Publication Publication Date Title
CN106990961B (zh) 一种WebGL图形渲染引擎的建立方法
US9652880B2 (en) 2D animation from a 3D mesh
CN108648269B (zh) 三维建筑物模型的单体化方法和系统
CN101059760B (zh) Opengl到opengl│es翻译器和opengl│es仿真器
US20100289804A1 (en) System, mechanism, and apparatus for a customizable and extensible distributed rendering api
KR20210151114A (ko) 하이브리드 렌더링
CN107248193A (zh) 二维平面与虚拟现实场景进行切换的方法、系统及装置
CN112316433B (zh) 游戏画面渲染方法、装置、服务器和存储介质
US11836882B2 (en) Three-dimensional point cloud-based initial viewing angle control and presentation method and system
CN102867284A (zh) 一种图形绘制引擎及其实现方法
WO2024027237A1 (zh) 渲染的优化方法、电子设备和计算机可读存储介质
CN111161398A (zh) 一种图像生成方法、装置、设备及存储介质
KR102713170B1 (ko) 실시간 깊이 맵을 사용한 지오메트리 인식 증강 현실 효과
CN115082609A (zh) 图像渲染方法、装置、存储介质及电子设备
US10403040B2 (en) Vector graphics rendering techniques
CN118397160A (zh) 一种用于油田站场逆向建站系统的自主化三维渲染引擎
CN116863052A (zh) 基于分布式操作系统绘制地图的方法及装置
CN117036562A (zh) 一种三维显示方法和相关装置
CN109389683B (zh) flash背景墙生成方法及装置
CN113256771A (zh) 图形系统和相应地图形处理方法
CN112184870B (zh) 用于三维图形软件的三维物体拾取方法
Rahman et al. Game development with Unity
EP4386682A1 (en) Image rendering method and related device thereof
WO2024199097A1 (zh) 一种渲染方法及相应装置
WO2023197729A1 (zh) 对象渲染方法、装置、电子设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
TA01 Transfer of patent application right

Effective date of registration: 20230727

Address after: Room 313-3940, 3rd floor, Shanshui Building, No. 3, Gulou East Street, Miyun District, Beijing, 101500

Applicant after: YITONG YUANJIAN (BEIJING) TECHNOLOGY CO.,LTD.

Address before: Room A-0336, Floor 2, Building 3, Yard 30, Shixing Street, Shijingshan District, Beijing 100041

Applicant before: E.T.STONE (BEIJING) TECHNOLOGY CO.,LTD.

TA01 Transfer of patent application right
CB02 Change of applicant information

Address after: Room 313-3940, 3rd floor, Shanshui Building, No. 3, Gulou East Street, Miyun District, Beijing, 101500

Applicant after: Beijing Aerospace Lianzhi Technology Co.,Ltd.

Address before: Room 313-3940, 3rd floor, Shanshui Building, No. 3, Gulou East Street, Miyun District, Beijing, 101500

Applicant before: YITONG YUANJIAN (BEIJING) TECHNOLOGY CO.,LTD.

CB02 Change of applicant information
GR01 Patent grant
GR01 Patent grant