美术如何创建 skybox 贴图资源?

文章目录

  • 目的
  • PS手绘+Panorama To Cubemap
  • PS手绘+Pano2VR
  • Skybox & Cubemap Tutorial (Maya & Photoshop)
  • Unity 中使用 ReflectionProbe 生成 Cubemap 然后再 PS 调整
  • PS直接手绘 cubemap
  • Blender 导入 Panorama,然后烘焙到 cubemap,再导入unity中使用
  • Blender cube->to sphere->再绘制模型上的纹理 (50s教程)
  • 其他的
  • References


目的

学习新的自定义天空的做法
可以再日后,自己制作,或是教会美术如何制作

这篇文章只有 美术相关的内容
程序的可以是 连连看,或是 自己撸代码实现 程序化天空盒


PS手绘+Panorama To Cubemap

参考视频:Create Custom Skybox for Unity with Photoshop - 这个是直接使用 PS 手绘 + Panorama to cubemap

PS手绘-Panorama图

方法很简单

  1. 暗灰 填充 地板
  2. 暖白 填充 顶部
  3. 使用画笔工具+SHIFT健 绘制水平面上的晚霞:橙红、橙色、蓝色,然后高斯模糊

最后生成这种的一张图:
在这里插入图片描述

Panorama To Cubemap,将刚刚PS手绘的的天空盒转为Cubemap
使用在线将全景图转为Cubemap 图
在线工具:Panorama to Cubemap
在这里插入图片描述

在这里插入图片描述


PS手绘+Pano2VR

PS手绘-Panorama图
在这里插入图片描述

Pano2VR,将Panorama图转为Cubemap

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
导入unity使用

在这里插入图片描述

顶部扭曲变形比较严重
在这里插入图片描述

调整 Invoer selecteren
在这里插入图片描述
选择 Clinder
在这里插入图片描述
调整前缀重新导出
在这里插入图片描述

可以看到顶部和底部都是用有问题的
底部的我们可以不管,只用会之前的就OK,因为几乎是纯颜色的
在这里插入图片描述

在这里插入图片描述

PS再次手绘调整顶部内容

在这里插入图片描述

调整为:
在这里插入图片描述

最终unity再次验证效果
可以看到,侧边的像素变形那边么严重了
顶部的也不会黑块了
在这里插入图片描述


Skybox & Cubemap Tutorial (Maya & Photoshop)

虽然这种方式不太高效 和 方便,当也算是其中一种制作方式

Skybox & Cubemap Tutorial (Maya & Photoshop) - 从maya如何建模cube,展开UV,如果从PS中抠图,反正各种P图,生成Cubemap,注意好每个面的UV相邻边的内容要对上,讲得非常详细

在这里插入图片描述

展开UV
在这里插入图片描述

每个UV之前的面、临边 的拓扑关系如下:
在这里插入图片描述

在这里插入图片描述

如果UV相邻关系不对,则需要调整,如下:
在这里插入图片描述

注意每个相邻便需要保留的像素为,这部分的 “倒梯形” 的像素内容
在这里插入图片描述
最后重新调整 uv 与 图像对齐
在这里插入图片描述


Unity 中使用 ReflectionProbe 生成 Cubemap 然后再 PS 调整

还有一些是在引擎中,使用烘焙工具生成 cubemap的
unity 中的话,先布置好场景,然后给需要拍摄的位置,放一个 ReflectionProbe 组件,选择 Type : Bake,然后点击 bake 即可

在这里插入图片描述

然后将 Inspector 选择 debug 模式
在这里插入图片描述

点击 Baked Texture 对应的 ReflectionProbe-0 ,让 Project 视图自动选中,对应烘焙出来的 cubemap
然后我们将这个 cubemap CTRL +D 复制一份出来,在放到我们对应的资源目录
如果需要调整的话,我们可以在PS 中自行PS,方法和之前的差不多,不过这次我们是在 cubemap 图下调整的
而不是panorama图,所以我们注意边界详解的问题
在这里插入图片描述

在PS中打开,看着个 “十字” 图不太一样
在这里插入图片描述

然后我们标记上序号
看看 unity 里面的对应的方向
在这里插入图片描述

从下图中,我们可以看出来:

  • 1是前
  • 2是后
  • 3是上(顶)
  • 4是下(底)
  • 5是相对1号的左手
  • 4是相对1号的右手
    在这里插入图片描述

在 unity 对应的 cubemap UV种类,有 竖、横 的十字,也有 竖、横 的一字,如下
参考unity 手册:Cubemaps
在这里插入图片描述

上面的方向你要看懂的话,需要想了解unity 的轴向,如下图
在这里插入图片描述

  • 右边,是x轴正方向 (左边,就是x轴负方向)
  • 上面,是y轴正方向 (下面,就是y轴负方向)
  • 前面,是z轴正方向 (后面,就是z轴负方向)

UE 应该也有类似的工具


PS直接手绘 cubemap

参考视频: How to create a hand-painted skybox for Unity using Photoshop | Mini-tutorial

和之前一样,你想要了解 unity cubemap uv 的坐标种类
在这里插入图片描述
还有 panorama 全景 uv,叫做:LatLong (Latitude-Longitude, sometimes called cylindrical) uv 布局
在这里插入图片描述

然后你可以,这上面的 uv layout 图,放到 unity 里面,看看效果
在这里插入图片描述

这里使用的是 横向 的十字 uv
在这里插入图片描述

后面就没啥可以说的了,直接绘制 cubemap 内容


Blender 导入 Panorama,然后烘焙到 cubemap,再导入unity中使用

参考视频: Creating Cubemap Skybox in Blender 2.9 for Unity - Blender 导入 Panorama,然后烘焙到 cubemap,再导入unity中使用

先 在 polyhaven/hdris 找一张 HDR 的 panorama 图

在这里插入图片描述

然后丢到 blender 里面,设置好 材质,使用上刚刚那个 panorama 贴图,然后烘焙 cubemap

如下,直接烘焙 diffuse color,margin=0px (就是不需要 uv 间隔)
在这里插入图片描述

下面是烘焙参数
在这里插入图片描述
然后将导出来的cubemap,使用PS裁剪画布顶底多余的区域
在这里插入图片描述

然后直接导入 unity 里面使用,设置好 texture 的 参数,完毕


Blender cube->to sphere->再绘制模型上的纹理 (50s教程)

参考视频: Blender Quick Tutorial - Sky Box

首先,开局一个 cube
在这里插入图片描述
将uv切开,设置为 横向 十字 uv
在这里插入图片描述
在这里插入图片描述

然后 细分一下面数
在这里插入图片描述

点两下 subedivide,细分两级即可,如下图
(按照你的需求,你可以多细分一些也是OK的)
在这里插入图片描述

然后我们使用 to sphere
在这里插入图片描述

调整到接近球体
在这里插入图片描述

然后再 flip normals 一下 (翻转法线,这样可以再 blender 里面进入这个 sphere 里面图画 cubemap 的内容)
在这里插入图片描述

将面的法线平滑一下
在这里插入图片描述

然后进入到 texture 里面图画
在这里插入图片描述

在 Texture Paint 模式里面,你可以抠图进来贴到 sphere 内壁,或是手绘 sphere 内壁的纹理就O了
在这里插入图片描述

然后将这图导入游戏引擎使用就O了
在这里插入图片描述


其他的

  • 还有一些是使用 野外实景 拍摄,使用相机 前后左右顶底 6个方向拍摄 cubemap 素材,然后回来PS合成调整的方式生成 cubemap
  • 还有另一种是直接使用 panorama 拍摄设备,拍下来就是全景
  • 还有一种使用 PS 里面的 3D/Sphere Panorama 菜单的功能 (不过现在这个功能给 adobe 从 后续新的 PS 中剥离出去了,改成独立收费的另一个软件,也是给别人吐槽疯了)
  • 还有 shader 程序化天空盒,这里不讲,感兴趣自行搜索

大家也可以自行去搜索
我上面就是搬砖,thx for you watching…


References

  • Create Custom Skybox for Unity with Photoshop - 这个是直接使用 PS 手绘 + Panorama to cubemap
  • Skybox - Photoshop to Unity 3D - PS手绘+Pano2VR
  • Creating Cubemap Skybox in Blender 2.9 for Unity - Blender 导入 Panorama,然后烘焙到 cubemap,再导入unity中使用
    • 还有另一个类似的,不过这个视频更早的: Blender Series: Create A Video Game Skybox

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/157250.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用Nginx负载均衡、动静分离特性部署前后端项目

目录 一、Nginx简介 1.1 Nginx是什么? 1.2 Nginx的作用 二、Nginx负载均衡 2.1 Nginx安装 2.2 Nginx搭载负载均衡 2.2.1 tomcat负载均衡 2.2.2 服务器的集群 三、前后端分离项目 3.1 前端项目导出 3.2 前端项目Linux部署 一、Nginx简介 1.1 Nginx是什么…

CSS3背景样式

在CSS 2.1中,background属性的功能还无法满足设计的需求,为了方便设计师更灵活地设计需要的网页效果,CSS3在原有background基础上新增了一些功能属性,可以在同一个对象内叠加多个背景图像,可以改变背景图像的大小尺寸&…

MATLAB | 万圣节来画个简单的可爱鬼叭!

万圣节要到啦一起来画个可爱鬼吧~ 代码比较的短: 完整代码 figure(Units,normalized,Position,[.2,.1,.52,.72]); axgca;hold on;axis off; ax.DataAspectRatio[1,1,1]; ax.YDirreverse; ax.XLim[0,100]; ax.YLim[0,100]; [X,Y]meshgrid(linspace(0,1,200)); Zsq…

Java实现对Html文本的处理

1.引入jsoup <dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.8.3</version> </dependency> 2. html示例 示例代码&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1…

各种爱心特效代码免费分享

「链接&#xff1a;https://pan.xunlei.com/s/VNi9l3Mqp9oEflga1T6M-ZUOA1?pwdsam3# 提取码&#xff1a;sam3”复制这段内容后打开手机迅雷App&#xff0c;查看更方便」 「链接&#xff1a;https://pan.xunlei.com/s/VNi9lWqdFIwdtD5sdCDZFamoA1?pwdka8b# 提取码&#xff1a;…

Goby 漏洞发布|XXL-JOB accessToken 权限绕过漏洞

漏洞名称&#xff1a; XXL-JOB accessToken 权限绕过漏洞 English Name&#xff1a;XXL-JOB default accessToken Permission bypass Vulnerability CVSS core: 9.2 影响资产数&#xff1a; 18489 漏洞描述&#xff1a; XXL-JOB 是一款开源的分布式任务调度平台&#xff0…

python manage.py createsuperuser运行错误

我把思念作笺&#xff0c;随风而去&#xff0c;落在你常路过的那个街角… 错误复现 PS D:\教学文件\Django\djangoProject\webDemo02> python manage.py createsuperuser System check identified some issues:WARNINGS: ?: (urls.W005) URL namespace admin isnt unique…

四十三、【进阶】前缀索引

1、基础 简单点说&#xff0c;前缀索引就是当索引字段类型较大时&#xff0c;有时候需要索引很长的字符串&#xff0c;查询时&#xff0c;会浪费更大的空间&#xff0c;此时可以只对该索引的一部分前缀建立索引&#xff0c;可以大大的节省空间。 前缀索引一般配合选择度进行使用…

java入门,哈希函数

一、前言 一听到哈希函数这种东西就感觉是数学&#xff0c;增加了人们的印象它很难。其中在数据结构中的HashMap的存储方式就用到了哈希函数&#xff0c;所以它也算是java的基础。看到哈希别惊慌&#xff0c;首先它只不过是个名称&#xff0c;我们理解它是个函数就行&#xff…

【建议收藏】免费体验的AI论文写作网站-「智元兔 AI」

在当今技术飞速发展的时代&#xff0c;越来越多的领域开始应用人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;。其中&#xff0c;AI写作工具备受瞩目&#xff0c;备受推崇。 在众多的选择中&#xff0c;智元兔AI是一款在笔者使用过程中非常有帮助…

配音软件怎么选择?(简单又实用)

随着短视频、自媒体的普及推广越来越好&#xff0c;想必大家都了解到配音软件的重要性了&#xff0c;用对配音软件&#xff0c;借助AI的力量让我们的作品达到事半功倍是效果&#xff0c;目前市面上有很多不同类型的配音软件&#xff0c;从专业的录音室级别的软件到简单易用的家…

C#中LINQtoSQL的设置与连接

目录 一、首次安装LinqToSql类 二、非首次安装LinqToSql类 1.接受原有数据库连接 2.建立新的数据库连接 3.建立本地数据库连接 LINQ&#xff08;Language-Integrated Query&#xff0c;语言集成查询&#xff09;是微软公司提供的一项新技术&#xff0c;它能够将查询功能直…