CN106709041A - 一种网页图形图像渲染系统及方法 - Google Patents

一种网页图形图像渲染系统及方法 Download PDF

Info

Publication number
CN106709041A
CN106709041A CN201611255501.XA CN201611255501A CN106709041A CN 106709041 A CN106709041 A CN 106709041A CN 201611255501 A CN201611255501 A CN 201611255501A CN 106709041 A CN106709041 A CN 106709041A
Authority
CN
China
Prior art keywords
data
scene
treatment
web page
rendering
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.)
Pending
Application number
CN201611255501.XA
Other languages
English (en)
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.)
Shenzhen Qi Fan Networks Co Ltd
Original Assignee
Shenzhen Qi Fan Networks 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 Shenzhen Qi Fan Networks Co Ltd filed Critical Shenzhen Qi Fan Networks Co Ltd
Priority to CN201611255501.XA priority Critical patent/CN106709041A/zh
Publication of CN106709041A publication Critical patent/CN106709041A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/20—3D [Three Dimensional] animation

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • Processing Or Creating Images (AREA)
  • Image Generation (AREA)

Abstract

本发明涉及图形渲染技术领域，特别涉及一种网页图形图像渲染系统及方法。所述网页图形图像渲染系统包括：美术和/或策划工具集、异步加载系统、粒子特效系统、骨骼动画系统、场景系统、物理系统、材质系统、光影系统、后期图像处理系统和渲染系统，所述异步加载系统用于处理策划工具集处理的数据，或直接处理美术工具集产出的数据；所述场景系统使用异步加载系统的数据、粒子数据和动画数据，再引入物理系统，进行运算；所述物理系统对场景系统的数据进行处理；所述材质系统处理来自场景系统的数据；所述光影系统处理来自材质系统的数据，生成渲染目标；所述后期图像处理系统处理渲染成渲染目标的数据，生成最终图像。

Description

一种网页图形图像渲染系统及方法
技术领域
本发明涉及图形渲染技术领域，特别涉及一种网页图形图像渲染系统及方法。
背景技术
真实感渲染是一门利用计算机的强大计算能力，模拟现实生活中的各种视觉现象的科学。这门新兴的科学已有近50年的历史，在早期的发展阶段，由于计算机硬件能力的限制，主要的研究方向集中在如何简化物理数学模型以使计算机生成计算量不过于庞人而效果又可被接受的图形。随着硬件能力的提升，科学家和研究者开始把重心集中到如何创建出真实可信的图形上来。从70年代至今，有大批的研究者对这个领域做出了杰出的贡献，目前利用商业引擎制作的影视特效和广告效果图已经很难被肉眼识别出与真实效果的差别。但是目前渲染技术中所使用的各种算法模型仍然是现实情况的一种简化和模拟，要完全真实且实时的模拟现实效果，还有一段很长的路。
发明内容
本发明提供了一种网页图形图像渲染系统及方法，旨在至少在一定程度上解决现有技术中的上述技术问题之一。
为了解决上述问题，本发明提供了如下技术方案：
一种网页图形图像渲染系统，包括：美术和/或策划工具集、异步加载系统、粒子特效系统、骨骼动画系统、场景系统、物理系统、材质系统、光影系统、后期图像处理系统和渲染系统，所述美术工具集用于产出资源数据，所述策划工具集处理美术工具集产出的资源数据，所述异步加载系统用于处理策划工具集处理的数据，或直接处理美术工具集产出的数据；所述粒子特效系统对加载好的数据进行处理产生粒子数据，传输给场景系统；所述骨骼动画系统对加载好的数据进行处理产生动画数据，传输给场景系统；所述场景系统使用异步加载系统的数据、粒子数据和动画数据，再引入物理系统，进行运算；所述物理系统对场景系统的数据进行处理；所述材质系统处理来自场景系统的数据；所述光影系统处理来自材质系统的数据，生成渲染目标；所述后期图像处理系统处理渲染成渲染目标的数据，生成最终图像；所述渲染系统用于封装API，并在渲染引擎中开启渲染。
本发明实施例采取的技术方案还包括：所述美术和策划工具集包括：3ds max导出插件、地图编辑器和关卡编辑器，所述3ds max导出插件用于美术资源一键导出；所述地图编辑器对光照参数，后期参数，场景布局进行调整；所述关卡编辑器对战斗流程，AI，敌人布局进行控制。
本发明实施例采取的技术方案还包括：所述异步加载系统采用多线程下载、解析机制，所述异步加载系统支持主线程进行渲染，多个子线程进行下载操作，和主线程渲染，子线程解析其他线程下载下来的资源。
本发明实施例采取的技术方案还包括：所述场景系统采用八叉树来进行场景的划分和管理和采用三维BSP树来进行场景的划分和管理；所述场景系统还用于进行高效视椎体和隐藏面的剔除，与物理系统无缝集成，实现高效物理碰撞、模拟操作。
本发明实施例采取的技术方案还包括：所述骨骼动画系统用场景树驱动骨骼的运动以及使用GPU skin。
本发明实施例采取的另一技术方案为：一种网页图形图像渲染方法，包括以下步骤：
步骤a：通过美术工具集产出特效、动画、3d或图片资源，将经过美术产出和/或策划处理的资源输入到异步加载系统，异步加载系统处理策划工具集的数据，或直接处理美术工具集的数据；
步骤b：粒子特效系统对加载好的数据进行处理产生粒子数据，传输给场景系统，骨骼动画系统对加载好的数据进行处理产生动画数据，传输给场景系统，场景系统使用异步加载系统的数据、粒子数据和动画数据，再引入物理系统，进行运算；
步骤c：材质系统处理来自场景系统的数据，光影系统处理来自材质系统的数据，生成渲染目标，后期图像处理系统处理渲染成渲染目标的数据生成最终图像。
本发明实施例采取的技术方案还包括：在所述步骤a还包括：封装API供渲染系统使用，在渲染引擎中开启3D硬件渲染。
本发明实施例采取的技术方案还包括：在所述步骤b中，所述美术和策划工具集包括：3ds max导出插件，实现了美术资源一键导出；地图编辑器，主要对光照参数，后期参数，场景布局进行调整；关卡编辑器，主要对战斗流程，AI，敌人布局进行控制。
本发明实施例采取的技术方案还包括：在所述步骤b中，异步加载系统采用多线程下载、解析机制，异步加载支持主线程进行渲染，多个子线程进行下载操作，或主线程渲染，子线程解析其他线程下载下来的资源。
本发明实施例采取的技术方案还包括：在所述步骤b中，所述场景系统采用多种场景管理器，包括采用八叉树来进行场景的划分和管理和采用三维BSP树来进行场景的划分和管理。
相对于现有技术，本发明实施例产生的有益效果在于：本发明实施例的网页图形图像渲染系统及方法通过封装API，得以开启网页环境下的3D硬件渲染；通过将粒子数据的计算移到了GPU,节约了CPU的开销，并提高了运行效率。通过提供在网页3D环境下开发程序的工具集，从而让开发人员能在尽可能少的操作情况下，完成大型3D程序的开发，并且给逻辑层开发人员提供了简单易用的结构，从而推动软件工程的规范化，降低系统实现的风险。
附图说明
图1是本发明实施例的网页图形图像渲染系统的结构示意图；
图2是本发明实施例的网页图形图像渲染系统美术和策划工具集的结构示意图；
图3是本发明实施例的网页图形图像渲染系统的异步加载系统的流程图；
图4是本发明实施例的网页图形图像渲染系统的粒子特效系统的结构示意图；
图5是本发明实施例的网页图形图像渲染系统场景系统进行数据处理的示意图；
图6是本发明实施例的网页图形图像渲染系统物理系统进行物理计算的示意图；
图7是本发明实施例的网页图形图像渲染系统的材质系统进行可编程渲染的示意图；
图8是本发明实施例的网页图形图像渲染系统的渲染系统的结构示意图；
图9是本发明实施例的网页图形图像渲染方法的流程图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
请参阅图1，是本发明实施例的网页图形图像渲染系统的结构示意图。本发明实施例的网页图形图像渲染系统包括美术和/或策划工具集、异步加载系统、粒子特效系统、骨骼动画系统、场景系统、物理系统、材质系统、光影系统、后期图像处理系统和渲染系统。美术工具集用于产出特效、动画、3D和/或图片等资源，策划工具集可以处理美术工具集产出特效、动画、3D和/或图片等资源。美术工具集产出的资源和策划工具集处理的资源输入异步加载系统。异步加载系统用于处理策划工具集处理的数据，或直接处理美术工具集产出的数据。粒子特效系统对加载好的数据进行处理产生粒子数据，传输给场景系统。骨骼动画系统对加载好的数据进行处理产生动画数据，传输给场景系统。场景系统使用异步加载系统的数据、粒子数据和动画数据，再引入物理系统，进行运算。物理系统对场景系统的数据进行处理。材质系统处理来自场景系统的数据。光影系统处理来自材质系统的数据，生成渲染目标(render target)。后期图像处理系统处理渲染成渲染目标的数据生成最终图像。渲染系统用于封装API，并在渲染引擎中开启3D硬件渲染，其中，封装的API为stage3D。
请一并参阅图2，是本发明实施例的网页图形图像渲染系统美术和策划工具集的结构示意图。美术和策划工具集包括：3ds max导出插件301，实现了美术资源一键导出；地图编辑器302，主要对光照参数，后期参数，场景布局等进行调整；关卡编辑器303，主要对战斗流程，AI，敌人布局等进行控制。美术和策划工具集支持包括：开发3ds max插件以支持数据导出自动化；开发地图编辑器以支持可视化场景编辑；开发关卡编辑器以支持关卡可视化，自动化编辑。
请一并参阅图3，是本发明实施例的网页图形图像渲染系统的异步加载系统的流程图。异步加载系统采用多线程下载、解析机制，异步加载支持主线程进行渲染，多个子线程进行下载操作，和主线程渲染，子线程解析其他线程下载下来的资源。异步加载线程之间采用多种同步机制，主线程与其他子线程，提供了三种方式来通信，通过共享的属MessageChannel、共享的ByteArray机制，三种不同的机制各有不同，可以灵活的使用；主线程和其他子线程同步锁来进行同步，通过消息队列来发送、接受信息。
请一并参阅图4，是本发明实施例的网页图形图像渲染系统的粒子特效系统的结构示意图。粒子特效系统的特性为：简单易用的粒子编辑器，可调节参数有重力，速度，缩放，旋转，颜色，粒子数，发射率，生命周期，并且可以调节各个参数在生命周期内的变化曲线，其持模型粒和支持使用纹理；使用GPU粒子以提高运行效率。
处理生命周期：
一个生命周期为:出生->更新->死亡
使用公式P＝P0+V0*t+0.5*g*t*t
P0:初始位置；V0:初始速度；t:时间g:重力加速度
着色模式：用纯色按照时间轴插值渐变
Color＝lerp(color0，color1，currentTime/totalTime
可以使用单一纹理；可以使用序列帧纹理
混合模式：
srcColor*srcAlpha+dstColor*(1-srcAlpa)
srcColor*one+dstColor*one
粒子特效系统的工作流为：粒子编辑器和地图编辑器进行编辑；导出流数据。编辑器和客户端均可直接使用。粒子特效系统的优势为：把粒子的计算移到了GPU，节约了CPU的开销。
骨骼动画系统用场景树驱动骨骼的运动以及使用GPUskin以提高运行效率。
请一并参阅图5，是本发明实施例的网页图形图像渲染系统场景系统进行数据处理的示意图。场景系统易于程序员操作整个场景，采用多种场景管理器，包括采用八叉树来进行场景的划分和管理和采用三维BSP树来进行场景的划分和管理；场景管理器进行高效的操作包括：进行高效视椎体的剔除，进行高效隐藏面的剔除，与物理系统无缝集成，实现高效物理碰撞、模拟等操作。
光影系统实现真实动态的光影方法为：
C1.引入Lightingmap模拟全局光照
采用了下面的公式进行计算
diffuseColor＝diffuseColor*lightmapColor*2
specularColor＝specularColor*lightmapColor*2
C2.引入PSSM技术进行动态阴影的计算
shadowFactor为动态阴影阀值，可调控
lightmapColor＝lerp(shadow，lightmapColor，shadowFactor)
C3.单一方向光作为阳光；
假设光向量为L，法向量为N，视线向量为V
exposure为暴光值，0-3000
采用了下面的公式进行计算
sunColor＝diffuseColor*dot(N，L)+specularColor*pow(dot((L+V)/2，N)，exposure)
C4.按照物体的主次，引入不同数量点光源的补光；
假设光源位置为P0，顶点位置P1，法向量为N，视线向量为V
则有L＝normalize(P0-P1)；
exposure为暴光值，0-3000
pointColor＝diffuseColor*dot(N，L)+specularColor*pow(dot((L+V)/2，N)，exposure)
Color＝sunColor+pointColor0+pointColor1+......
C5.引入动态点光源进行动态照明
假设光源位置为P0，顶点位置P1，法向量为N
则有D＝P0-P1；
L＝normalize(D)；
attenuation0，attenuation1，attenuation2为三个可调控参数
lampColor＝dot(N，L)/(attenuation0+sqt(dot(D，D))*attenuation1+dot(D，D)*attenuation2)
Color＝sunColor+pointColor0+pointColor1+......+lampColor
请一并参阅图6，是本发明实施例的网页图形图像渲染系统物理系统进行物理计算的示意图。物理系统用于根据系统的计算负载，动态调节CPU和GPU计算。物理系统采用统一计算物理计算系统，包括：1.采用GPU来加速物理系统的计算；2.采用CPU来加速物理系统的计算；3.采用DSP来加速物理系统的计算。物理系统提供了box collider、capsulecollider、character controller、sphere collider、fixed joint、hinge joint等等；物理系统使用最新的物理系统算法，高效执行。
后期图像处理系统处理图像数据包括：
G1.引入HDR技术模拟人眼适应不同亮度的环境
使用了最新的ACES公试进行计算
acesColor＝color*(2.51*color+0.03)/(color*(2.43*color+0.59)+0.14)
G2.引入LUT技术用于校色
G3.开发了热源扰动来模拟热浪使空气扭曲的效果
RTI为输入的RT；uv为屏幕的uv
distortionMaskRTI为需要扭曲部分的输入RT
noiseSampler为热源噪声贴图
RTO＝tex2d(RTI，(uv+distortionMaskRTI*noiseSampler))
G4.开发模拟了水花在镜头上流动的效果
RTI为输入的RT；uv为屏幕的uv
waterNormalSampler水花的法线贴图
RTO＝tex2d(RTI，(uv+waterNormalSampler))
G5.开发模拟了镜头光晕的效果
RTI为输入的RT；lensSampler光晕的贴图
L阳光方向量；V视线向量
RTO＝RTI+lensSampler*(1-dot(L，V))
G6.开发闪光致盲效果
RTI为输入的RT
startFrameRTI为闪光起始的RT
factor为startFrameRTI的强度
RTO＝RTI+startFrameRTI*farctor
请一并参阅图7，是本发明实施例的网页图形图像渲染系统的材质系统进行可编程渲染的示意图。材质系统中引入可编程管线，通过著色器(shader)实现次世代材质作色。材质系统进行可编程渲染线包括：201是顶点着色器，处理VertexBuffer数据，进行空间变换；202负责三角形组装，将201处理后的VertexBuffer组装起来；203将202组装好的三角形在视口中进行切分和剔除；204顶点数据光栅化；205是像素着色器，处理光栅化的后的顶点数据，也可以对外部输入的Texture进行采样，通过一系列运算，得到最终的像素颜色；206渲染到framebuffer，得到最终的输出结果。
请一并参阅图8，是本发明实施例的网页图形图像渲染系统的渲染系统的结构示意图。渲染系统在网页环境下的3D硬件渲染实现方法为：封装stage3D API供渲染引擎使用；在渲染引擎中开启3D硬件渲染。
请参阅图9，是本发明实施例的网页图形图像渲染方法的流程图。本发明实施例的网页图形图像渲染方法包括：
步骤100：封装API供渲染系统使用，在渲染引擎中开启3D硬件渲染；
在步骤100中，封装API为stage3D API。
步骤200：美术工具集产出特效、动画、3d或图片等资源；策划工具集可处理这些资源，将经过美术产出和/或策划处理的资源输入到异步加载系统；
在步骤200中，美术和策划工具集包括：3ds max导出插件301，实现了美术资源一键导出；地图编辑器302，主要对光照参数，后期参数，场景布局等进行调整；关卡编辑器303，主要对战斗流程，AI，敌人布局等进行控制。美术和策划工具集支持包括：开发3ds max插件以支持数据导出自动化；开发地图编辑器以支持可视化场景编辑；开发关卡编辑器以支持关卡可视化，自动化编辑。
步骤300：异步加载系统处理策划工具集的数据，或直接处理美术工具集的数据；
在步骤300中，异步加载系统采用多线程下载、解析机制，异步加载支持主线程进行渲染，多个子线程进行下载操作，和/或主线程渲染，子线程解析其他线程下载下来的资源。异步加载线程之间采用多种同步机制，主线程与其他子线程，提供了三种方式来通信，通过共享的属MessageChannel、共享的ByteArray机制，三种不同的机制各有不同，可以灵活的使用；主线程和其他子线程同步锁来进行同步，通过消息队列来发送、接受信息。
步骤400：粒子特效系统对加载好的数据进行处理产生粒子数据，传输给场景系统；
在步骤400中，粒子特效系统的特性为：简单易用的粒子编辑器，可调节参数有重力，速度，缩放，旋转，颜色，粒子数，发射率，生命周期，并且可以调节各个参数在生命周期内的变化曲线，其持模型粒和支持使用纹理；使用GPU粒子以提高运行效率。
处理生命周期：
一个生命周期为:出生->更新->死亡
使用公式P＝P0+V0*t+0.5*g*t*t
P0:初始位置；V0:初始速度；t:时间g:重力加速度
着色模式：用纯色按照时间轴插值渐变
Color＝lerp(color0，color1，currentTime/totalTime
可以使用单一纹理；可以使用序列帧纹理
混合模式：
srcColor*srcAlpha+dstColor*(1-srcAlpa)
srcColor*one+dstColor*one
粒子特效系统的工作流为：编辑器编辑；导出流数据。编辑器和客户端均可直接使用。粒子特效系统的优势为：把粒子的计算移到了GPU，节约了CPU的开销。
步骤500：骨骼动画系统对加载好的数据进行处理产生动画数据，传输给场景系统；
在步骤500中，骨骼动画系统用场景树驱动骨骼的运动以及使用GPU skin以提高运行效率。
步骤600：场景系统使用异步加载系统的数据、粒子数据和动画数据，再引入物理系统，进行运算；
在步骤600中，场景系统易于程序员操作整个场景，采用多种场景管理器，包括采用八叉树来进行场景的划分和管理和采用三维BSP树来进行场景的划分和管理；场景管理器进行高效的操作包括：进行高效视椎体的剔除，进行高效隐藏面的剔除，与物理系统无缝集成，实现高效物理碰撞、模拟等操作。物理系统用于根据系统的计算负载，动态调节CPU和GPU计算。物理系统采用统一计算物理计算系统，包括：1.采用GPU来加速物理系统的计算；2.采用CPU来加速物理系统的计算；3.采用DSP来加速物理系统的计算。物理系统提供了boxcollider、capsule collider、character controller、sphere collider、fixed joint、hinge joint等等；物理系统使用最新的物理系统算法，高效执行。
步骤700：材质系统处理来自场景系统的数据；
在步骤700中，材质系统中引入可编程管线，通过著色器(shader)实现次世代材质作色。材质系统进行可编程渲染线包括：201是顶点着色器，处理VertexBuffer数据，进行空间变换；202负责三角形组装，将201处理后的VertexBuffer组装起来；203将202组装好的三角形在视口中进行切分和剔除；204顶点数据光栅化；205是像素着色器，处理光栅化的后的顶点数据，也可以对外部输入的Texture进行采样，通过一系列运算，得到最终的像素颜色；206渲染到frame buffer，得到最终的输出结果。
步骤800：光影系统处理来自材质系统的数据，生成渲染目标(render target)；
在步骤800中，光影系统实现真实动态的光影方法为：
C1.引入Lighting map模拟全局光照
采用了下面的公式进行计算
diffuseColor＝diffuseColor*lightmapColor*2
specularColor＝specularColor*lightmapColor*2
C2.引入PSSM技术进行动态阴影的计算
shadowFactor为动态阴影阀值，可调控
lightmapColor＝lerp(shadow，lightmapColor，shadowFactor)
C3.单一方向光作为阳光；
假设光向量为L，法向量为N，视线向量为V
exposure为暴光值，0-3000
采用了下面的公式进行计算
sunColor＝diffuseColor*dot(N，L)+specularColor*pow(dot((L+V)/2，N)，exposure)
C4.按照物体的主次，引入不同数量点光源的补光；
假设光源位置为P0，顶点位置P1，法向量为N，视线向量为V
则有L＝normalize(P0-P1)；
exposure为暴光值，0-3000
pointColor＝diffuseColor*dot(N，L)+specularColor*pow(dot((L+V)/2，N)，exposure)
Color＝sunColor+pointColor0+pointColor1+......
C5.引入动态点光源进行动态照明
假设光源位置为P0，顶点位置P1，法向量为N
则有D＝P0-P1；
L＝normalize(D)；
attenuation0，attenuation1，attenuation2为三个可调控参数
lampColor＝dot(N，L)/(attenuation0+sqt(dot(D，D))*attenuation1+dot(D，D)*attenuation2)
Color＝sunColor+pointColor0+pointColor1+......+lampColor
步骤900：后期图像处理系统处理渲染成render target的数据生成最终图像。
在步骤900中，后期图像处理系统处理图像数据包括：
G1.引入HDR技术模拟人眼适应不同亮度的环境
使用了最新的ACES公试进行计算
acesColor＝color*(2.51*color+0.03)/(color*(2.43*color+0.59)+0.14)
G2.引入LUT技术用于校色
G3.开发了热源扰动来模拟热浪使空气扭曲的效果
RTI为输入的RT；uv为屏幕的uv
distortionMaskRTI为需要扭曲部分的输入RT
noiseSampler为热源噪声贴图
RTO＝tex2d(RTI，(uv+distortionMaskRTI*noiseSampler))
G4.开发模拟了水花在镜头上流动的效果
RTI为输入的RT；uv为屏幕的uv
waterNormalSampler水花的法线贴图
RTO＝tex2d(RTI，(uv+waterNormalSampler))
G5.开发模拟了镜头光晕的效果
RTI为输入的RT；lensSampler光晕的贴图
L阳光方向量；V视线向量
RTO＝RTI+lensSampler*(1-dot(L，V))
G6.开发闪光致盲效果
RTI为输入的RT
startFrameRTI为闪光起始的RT
factor为startFrameRTI的强度
RTO＝RTI+startFrameRTI*factor
本发明实施例的网页图形图像渲染系统及方法通过封装API，得以开启网页环境下的3D硬件渲染；通过将粒子数据的计算移到了GPU,节约了CPU的开销，并提高了运行效率。通过提供在网页3D环境下开发程序的工具集，从而让开发人员能在尽可能少的操作情况下，完成大型3D程序的开发，并且给逻辑层开发人员提供了简单易用的结构，从而推动软件工程的规范化，降低系统实现的风险。
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种网页图形图像渲染系统，其特征在于，包括：美术和/或策划工具集、异步加载系统、粒子特效系统、骨骼动画系统、场景系统、物理系统、材质系统、光影系统、后期图像处理系统和渲染系统，所述美术工具集用于产出资源数据，所述策划工具集处理美术工具集产出的资源数据，所述异步加载系统用于处理策划工具集处理的数据，或直接处理美术工具集产出的数据；所述粒子特效系统对加载好的数据进行处理产生粒子数据，传输给场景系统；所述骨骼动画系统对加载好的数据进行处理产生动画数据，传输给场景系统；所述场景系统使用异步加载系统的数据、粒子数据和动画数据，再引入物理系统，进行运算；所述物理系统对场景系统的数据进行处理；所述材质系统处理来自场景系统的数据；所述光影系统处理来自材质系统的数据，生成渲染目标；所述后期图像处理系统处理渲染成渲染目标的数据，生成最终图像；所述渲染系统用于封装API，并在渲染引擎中开启渲染。
2.根据权利要求1所述的网页图形图像渲染系统，其特征在于，所述美术和策划工具集包括：3ds max导出插件、地图编辑器和关卡编辑器，所述3ds max导出插件用于美术资源一键导出；所述地图编辑器用于对光照参数、后期参数、场景布局进行调整；所述关卡编辑器用于对战斗流程、AI、敌人布局进行控制。
3.根据权利要求1所述的网页图形图像渲染系统，其特征在于，所述异步加载系统采用多线程下载、解析机制，所述异步加载系统支持主线程进行渲染，多个子线程进行下载操作，和主线程渲染，子线程解析其他线程下载下来的资源。
4.根据权利要求1所述的网页图形图像渲染系统，其特征在于，所述场景系统采用八叉树来进行场景的划分和管理及采用三维BSP树来进行场景的划分和管理；所述场景系统还用于进行高效视椎体和隐藏面的剔除，与物理系统无缝集成，实现高效物理碰撞、模拟操作。
5.根据权利要求1所述的网页图形图像渲染系统，其特征在于，所述骨骼动画系统用场景树驱动骨骼的运动以及使用GPU skin。
6.一种网页图形图像渲染方法，其特征在于，包括以下步骤：
步骤a：通过美术工具集产出特效、动画、3d或图片资源，将经过美术产出和/或策划处理的资源输入到异步加载系统，异步加载系统处理策划工具集的数据，或直接处理美术工具集的数据；
步骤b：粒子特效系统对加载好的数据进行处理产生粒子数据，传输给场景系统，骨骼动画系统对加载好的数据进行处理产生动画数据，传输给场景系统，场景系统使用异步加载系统的数据、粒子数据和动画数据，再引入物理系统，进行运算；
步骤c：材质系统处理来自场景系统的数据，光影系统处理来自材质系统的数据，生成渲染目标，后期图像处理系统处理渲染成渲染目标的数据生成最终图像。
7.根据权利要求6所述的网页图形图像渲染方法，其特征在于，在所述步骤a还包括：封装API供渲染系统使用，在渲染引擎中开启3D硬件渲染。
8.根据权利要求6所述的网页图形图像渲染方法，其特征在于，在所述步骤b中，所述美术和策划工具集包括：3ds max导出插件，实现美术资源一键导出；地图编辑器，主要对光照参数、后期参数、场景布局进行调整；关卡编辑器，主要对战斗流程、AI、敌人布局进行控制。
9.根据权利要求6或8所述的网页图形图像渲染方法，其特征在于，在所述步骤b中，异步加载系统采用多线程下载、解析机制，异步加载支持主线程进行渲染，多个子线程进行下载操作，或主线程渲染，子线程解析其他线程下载下来的资源。
10.根据权利要求9所述的网页图形图像渲染方法，其特征在于，在所述步骤b中，所述场景系统采用多种场景管理器，包括采用八叉树来进行场景的划分和管理及采用三维BSP树来进行场景的划分和管理。
CN201611255501.XA 2016-12-29 2016-12-29 一种网页图形图像渲染系统及方法 Pending CN106709041A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201611255501.XA CN106709041A (zh) 2016-12-29 2016-12-29 一种网页图形图像渲染系统及方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201611255501.XA CN106709041A (zh) 2016-12-29 2016-12-29 一种网页图形图像渲染系统及方法

Publications (1)

Publication Number Publication Date
CN106709041A true CN106709041A (zh) 2017-05-24

Family

ID=58904815

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201611255501.XA Pending CN106709041A (zh) 2016-12-29 2016-12-29 一种网页图形图像渲染系统及方法

Country Status (1)

Country Link
CN (1) CN106709041A (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108446347A (zh) * 2018-03-07 2018-08-24 华科优建（武汉）工程信息发展有限公司 一种用于网络浏览器快速渲染和交互响应的三维图形渲染系统
CN111880918A (zh) * 2020-07-28 2020-11-03 南京市城市与交通规划设计研究院股份有限公司 路网前端渲染方法、装置及电子设备
CN112037311A (zh) * 2020-09-08 2020-12-04 腾讯科技（深圳）有限公司 一种动画生成的方法、动画播放的方法以及相关装置
CN113986438A (zh) * 2021-10-30 2022-01-28 深圳市快易典教育科技有限公司 动画的加载方法、系统、装置及计算机可读存储介质
CN115858835A (zh) * 2022-09-28 2023-03-28 中国水利水电科学研究院 一种遥感影像全链条处理系统及方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110109724A1 (en) * 2009-01-30 2011-05-12 Microsoft Corporation Body scan
CN103345395A (zh) * 2013-07-01 2013-10-09 绵阳市武道数码科技有限公司 一种用于大型多人在线角色扮演的3d游戏引擎
CN103606180A (zh) * 2013-11-29 2014-02-26 广州菲动软件科技有限公司 3d骨骼动画的渲染方法及装置
CN105354872A (zh) * 2015-11-04 2016-02-24 深圳墨麟科技股份有限公司 一种基于3d网页游戏的渲染引擎、实现方法及制作工具

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110109724A1 (en) * 2009-01-30 2011-05-12 Microsoft Corporation Body scan
CN103345395A (zh) * 2013-07-01 2013-10-09 绵阳市武道数码科技有限公司 一种用于大型多人在线角色扮演的3d游戏引擎
CN103606180A (zh) * 2013-11-29 2014-02-26 广州菲动软件科技有限公司 3d骨骼动画的渲染方法及装置
CN105354872A (zh) * 2015-11-04 2016-02-24 深圳墨麟科技股份有限公司 一种基于3d网页游戏的渲染引擎、实现方法及制作工具

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108446347A (zh) * 2018-03-07 2018-08-24 华科优建（武汉）工程信息发展有限公司 一种用于网络浏览器快速渲染和交互响应的三维图形渲染系统
CN111880918A (zh) * 2020-07-28 2020-11-03 南京市城市与交通规划设计研究院股份有限公司 路网前端渲染方法、装置及电子设备
CN111880918B (zh) * 2020-07-28 2021-05-18 南京市城市与交通规划设计研究院股份有限公司 路网前端渲染方法、装置及电子设备
CN112037311A (zh) * 2020-09-08 2020-12-04 腾讯科技（深圳）有限公司 一种动画生成的方法、动画播放的方法以及相关装置
CN112037311B (zh) * 2020-09-08 2024-02-20 腾讯科技（深圳）有限公司 一种动画生成的方法、动画播放的方法以及相关装置
CN113986438A (zh) * 2021-10-30 2022-01-28 深圳市快易典教育科技有限公司 动画的加载方法、系统、装置及计算机可读存储介质
CN113986438B (zh) * 2021-10-30 2024-01-30 深圳市快易典教育科技有限公司 动画的加载方法、系统、装置及计算机可读存储介质
CN115858835A (zh) * 2022-09-28 2023-03-28 中国水利水电科学研究院 一种遥感影像全链条处理系统及方法
CN115858835B (zh) * 2022-09-28 2023-08-08 中国水利水电科学研究院 一种遥感影像全链条处理系统及方法

Similar Documents

Publication Publication Date Title
CN106709041A (zh) 一种网页图形图像渲染系统及方法
CN112652044B (zh) 粒子特效渲染方法、装置、设备及存储介质
US11302058B2 (en) System for non-planar specular reflections in hybrid ray tracing
CN102254340B (zh) 一种基于gpu加速的环境光遮挡图像绘制方法及系统
US9684997B2 (en) Efficient rendering of volumetric elements
CN105787865A (zh) 基于游戏引擎和gpu并行处理的分形图生成与渲染方法
US11615575B2 (en) Methods and systems for constructing a shader
CN102157008A (zh) 一种大规模虚拟人群实时绘制方法
CN108986232B (zh) 一种在vr显示设备中呈现ar环境画面的方法
WO2008014384A2 (en) Real-time scenery and animation
CN114155337A (zh) 一种基于Unity平台大规模数字车间渲染系统及方法
Rao et al. Comparing 3D rendering engines in blender
Bautembach Animated sparse voxel octrees
Rohmer et al. Tiled frustum culling for differential rendering on mobile devices
Yang et al. Visual effects in computer games
Mihai et al. Implementing high performance system simulators using modern graphics rendering devices: Implementing system control algorithms on graphics hardware
Nordahl Enhancing the hpc-lab snow simulator with more realistic terrains and other interactive features
Dong et al. Smoke simulation based on particle system in virtual environments
Rodrigues et al. A real time lighting technique for procedurally generated 2d isometric game terrains
Sahibgareeva Skeletal Animation of Three-Dimensional Models Using Nanite Technology
CN116912374A (zh) 一种基于gpu的实时大规模群体动画渲染方法及系统
Inácio et al. Interactive simulation and visualization of fluids with surface raycasting
CN117078824A (zh) 参数拟合方法、装置、设备、存储介质及程序产品
Porcino Gaming Graphics: The Road to Revolution: From laggard to leader, game graphics are taking us in new directions.
CN117205556A (zh) 虚拟对象的显示方法、装置、电子设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
AD01 Patent right deemed abandoned

Effective date of abandoning: 20201030

AD01 Patent right deemed abandoned