图像生成方法、装置、电子设备及存储介质

技术领域

本发明涉及图像处理领域，特别涉及一种图像生成方法、生成装置、电子设备及存储介质。

背景技术

随着元宇宙概念的兴起，越来越多的游戏和应用开始将其业务和内容迁移到元宇宙中。在元宇宙中，用户可以自由地探索、交互和创造各种虚拟场景和内容，形成了一个全新的数字世界。然而，元宇宙中的宣传和推广仍然面临着传统的游戏宣传方式所遇到的问题。

发明内容

有鉴于此，本发明的实施例提供了一种图像生成方法、图像生成装置、电子设备及非易失性计算机可读存储介质。

本发明实施方式提供的图像生成方法，包括：

基于用户输入通过相机组件捕获三维场景；

根据所述相机组件的相机属性对所述三维场景渲染，得到渲染结果；

将预设海报样式与所述渲染结果叠加，生成海报图像；

对所述海报图像进行格式转换，生成字符串图像；

将所述字符串图像放置到图像嵌入元素中以生成场景图像。

在某些实施方式中，所述相机属性包括目标渲染纹理和所述相机可见性，所述根据所述相机组件的相机属性对所述三维场景渲染，得到渲染结果，包括：

将所述目标渲染纹理设置为所述三维场景的当前渲染纹理；

根据所述相机可见性设置所述三维场景的渲染管线；

根据所述当前渲染纹理和所述渲染管线对所述三维场景进行渲染，生成所述渲染结果。

在某些实施方式中，所述生成方法还包括：

在所述相机组件捕获三维场景前移除所述三维场景中的UI图标：以及

将所述UI图标添加至所述渲染结果中。

在某些实施方式中，所述生成方法还包括：

在当前所述三维场景上显示所述场景图像。

在某些实施方式中，所述在当前所述三维场景上显示所述场景图像，包括：

获取所述三维场景在屏幕的坐标位置以及所述场景图像宽和高；

根据所述坐标位置计算所述场景图像在屏幕上的目标坐标；

根据所述场景图像宽和高计算所述场景图像在所述屏幕的尺寸；

根据所述场景图像在所述屏幕的目标坐标和尺寸生成第一统一资源定位器；

根据所述第一统一资源定位器在所述屏幕上构建所述场景图像图片元素；

生成所述图片元素的第二统一资源定位器；

调节所述图片元素在所述屏幕的位置和大小；

将调节后的所述图片元素添加至所述三维场景中。

在某些实施方式中，所述生成方法还包括：

基于分享指令发送所述场景图像给目标用户。

在某些实施方式中，所述生成方法还包括：

缓存所述场景图像。

本申请实施方式的场景图像生成装置，包括：

捕获模块，用于基于用户输入通过相机组件捕获三维场景；

渲染模块，用于根据所述相机组件的相机属性对所述三维场景渲染，得到渲染结果；

叠加模块，用于将预设海报样式与所述渲染结果叠加，生成海报图像；

转换模块，用于对所述海报图像进行格式转换，生成字符串图像；

生成模块，用于将所述字符串图像放置到图像嵌入元素中以生成所述三维场景的场景图像。

本申请实施方式的电子设备，包括处理器和存储器，所述存储器存储有计算机程序，当所述计算机程序被所述处理器执行时，使得所述处理器实现所述的场景图像生成方法。

本申请实施方式的非易失性计算机可读存储介质，包括计算机程序，当所述计算机程序在被处理器执行时，使得所述处理器实现所述的场景图像生成方法。

本申请实施方式的场景图像生成方法、生成装置、电子设备和存储介质中，通过相机组件捕获三维场景，并根据相机组件的相机属性对三维场景渲染，得到渲染结果，以及将预设海报样式与渲染结果叠加，生成海报图像，对海报图像进行格式转换，生成字符串图像，将字符串图像放置到图像嵌入元素中以生成场景图像。如此，有效地解决了用户主动宣传元宇宙的难度较大、用户不方便进行分享展示的问题，同时也可以满足玩家自己制作游戏宣传海报并将其分享给他人的需求。

本申请实施方式的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变的明显，或通过本申请的实践了解到。

附图说明

本发明上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变的明显和容易理解，其中：

图1是本发明某些实施方式的生成方法的流程示意图；

图2是本发明某些实施方式的生成装置的模块示意图；

图3是本发明某些实施方式的生成方法的场景示意图；

图4是本发明某些实施方式的生成方法的流程示意图；

图5是本发明某些实施方式的生成方法的流程示意图；

图6是本发明某些实施方式的生成装置的模块示意图；

图7是本发明某些实施方式的生成方法的流程示意图；

图8是本发明某些实施方式生成方法的场景示意图；

图9是本发明某些实施方式的生成方法的流程示意图；

图10是本发明某些实施方式的生成方法的流程示意图。

具体实施方式

下面详细描述本发明的实施方式，所述实施方式的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施方式是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。

在本发明的描述中，需要理解的是，术语“中心”、“纵向”、“横向”、“长度”、“宽度”、“厚度”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”、“内”、“外”、“顺时针”、“逆时针”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个所述特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接或可以相互通讯；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通或两个元件的相互作用关系。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

随着元宇宙概念的兴起，越来越多的游戏和应用开始将其业务和内容迁移到元宇宙中。在元宇宙中，用户可以自由地探索、交互和创造各种虚拟场景和内容，形成了一个全新的数字世界。

为了记录元宇宙中的故事情节，玩家互动等动画，往往需要在元宇宙中设置游戏动画录像或游戏画面拍摄的功能，在元宇宙中运行中，可以在需要时触发游戏动画的录像或者游戏画面的拍摄功能，以达到记录精彩游戏内容的目的。相关技术中，待记录游戏画面往往通过设备自带截屏功率实现或通过设定在游戏场景中的虚拟相机拍摄实现。

然而，相关技术中，通过自带截屏功能截取的画面会低于实际显示的画面效果，而通过虚拟相机拍摄得到的游戏画面的画面效果受限于玩家设备性能，如，游戏中经常会为了游戏运行的流畅性而降低游戏在某些机型设备上的画面效果。由此，在进行游戏画面拍摄时通常是低于游戏实际画面效果的动画或图片，并且，传统的游戏宣传方式主要是通过图片和视频来展示游戏画面和特点，但这些宣传材料往往需要经过专业的后期制作和编辑，时间和成本较高，并且无法基于用户实时体验的元宇宙画面来生成宣传材料，难以真实地展示元宇宙的魅力。

有鉴于此，请参阅图1，本申请实施方式提供了一种场景图像生成方法，生成方法包括：

01，基于用户输入通过相机组件捕获三维场景；

02，根据相机组件的相机属性对三维场景渲染，得到渲染结果；

03，将预设海报样式与渲染结果叠加，生成海报图像；

04，对海报图像进行格式转换，生成字符串图像；

05，将字符串图像放置到图像嵌入元素中以生成三维场景的场景图像。

请参阅图2，本申请实施方式提供了一种场景图像生成装置10。生成装置10包括捕获模块11、渲染模块12、叠加模块13、转换模块14和生成模块15。步骤01可以由捕获模块11实现，步骤02由渲染模块12实现，步骤03可以由叠加模块13实现，步骤04可以由转换模块14实现，步骤05可以由生成模块15实现。

或者说，捕获模块11可以用于基于用户输入通过相机组件捕获三维场景；

渲染模块12可以用于根据相机组件的相机属性对三维场景渲染，得到渲染结果；

叠加模块13可以用于将预设海报样式与渲染结果叠加，生成海报图像；

转换模块14可以用于对海报图像进行格式转换，生成字符串图像；

生成模块15可以用于将字符串图像放置到图像嵌入元素中以生成三维场景的场景图像。

本申请实施方式还提供了一种电子设备，电子设备包括处理器和存储器；存储器存储有计算机程序，在计算机程序被处理器执行时，使得处理器实现上述的场景图像生成方法，也即是，处理器可以用于基于用户输入通过相机组件捕获三维场景，并根据相机组件的相机属性对三维场景渲染，得到渲染结果，处理器还可以用于将预设海报样式与渲染结果叠加，生成海报图像，以及对海报图像进行格式转换，生成字符串图像，再将字符串图像放置到图像嵌入元素中以生成三维场景的场景图像。

本申请实施方式场景图像生成方法、生成装置10以及电子设备中，通过相机组件捕获三维场景，并根据相机组件的相机属性对三维场景渲染，得到渲染结果，以及将预设海报样式与渲染结果叠加，生成海报图像，对海报图像进行格式转换，生成字符串图像，将字符串图像放置到图像嵌入元素中以生成三维场景的场景图像。如此，有效地解决了用户主动宣传三维场景的难度较大、用户不方便进行分享展示的问题，同时也可以满足玩家自己制作游戏宣传海报并将其分享给他人的需求。

在一些实施方式中，生成装置10可以是电子设备的一部分。或者说，电子设备包括生成装置10。

在一些实施方式中，生成装置10可以是一定方式组装以具有前述功能的分立元件、或者是以集成电路形式存在具有前述功能的芯片、又或者是在处理器上运行时使得处理器具有前述功能的计算机软件代码段。

在一些实施方式中，作为硬件，生成装置10可以是独立或者作为额外增加的外围元件加装到电子设备。生成装置10也可以集成到电子设备，例如，生成装置10是电子设备的一部分时，生成装置10可以集成到处理器上。

在一些生成装置10是电子设备的一部分的实施方式中，作为软件，生成装置10对应的代码段可以存储于存储器上通过处理器执行实现前述功能。或者说生成装置10包括前述的计算机程序，又或者说前述的计算机程序包括生成装置10。

电子设备可以为具有显示功能并可以进行逻辑计算以及具有存储记忆功能，还能够按照程序运行、自动、高速处理海量数据的现代化智能电子设备，例如，电子设备可以为个人电脑(PC)、平板电脑、手机或智能可穿戴设备(例如AR设备、VR设备或智能手表)等，本申请的电子设备可以以手机为例进行说明，如此，电子设备可以实时显示三维场景，并可以实现本实施方式的图像生成方法。

具体地，电子设备还可包括相机组件，相机组件可基于用户输入开启，并捕获三维场景，用户输入可以为语音输入、文字输入或图像输入等，例如，当用户输入为语音输入时，若相机组件接收到语音“生成场景图像”，则开启并捕获到当前显示的三维场景。

需要说明的是，三维场景可以是元宇宙三维场景、游戏三维场景、电影三维场景或其它三维场景等，例如，本申请中，可以以三维场景为元宇宙三维场景为例进行说明。也即是，本申请的图像生成方法可以应用于元宇宙，通过捕获元宇宙三维场景并得到元宇宙三维场景的元宇宙场景图像。

本领域技术人员可以理解地，元宇宙是人类运用数字技术构建的，由现实世界映射或超越现实世界，可与现实世界交互的虚拟世界，具备新型社会体系的数字生活空间。

相机组件可以基于用户输入，捕获到电子设备当前显示的三维场景，从而后续可以对相机组件捕获的三维场景的实时渲染，生成场景图像。相机组件也可以捕获预存储的元场景数据，而后续可以对相机组件捕获的预存储的场景数据的进行静态渲染，得到场景图像。例如，在一些示例中，当电子设备的性能不足，无法完成场景的实时渲染时，可以将实时渲染改成静态渲染，即对预存储的场景数据进行捕获并渲染，生成场景图像，并且，电子设备在显示界面给出设备性能不足，无法完成场景实时渲染的提示信息。

相机还包括有基于3D绘图协议(Web Graphics Library，WebGL)的渲染引擎，渲染引擎可以为Cocos Creator。Cocos Creator是一款轻量、高效、免费开源的跨平台游戏引擎，同时也是实时3D内容创作平台。

处理器可通过渲染引擎根据相机组件的相机组件对三维场景进行渲染，从而得到渲染结果。可以理解地，通过渲染引擎对相机组件捕获的三维场景渲染得到渲染结果，相较于相关技术中，直接通过截屏得到三维场景图像，提高了场景图像质量，从而可以提升宣传效果。

请结合图3，进一步地，处理器可将预设海报样式将渲染结果叠加，生成海报图像。可以理解地，预设海报样式是指预先存储在电子设备上的海报样式，例如，预设海报样式可以预先存储于存储器中，当渲染引擎生成渲染结果后，处理器可从存储器在提取预设海报样式，并与渲染引擎生成的渲染结果叠加，从而生成海报图像。

预设海报样式可包括但不限于宣传信息、三维场景的主题信息、二维码信息等，预设海报样式可以由用户或相关开发人员预先设定好，具体地样式不限。如此，可以基于用户实时体验的三维场景画面来生成宣传材料，可以真实地展现三维场景的良好体验，同时，避免了用户的后续制作和编辑，提升了图像分享效率。

更进一步地，处理器可通过HTML5的Canvas API对海报图像进行格式转换，生成Base格式的字符串图像。需要说明的是，Canvas API提供了一个通过JavaScript和HTML的canvas元素来绘制图像的方式，它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

字符串图像为DataUrl形式的图像，需要说明的是，DataUrl是以data:模式为前缀的URL，允许内容的创建者将较小的文件嵌入到文档中，在DataUrl中，图像被转换呈base64编码的字符串形式，并存储在URL中。

在生成字符串图像后，处理器可将生成的字符串图像放置到图像嵌入元素(Image元素)中以生成场景图像，其中，场景图像可以进行分享，当长按电子设备屏幕中的场景图像时，即可实现分享。如此，有效解决了用户主动宣传三维场景的难度较大、用户不方便进行分享展示的问题，同时也可以满足玩家自己制作游戏宣传海报并将其分享给他人的需求。

请参阅图4，在某些实施方式中，相机组件包括目标渲染纹理和相机可见性，步骤02包括：

021，将目标渲染纹理设置为三维场景的当前渲染纹理；

022，根据相机可见性设置三维场景的渲染管线；

023，根据当前渲染纹理和渲染管线对三维场景进行渲染，生成渲染结果。

请进一步结合图2，在某些实施方式中，子步骤021-023可以由渲染模块12实现。也即是，渲染模块12实现可以用于将目标渲染纹理设置为三维场景的当前渲染纹理，并根据相机可见性设置三维场景的渲染管线，以及根据当前渲染纹理和渲染管线对三维场景进行渲染，生成渲染结果。

在某些实施方式中，处理器可以用于将目标渲染纹理设置为三维场景的当前渲染纹理，并根据相机可见性设置三维场景的渲染管线，以及根据当前渲染纹理和渲染管线对三维场景进行渲染，生成渲染结果。

具体地，处理器可判断当前渲染纹理是否存在，如果不存在，则创建一个新的渲染纹理作为当前渲染纹理，再将相机组件的目标渲染纹理设置为当前渲染纹理，再获取director的root节点，并根据相机的可见性设置渲染管线，如果相机的可见性包括UI_2D或UI_3D层级，则需要更新2D批次、上传缓冲区、渲染场景和重置2D批次；如果相机的可见性不包括UI_2D或UI_3D层级，则只需要渲染场景，最后根据渲染管线和当前渲染纹理以及root节点对三维场景进行渲染，生成渲染结果。

进一步，在生成渲染结果后，将相机的可见性设为原有的值，以及即目标渲染纹理设置为原来的值。实现本实施方式的代码可以为：

let targetTexture＝camera.targetTexture；

let renderCamera＝camera.camera；

let visibility＝renderCamera.visibility；

if(RT.getGFXTexture()＝＝null){

RT.reset({width:Math.floor(renderCamera.width),height:

Math.floor(renderCamera.height)})；

}

camera.targetTexture＝RT；

let root＝director.root；

if(camera.visibility&(Layers.BitMask.UI_2D|Layers.BitMask.UI_3D)){

root.scenes.forEach(v＝>v.removeBatches())；

root.batcher2D.update()；

root.batcher2D.uploadBuffers()；

root.pipeline.render([renderCamera])；

root.batcher2D.reset()；

}else{root.pipeline.render([renderCamera])；}

renderCamera.visibility＝visibility；

camera.targetTexture＝targetTexture；

}。

请参阅图5，在某些实施方式中，生成方法还包括：

001，在相机组件捕获三维场景前移除三维场景中的UI图标；

002，将UI图标添加至渲染结果中。

请结合图6，在某些实施方式中，生成装置10还包括移除模块16和添加模块17，其中，步骤001可以由移除模块16实现，步骤002可以由添加模块17实现。也即是，移除模块16可以用于在相机组件捕获三维场景前移除三维场景中的UI图标，添加模块17可以用于将UI图标添加至渲染结果中。

在某些实施方式中，处理器可以用于在相机组件捕获三维场景前移除三维场景中的UI图标，以及将UI图标添加至渲染结果中。

可以理解地，三维场景中可能存在UI图标，若不移除UI图标，则会使得UI图标部分也会渲染进来，因此，在捕获场景前，需要先移除三维场景中所有的UI图标，从而避免UI部分被渲染，并在渲染完成后，再重新添加回UI图标。

请参阅图7，在某些实施方式中，生成方法还包括：

06，在当前三维场景上显示场景图像。

请进一步结合图6，在某些实施方式中，生成装置10还包括显示模块18，08可以由可以由显示模块18实现。也即是，显示模块18可以用于在当前三维场景上显示场景图像。

在某些实施方式中，处理器可以用于在当前三维场景上显示场景图像。

请结合图8，将场景图像进行定位和缩放等调整，使其呈现在当前三维场景上。如此，用户可以在实时了解到场景图像。

具体而言，获取三维场景在屏幕的坐标位置以及场景图像的宽和高，并根据三维场景在屏幕的坐标位置计算出场景图像在屏幕上的目标坐标，以及根据场景图像宽和高计算场景图像在屏幕上的尺寸，以及再根据场景图像在屏幕的目标坐标和尺寸生成第一统一资源定位器。

进一步地，根据第一统一资源定位器在屏幕上构建场景图像图片元素；生成图片元素的第二统一资源定位器，调节图片元素在屏幕的位置和大小，最后将调节后的图片元素添加至三维场景中。

实现本实施方式的代码可以为：

let pos＝Canvas.main.cameraComponent.worldToScreen(this.ltNode.worldPosition)；

let posB＝Canvas.main.cameraComponent.worldToScreen(this.lbNode.worldPosition)；

let bg2＝Tools.$(this.previewNode,"root/bg")；

let uiTransBg＝bg2._uiProps.uiTransformComp；

let x＝Math.floor(posB.x+0.5)；

let y＝Math.floor(posB.y+0.5)；

let width＝Math.ceil(uiTransBg.width*view.getScaleX()-0.5)；

let height＝Math.ceil(uiTransBg.height*view.getScaleY()-0.5)；

let url＝Tools.ToObjectURL(this._renderTexture2,x,y,width-1,height-1,true)；

if(url){

let scaleX＝view.getScaleX()/screen.devicePixelRatio；

let scaleY＝view.getScaleY()/screen.devicePixelRatio；

this._image＝new Image((uiTransBg.width*scaleX),(uiTransBg.height*scaleY))；

this._image.src＝url；

this._image.style.position＝"absolute"；

this._image.style.top＝((view.getVisibleSizeInPixel().height-pos.y)/

screen.devicePixelRatio)+"px"；

this._image.style.left＝(pos.x/screen.devicePixelRatio)+"px"；

game.container！.appendChild(this._image)。

请结合图9，在某些实施方式中，生成方法还包括：

07，基于分享指令发送场景图像给目标用户。

请结合图6，在某些实时方式中，生成装置10还包括分享模块19，步骤07可以由分享模块19实现，或者说，分享模块19用于基于分享指令发送场景图像给目标用户。

在某些实时方式中，处理器还用于基于分享指令发送场景图像给目标用户。

如此，有效解决了用户主动宣传三维场景的难度较大、用户不方便进行分享展示的问题，同时也可以满足玩家自己制作游戏宣传海报并将其分享给他人的需求。

请结合图10，在某些实施方式中，生成方法还包括：

08，缓存场景图像。

请结合图6，在某些实施方式中，生成装置10还包括缓存模块111，步骤08可以由缓冲模块111实现，或者说，缓存模块111可以用于缓存场景图像。

在某些实施方式中，处理器还可用于缓存场景图像。

具体地，当后端服务器出现短时阻塞或响应变慢时，可以改为使用本地缓存显示结果，并提示用户等待或者重试操作。同时，可以记录系统日志，以便后续排查和修复系统问题。

在本说明书的描述中，参考术语“一个实施方式”、“某些实施方式”、“示意性实施方式”、“示例”、“具体示例”、或“一些示例”等的描述意指结合所述实施方式或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施方式或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施方式或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施方式或示例中以合适的方式结合。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。