CN114004923B - 一种基于WebGL的三维模型光影映射纹理渲染方法 - Google Patents
一种基于WebGL的三维模型光影映射纹理渲染方法 Download PDFInfo
- Publication number
- CN114004923B CN114004923B CN202111086486.1A CN202111086486A CN114004923B CN 114004923 B CN114004923 B CN 114004923B CN 202111086486 A CN202111086486 A CN 202111086486A CN 114004923 B CN114004923 B CN 114004923B
- Authority
- CN
- China
- Prior art keywords
- mapping
- baking
- setting
- texture
- map
- 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
Links
- 238000013507 mapping Methods 0.000 title claims abstract description 84
- 238000000034 method Methods 0.000 title claims abstract description 23
- 238000009877 rendering Methods 0.000 title claims abstract description 23
- 230000000694 effects Effects 0.000 claims abstract description 30
- 238000005457 optimization Methods 0.000 claims abstract description 12
- 238000004364 calculation method Methods 0.000 claims abstract description 10
- 238000007796 conventional method Methods 0.000 claims abstract description 10
- 238000009826 distribution Methods 0.000 claims abstract description 10
- 239000000463 material Substances 0.000 claims abstract description 8
- 230000008569 process Effects 0.000 claims abstract description 6
- 230000000007 visual effect Effects 0.000 claims description 7
- 230000003044 adaptive effect Effects 0.000 claims description 4
- 238000000354 decomposition reaction Methods 0.000 claims description 4
- 230000006870 function Effects 0.000 claims description 4
- 230000008719 thickening Effects 0.000 claims description 3
- 238000005516 engineering process Methods 0.000 description 10
- 238000004519 manufacturing process Methods 0.000 description 5
- 238000012545 processing Methods 0.000 description 4
- 230000007547 defect Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000012937 correction Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000004927 fusion Effects 0.000 description 1
- 238000005286 illumination Methods 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 238000004088 simulation Methods 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
- 239000013585 weight reducing agent Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/04—Texture mapping
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/50—Lighting effects
Landscapes
- Engineering & Computer Science (AREA)
- Computer Graphics (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Image Generation (AREA)
Abstract
本发明公开了一种基于WebGL的三维模型光影映射纹理渲染方法，包括以下步骤：1)：贴图深度优化；2)：渲染器参数设置；3)：UV面积类比计算分布；4)：三角形细分有效光照烘焙：需要建立三个3Dmax纹理烘焙过程文件来进行操作；设置Vray渲染器，进行漫反射贴图烘焙；设置mentalray渲染器，按照常规设置AO贴图烘焙参数，进行AO贴图烘焙；设置默认渲染器，按照常规设置阴影贴图烘焙参数和灯光参数，给模型附无贴图的材质球，进行阴影贴图烘焙；5)：纹理贴图重构；6)：效果调整。该方法为模型轻量化提供辅助手段，达到贴图纹理具备光影映射效果，同时还可以提高模型浏览速度和渲染性能，缩短技术人员工作所耗时间。
Description
技术领域
本发明涉及图像处理技术领域，具体为一种基于WebGL的三维模型光影映射纹理渲染方法。
背景技术
随着数字化技术的发展，三维可视化展示技术迅速结合到各行各业的实际应用中，催生了许多新的应用技术，在计算机视觉与图形学领域，为了获得真实感的三维模型，需要制作高精度模型和绘制高还原度纹理彩色图像，来满足市场需求。新技术的突起和市场高频快的体验需求，再加上互联网数据传输快的特性，使三维场景逐渐趋向于Web端进行展示。
目前业内基于WebGL的三维制作光影映射纹理贴图技术还是偏向传统贴图烘焙方法。所用的组合软件是3Dmax和VRay渲染器，Vray渲染器要比3Dmax默认渲染器烘焙出的贴图色彩信息丰富，当然制作所用时间也更长，这种制作流程方法很难再适用到Web端上面。(通过验证，根据模型场景复杂度，Vray渲染器烘焙1024*1024光影贴图(Vraylightingmap)所需时间在6～15分之间，2048*2048纹理贴图所需时间在15～30分之间，模型场景越复杂，烘焙贴图分辨率越大，耗时越长，文件兆数越大，同时所烘焙出的带有光影映射纹理贴图其强烈受光处纹理模糊或曝光，细节表达不到位，画面美感达不到干净的要求。)
由于基于Web端进行三维展示，WebGL受浏览器限制，有别于单机版应用，因此三维展示只能适应轻量化渲染，而模型轻量化和纹理贴图真实感就成了需要解决突破的技术难点。比如目前三维模型在Web端进行展示就存在以下缺陷：(1)模型数据量和纹理数量庞大，降低显卡内存和渲染性能；(2)用户视觉体验差，Web端效果与桌面端效果无法比拟；(3)光影映射烘焙纹理贴图模糊，纹理效果不佳以及烘焙时间较长，耗费人工时间；(4)无法满足基于WebGL的三维展示新技术趋势；
发明内容
本发明的目的在于克服现有技术的不足之处，提供一种基于WebGL的三维模型光影映射纹理渲染方法，该方法为模型轻量化提供辅助手段，达到贴图纹理具备光影映射效果，同时还可以提高模型浏览速度和渲染性能，缩短技术人员工作所耗时间。
一种基于WebGL的三维模型光影映射纹理渲染方法，包括以下步骤：
1)：贴图深度优化：基于贴图优化部分，对所需要展示的重点纹理贴图色值加深、纹理线条加粗和贴图饱和度调整优化；并制作出一张贴图烘焙时所需的多源类型通道贴图；
2)：渲染器参数设置：使用Vray渲染器进行适配的参数设置，符合场景最终效果要求即可；
3)：UV面积类比计算分布：UV分解和摆放需要人为手工布置，不用自动拆解和铺平功能，通过纹理所占视觉观看面积对比计算进行合理的UV面积分布；
4)：三角形细分有效光照烘焙：需要建立三个3Dmax纹理烘焙过程文件来进行操作；
设置Vray渲染器，进行漫反射贴图烘焙；设置mentalray渲染器，按照常规设置AO贴图烘焙参数，进行AO贴图烘焙；设置默认渲染器，按照常规设置阴影贴图烘焙参数和灯光参数，给模型附无贴图的材质球，进行阴影贴图烘焙；
5)：纹理贴图重构：把渲染好的AO贴图和阴影贴图正片叠底到漫反射贴图上，使烘焙好的漫反射贴图保留光影映射的效果和明暗体积感；
6)：效果调整：根据生成阶段导出到系统的效果进行场景整体色调对比，若存在颜色不统一的地方，重新进行步骤5)，完成后再一次输出成果，直到合格为止。
而且，步骤1)中制作出的多源类型通道贴图为法线贴图。
本发明的优点和技术效果是：
(1)本发明的一种基于WebGL的三维模型光影映射纹理渲染方法，通过提升烘焙纹理光影映射贴图展示效果，为基于Web端展示的模型轻量化提供必要辅助手段，WebGL受浏览器限制，只能轻量级渲染，因此通过本发明烘焙出的贴图细节元素，可以减少模型冗余类型和模型顶点数量，加快模型加载速度和三维场景数据的调度，提升硬件资源的性能，使三维场景的渲染更加流畅。
(2)本发明通过光影映射纹理烘焙渲染技术，利用纹理合并、多源类型贴图处理和烘焙贴图重构等技术手段，大幅度缩减了传统光影贴图烘焙技术所用的时间，节省了人力成本。实验结果表明，根据模型场景复杂度，Vray渲染器烘焙1024*1024光影贴图(Vraylightingmap)所需时间在2～5分之间，2048*2048纹理贴图所需时间在5～15分之间，所节省的烘焙渲染时间是传统的3倍多。
(3)本发明满足基于WebGL的三维展示新技术趋势，通过结合新技术、新平台、新引擎，改变传统三维模型制作路径方式，以更轻量化、高适配性的技术特点提升三维展示效果，满足用户视觉体验。
(4)本发明的核心技术光影映射纹理贴图可以实现在Web端不依靠引擎光影组件效果，还能展示模型光影体积效果，同时最大化的保留纹理细节。并且该发明可以解决区域级/园区级三维场景模型在面向Web端应用时，场景贴图烘焙光影画质效果低、细节层次不丰富和模型三角面数臃肿等问题。
附图说明
图1为本发明的一种基于WebGL的三维模型光影映射纹理渲染方法流程图。
具体实施方式
为能进一步了解本发明的内容、特点及功效，兹例举以下实施例，并配合附图详细说明如下。需要说明的是，本实施例是描述性的，不是限定性的，不能由此限定本发明的保护范围。
一种基于WebGL的三维模型光影映射纹理渲染方法，包括以下步骤：
1)：贴图深度优化：基于贴图优化部分，对所需要展示的重点纹理贴图色值加深、纹理线条加粗和贴图饱和度调整优化；并制作出一张贴图烘焙时所需的多源类型通道贴图；
2)：渲染器参数设置：使用Vray渲染器进行适配的参数设置，符合场景最终效果要求即可；
3)：UV面积类比计算分布：UV分解和摆放需要人为手工布置，不用自动拆解和铺平功能，通过纹理所占视觉观看面积对比计算进行合理的UV面积分布；
4)：三角形细分有效光照烘焙：需要建立三个3Dmax纹理烘焙过程文件来进行操作；
设置Vray渲染器，进行漫反射贴图烘焙；设置mentalray渲染器，按照常规设置AO贴图烘焙参数，进行AO贴图烘焙；设置默认渲染器，按照常规设置阴影贴图烘焙参数和灯光参数，给模型附无贴图的材质球，进行阴影贴图烘焙；
5)：纹理贴图重构：把渲染好的AO贴图和阴影贴图正片叠底到漫反射贴图上，使烘焙好的漫反射贴图保留光影映射的效果和明暗体积感；
6)：效果调整：根据生成阶段导出到系统的效果进行场景整体色调对比，若存在颜色不统一的地方，重新进行步骤5)，完成后再一次输出成果，直到合格为止。
而且，步骤1)中制作出的多源类型通道贴图为法线贴图。
为了更清楚地说明本发明的具体实施方式，下面提供一种实施例：
本发明的一种基于WebGL的三维模型光影映射纹理渲染方法，步骤1)至步骤4)属于通过光照映射，完成渲染烘焙阶段；步骤4)至步骤5)属于异构数据处理，完成纹理合并部分。
1)贴图深度优化：
根据三维仿真还原所需的纹理材质基于前期制作阶段的贴图优化部分，进行贴图深度优化，具体操作是借助Photoshop工具，针对基础纹理贴图进行贴图分辨率、贴图纹理清晰度和贴图材质颗粒度等高精度显示优化，并基于深度优化后的贴图制作模型烘焙所需的多源类型通道法线贴图，以此增加烘焙后贴图纹理的立体感；
2)渲染器参数设置：
使用Vray渲染器进行适配的参数设置，符合场景最终效果要求即可，此处无特殊要求；
3)UV面积类比计算分布：
模型UV通过面积类比计算进行合理UV分布，用纹理合并集(textureatlases多个小纹理和到一张大纹理上)，使多重纹理把uv的作用最大化，但是所有纹理只能分享同一个纹理坐标。UV分解和摆放需要人为手工布置，不使用自动拆解和铺平功能，通过纹理展示所占视觉观看面积比计算进行合理UV面积分布；
4)三角形细分有效光照烘焙：
这一步是核心技术部分，需要建立三个3Dmax纹理烘焙过程文件来进行操作。
漫反射贴图：使用Vray渲染器Max文件，在设置材质参数时，把做好的对应法线贴图放到凹凸通道位置；在烘焙时，其它文件隐藏，把需要烘焙的模型部件和灯光独立进行单独渲染，这样可以大幅度缩减渲染时间，快速出图；
AO贴图：使用mentalray渲染器Max文件，按照常规设置AO贴图烘焙参数，参数设置保证渲染出的AO贴图颗粒度细腻即可；
阴影贴图：使用默认渲染器Max文件，按照常规设置阴影贴图烘焙参数和灯光参数，给模型附无贴图的材质球，进行阴影贴图烘焙；
5)纹理贴图重构：
完成贴图烘焙成果图进行重构处理和效果矫正，利用Photoshop软件把渲染好的AO贴图和阴影贴图透明度降至50％，正片叠底到漫反射贴图上，这样烘焙好的漫反射贴图就保留了光影映射的效果和明暗体积感，最后使贴图纹理的清晰度、色彩达到合理的地步，纹理贴图重构这一步所用时间比传统光影映射烘焙快3倍多，同时贴图纹理的清晰度要比传统烘焙渲染保留的更好，最后把调整好的光影映射纹理贴图反贴到3Dmax场景文件中即可；
6)效果调整：
根据生成阶段导出到系统的效果进行场景整体色调对比，如果有颜色不统一的地方，重新进行纹理贴图重构步骤，完成后再一次输出成果，直到合格为止。
最后，本发明的未述之处均采用现有技术中的成熟产品及成熟技术手段。
应当理解的是，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，而所有这些改进和变换都应属于本发明所附权利要求的保护范围。
Claims (2)
1.一种基于WebGL的三维模型光影映射纹理渲染方法，其特征在于，包括以下步骤：
1)：贴图深度优化：基于贴图优化部分，对所需要展示的重点纹理贴图色值加深、纹理线条加粗和贴图饱和度调整优化；并制作出一张贴图烘焙时所需的多源类型通道贴图；
2)：渲染器参数设置：使用Vray渲染器进行适配的参数设置，符合场景最终效果要求即可；
3)：UV面积类比计算分布：UV分解和摆放需要人为手工布置，不用自动拆解和铺平功能，通过纹理所占视觉观看面积对比计算进行合理的UV面积分布；
4)：三角形细分有效光照烘焙：需要建立三个3Dmax纹理烘焙过程文件来进行操作；
设置Vray渲染器，进行漫反射贴图烘焙；设置mental ray渲染器，按照常规设置AO贴图烘焙参数，进行AO贴图烘焙；设置默认渲染器，按照常规设置阴影贴图烘焙参数和灯光参数，给模型附无贴图的材质球，进行阴影贴图烘焙；
5)：纹理贴图重构：把渲染好的AO贴图和阴影贴图正片叠底到漫反射贴图上，使烘焙好的漫反射贴图保留光影映射的效果和明暗体积感；
6)：效果调整：根据生成阶段导出到系统的效果进行场景整体色调对比，若存在颜色不统一的地方，重新进行步骤5)，完成后再一次输出成果，直到合格为止。
2.根据权利要求1所述的一种基于WebGL的三维模型光影映射纹理渲染方法，其特征在于，所述步骤1)中制作出的多源类型通道贴图为法线贴图。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111086486.1A CN114004923B (zh) | 2021-09-16 | 2021-09-16 | 一种基于WebGL的三维模型光影映射纹理渲染方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111086486.1A CN114004923B (zh) | 2021-09-16 | 2021-09-16 | 一种基于WebGL的三维模型光影映射纹理渲染方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114004923A CN114004923A (zh) | 2022-02-01 |
| CN114004923B true CN114004923B (zh) | 2024-03-29 |
Family
ID=79921537
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111086486.1A Active CN114004923B (zh) | 2021-09-16 | 2021-09-16 | 一种基于WebGL的三维模型光影映射纹理渲染方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114004923B (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115830286B (zh) * | 2023-02-15 | 2023-04-18 | 武汉天恒信息技术有限公司 | 一种保持三维场景纹理清晰度一致量的烘焙方法 |
| CN116992599B (zh) * | 2023-09-25 | 2024-01-09 | 天津市普迅电力信息技术有限公司 | 一种基于Cesium物理渲染的机械模型效果提升方法 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102346921A (zh) * | 2011-09-19 | 2012-02-08 | 广州市凡拓数码科技有限公司 | 一种三维软件的渲染器烘焙光影贴图的方法 |
| WO2021142977A1 (zh) * | 2020-01-19 | 2021-07-22 | 杭州群核信息技术有限公司 | 一种基于vray的pbr材质渲染方法和系统 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US11429690B2 (en) * | 2019-10-10 | 2022-08-30 | Hover, Inc. | Interactive path tracing on the web |
-
2021
- 2021-09-16 CN CN202111086486.1A patent/CN114004923B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102346921A (zh) * | 2011-09-19 | 2012-02-08 | 广州市凡拓数码科技有限公司 | 一种三维软件的渲染器烘焙光影贴图的方法 |
| WO2021142977A1 (zh) * | 2020-01-19 | 2021-07-22 | 杭州群核信息技术有限公司 | 一种基于vray的pbr材质渲染方法和系统 |
Non-Patent Citations (1)
| Title |
|---|
| 贴图烘焙技术及其在城市三维景观系统中的应用初探;崔新友;王培培;;科技信息;20100525(15);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114004923A (zh) | 2022-02-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114004923B (zh) | 一种基于WebGL的三维模型光影映射纹理渲染方法 | |
| CN111275802B (zh) | 一种基于vray的pbr材质渲染方法和系统 | |
| CN112316420B (zh) | 模型渲染方法、装置、设备及存储介质 | |
| JP4481166B2 (ja) | ユーザによる合成画像およびビデオ画像のリアルタイムのミキシングを可能にする方法およびシステム | |
| US20060152579A1 (en) | Stereoscopic imaging system | |
| CN104574488A (zh) | 一种用于移动增强现实浏览器的三维模型的优化方法 | |
| CN113012273B (zh) | 基于目标模型的光照渲染方法、装置、介质及设备 | |
| CN104657096B (zh) | 一种在cave环境下实现虚拟产品可视化与交互的方法 | |
| US9183654B2 (en) | Live editing and integrated control of image-based lighting of 3D models | |
| JP2023029984A (ja) | 仮想イメージを生成するための方法、装置、電子機器及び可読記憶媒体 | |
| CN113240783B (zh) | 风格化渲染方法和装置、可读存储介质、电子设备 | |
| CN111508053A (zh) | 模型的渲染方法、装置、电子设备及计算机可读介质 | |
| CN113409465B (zh) | 毛发模型的生成方法、装置、存储介质与电子设备 | |
| JP7522316B2 (ja) | 画像に基づく照明効果処理方法、装置、デバイス及び記憶媒体 | |
| CN114119818A (zh) | 场景模型的渲染方法、装置及设备 | |
| WO2009018050A1 (en) | Rendering of shadows with hand-painted appearance | |
| US7133052B1 (en) | Morph map based simulated real-time rendering | |
| CN110634178A (zh) | 面向数字博物馆的三维场景精细化重建方法 | |
| CN115375811A (zh) | 一种适用于Cesium的模型贴图渲染方法 | |
| CN100463004C (zh) | 一种渲染模型残影效果的方法 | |
| CN115311395A (zh) | 三维场景渲染方法、装置及设备 | |
| CN116485967A (zh) | 一种虚拟模型的渲染方法及相关装置 | |
| CN111651959B (zh) | 一种3d字体的实现方法及终端 | |
| CN113936083A (zh) | 模型渲染方法、装置、存储介质及电子设备 | |
| CN115035231A (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |